React TypeScriptで作ったアプリケーションをherokuにデプロイする際に404エラーが発生。
<ファイル構造>
dist
ーindex.html
ー main.js
node_modules
src
ーmain.tsx
ーApp.tsx
package.lock.json
package.json
tsconfig.json
webpack.config.js
server.js
package.json
1//package.json 2{ 3 "name": "reacttype", 4 "version": "1.0.0", 5 "description": "", 6 "main": "main.js", 7 "scripts": { 8 "test": "echo \"Error: no test specified\" && exit 1", 9 "build": "webpack", 10 "watch": "webpack -w", 11 "start": "node server.js" 12 }, 13 "keywords": [], 14 "author": "", 15 "license": "ISC", 16 "devDependencies": { 17 "css-loader": "^5.0.1", 18 "style-loader": "^2.0.0", 19 "ts-loader": "^8.0.14", 20 "typescript": "^4.1.3", 21 "webpack": "^5.20.1", 22 "webpack-cli": "^4.5.0" 23 }, 24 "dependencies": { 25 "@fortawesome/fontawesome-svg-core": "^1.2.34", 26 "@fortawesome/free-regular-svg-icons": "^5.15.2", 27 "@fortawesome/free-solid-svg-icons": "^5.15.2", 28 "@fortawesome/react-fontawesome": "^0.1.14", 29 "@types/react": "^17.0.1", 30 "@types/react-dom": "^17.0.0", 31 "@types/react-router-dom": "^5.1.7", 32 "axios": "^0.21.1", 33 "express": "^4.17.1", 34 "path": "^0.12.7", 35 "react": "^17.0.1", 36 "react-dom": "^17.0.1", 37 "react-router-dom": "^5.2.0", 38 "react-transition-group": "^4.4.1", 39 "styled-components": "^5.2.1" 40 } 41}
//server.js var path = require('path'); var express = require('express'); const publicPath = path.join(__dirname,'dist'); const PORT = process.env.PORT || 3001; var app = express(); app.use(express.static(path.join(publicPath))); app.get('*',(req,res)=>{ res.sendFile(path.join(publicPath,'index.html')); }) app.listen(PORT, function() { console.log('listening'); });
githubとherokuを連携させてデプロイしております。デプロイまでは成功しますがアクセスするとサーバーエラー(404)が出ます。
ローカルサーバーではうまく動きますがHeroku上では動きません。(ローカルサーバーでは/index.html,/main.jsにもアクセスできます)
尚、Herokuの設定についてはdefaultからいじっておりません。
ご教授いただければと思います。
あなたの回答
tips
プレビュー