將全棧 MERN web ap 部署到 Netlify 或 Heroku

Question

我想部署一個完整的堆棧 MERN web ap 到 Netlify 或 Heroku 但它總是給我一個錯誤我嘗試了幾件事，但沒有任何人可以幫助我嗎？ 此代碼部署在 Heroku 並給了我一個錯誤頁面不可用我嘗試了幾次都沒有成功

Github 代碼： https://github.com/hazem-kamel/Guestbook-MERN

嘗試使用 GitHub 和 Heroku 部署時的日志：

日志：

-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false

-----> Installing binaries
       engines.node (package.json):  13.8.0
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 13.8.0...
       Downloading and installing node 13.8.0...
       Using default npm version: 6.13.6

-----> Installing dependencies
       Prebuild detected (node_modules already exists)
       Rebuilding any native modules

       > bcrypt@4.0.1 install /tmp/build_b3af99df845ca37998271723b79f6f44/node_modules/bcrypt
       > node-pre-gyp install --fallback-to-build

       [bcrypt] Success: "/tmp/build_b3af99df845ca37998271723b79f6f44/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" already installed
       Pass --update-binary to reinstall or --build-from-source to recompile

       Installing any new modules (package.json)
       audited 286 packages in 2.176s

       3 packages are looking for funding
         run `npm fund` for details

       found 0 vulnerabilities


-----> Build
       Running heroku-postbuild

       > backend@1.0.0 heroku-postbuild /tmp/build_b3af99df845ca37998271723b79f6f44
       > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client

       audited 1926 packages in 13.657s

       58 packages are looking for funding
         run `npm fund` for details

       found 2 vulnerabilities (1 low, 1 high)
         run `npm audit fix` to fix them, or `npm audit` for details

       > frontend@0.1.0 build /tmp/build_b3af99df845ca37998271723b79f6f44/client
       > react-scripts build

       Creating an optimized production build...
       Compiled with warnings.

       ./src/components/Login/Login.js
         Line 12:6:  React Hook useEffect has a missing dependency: 'Redirect'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

       ./src/components/Register/Register.js
         Line 12:6:  React Hook useEffect has a missing dependency: 'Redirect'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

       ./src/components/Chats/Chats.js
         Line 36:6:  React Hook useEffect has missing dependencies: 'friend' and 'user'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

       ./src/components/Dashboard/Dashboard.js
         Line 46:11:  Nested block is redundant  no-lone-blocks

       Search for the keywords to learn more about each warning.
       To ignore, add // eslint-disable-next-line to the line before.

       The project was built assuming it is hosted at /.
       You can control this with the homepage field in your package.json.

       The build folder is ready to be deployed.
       You may serve it with a static server:

         npm install -g serve
         serve -s build

       Find out more about deployment here:

         bit.ly/CRA-deploy
-----> Caching build
       - node_modules

-----> Pruning devDependencies
       audited 286 packages in 2.127s

       3 packages are looking for funding
         run `npm fund` for details

       found 0 vulnerabilities


-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 84.9M
-----> Launching...
       Released v3
       https://guestbook-chat.herokuapp.com/ deployed to Heroku```

Answer 1

在您的節點后端 package.json 中編寫這些腳本

    "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "clientinstall": "npm install --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"
},

在 server.js 的底部寫下這個

// Serve static assets in production
if (process.env.NODE_ENV == 'production') {
    // Set static folder
    app.use(express.static('client/build'));

    app.get('*', (req, res) =>
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
    );
}
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

你完成了。 只需 go 並通過 Heroku 登錄並設置 git 分支。 做

git push heroku master