MLab、React、Redux で MERN アプリを開発しました。dev で正常に動作します。Heroku にデプロイし 、開発に使用した Chrome で正常に動作します(React、Redux の添付ファイルを使用)。
問題: 他のマシンのクロムを含め、自分のマシンの他のブラウザでは空白で表示されます。私はネットを見て、このフォーラムの解決策に従って、server.js (または app.js) で次のことを行いました。つまり、私自身のクロムではこの URL ( https://servicexpoc.herokuapp.com/ ) は正常に機能しますが、他のすべてのクロムでは空白のページです。
if (process.env.NODE_ENV === 'production') {
// app.use(express.static('client/build')); returns blank page
// Changed to ...
app.use('/static', express.static(path.join(__dirname, 'client/build')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}
従来の ... git スタッフ (git add、commit) を実行してから、Heroku へのリモート接続を確認し、「git push heroku master」を実行しました。すべてが順調に進みました...サーバーは稼働しています。そしてもう一度、それは私のクロムに現れ、魅力のように機能します...しかし、他のどこにもありません。
以下は私のサーバー側のpackage.jsonです:
{
"name": "appname",
"version": "1.0.0",
"description": "Developer Connection social media",
"main": "server.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start -prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix
client && npm run build --prefix client"
},
"author": "Jit <sarbojit.project@gmail.com>",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"concurrently": "^3.6.0",
"express": "^4.16.3",
"gravatar": "^1.6.0",
"jsonwebtoken": "^8.3.0",
"mongoose": "^5.1.5",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"validator": "^10.3.0"
}
}
以下はクライアント側のpackage.jsonです
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"classnames": "^2.2.6",
"jwt-decode": "^2.2.0",
"moment": "^2.22.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-moment": "^0.7.7",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
私のディレクトリ構造:
appName
client
public
... index.html (that is the root of react)
src
... this has all the react code
package.json (client side)
....... SERVER SIDE
server.js
models
... all models here
routers
... all routers here
validations
... all validations here
package.json (SERVER SIDE)
.gitignore
次のようにディレクティブに従おうとしています: https://expressjs.com/en/starter/static-files.html
何か助けて...