0

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

何か助けて...

4

1 に答える 1