先ほど、Reactのアプリケーションが完成し、buildした後、エックスサーバーにデプロイしたのですが、npm startで表示した時と画面が違っていて困ってます。
top画面の一部が表示されなくなっていたり、react-routerで画面遷移した時に遷移先が真っ白になっていたり、スマホで確認したらアニメーションが角ついていたりと、npm start時と全然違う画面で困っています。
調べても何が原因でそうなっているのかが全くわかりません。
どうか正常にデプロイする方法を教えていただけないでしょうか?
せっかく作ったのできちんとデプロイしたいです。
※以下デプロイまでにやったこと
1.package.jsonに【"homepage": "./"】を追加
2.npm run build
3.生成されたbuildファイルをfilezillaでサーバーアップ
必要かどうかわかりませんが、package.jsonのコードも貼っておきます
{ "name": "waruzou", "version": "0.1.0", "private": true, "dependencies": { "@emotion/core": "^11.0.0", "@emotion/css": "^11.7.1", "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-modal": "^3.14.4", "react-router-dom": "^5.3.0", "react-scripts": "5.0.0", "recoil": "^0.6.1", "web-vitals": "^2.1.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "homepage": "./" }
あなたの回答
tips
プレビュー