next.js部署到heroku只出現伺服器取得的data，沒有頁面渲染(UI)

heroku react next.js nextjs node.js

fx17896 2023-06-30 13:06:21 ‧ 1209 瀏覽

分享至

大家好，這是我第一次發問，如果表達得太冗長或是不清楚
麻煩告知我，我會馬上修改，謝謝

我要部署我的專案到heroku發生了一些問題（大致如標題）
先說明我的專案內容與配置
project/ 專案根目錄
├── client/ 客戶端，使用react next.js，port3000
│ ├── .env
│ ├── .gitignore
│ ├── package.json
│ ├── package-lock.json
│ ├── next.config.js
│ ├── pages/
│ ├── public/
│ ├── styles/
│ └── ...
---為了部署到heroku所以將伺服器相關的檔案都移至project底下---
├── config/
├── models/
├── node_modules/
├── routes/
├── .env
├── .gitignore
├── package.json
├── package-lock.json
├── server.js 連結伺服器的js，運行在本地端的port是8080
└── validation.js

專案主題是購物網站，有註冊登入、賣家商品的CRUD、買家購物車系統、訂單系統
資料庫是mongoDB，已經有在MongoDB Atlas設置好
在postman使用heroku的url可正常發送請求
目前使用客戶端localhost:3000運行網頁，所有功能皆正常
但我使用heroku的url時，只會出現route指向的請求

譬如說我的首頁會有我在next.js切的版與server取得的資料
正常運行在localhost:3000會出現以下畫面

-------------------------------------
|               Header              |
-------------------------------------
|       |    |   商   |     |   商   |
|   N   |    |   品   |     |   品   |          
|   A   |    |   的   |     |   的   |          
|   V   |    |   資   |     |   資   |      
|       |    |   訊   |     |   訊   |

商品資訊是從server.js的get像資料庫請求來的

app.get("/", async (req, res) => {
  try {
    let foundProduct = await Product.find({}).exec();
    return res.send(foundProduct);
  } catch (e) {
    return res.status(500).send("載入商品過程發生錯誤");
  }
});

但運行在heroku後
https://{我設定給heroku的網址}.herokuapp.com/
頁面是黑底白字，白字如下：
[{"_id":"649d4a166b1559bb06d2e832","photo":"data:image/jpeg;base64Q==","name":"test","description":"test","price":4,"sellerName":"test","sellerID":"649d4a036b1559bb06d2e82b","buyer":[],"soldCount":[],"date":"2023-06-29T13:37:28.421Z","__v":0}]
看起來就是沒有連線到客戶端，只有連線到伺服器

以下附上部署到heroku我對一些檔案的更動

server.js

const path = require("path");
const port = process.env.PORT || 8080;

mongoose
  .connect(process.env.MONGODB_CONNECTION)
  .then(() => {
    console.log("Connecting to mongodb..");
  })
  .catch((e) => {
    console.log(e);
  });
  
  app.use(express.static(path.join(__dirname, "client", "build")));
  if (
  process.env.NODE_ENV === "production" ||
  process.env.NODE_ENV === "staging"
) {
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html")); 
// react的public有index.html，next.js只有pages/index.js，我把index.html改成index.js過，heroku會直接報錯，整個死馬當活馬醫亂試==
  });
}

app.listen(port, () => {
  console.log("port 8080..");
});

project底下的package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
  },
    "engines": {
    "node": "18.9.1"
  }

client底下的package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start -p $PORT", // 有沒有-p $PORT都一樣
  "heroku-postbuild": "npm run build", // 有沒有heroku-postbuild都一樣
  "lint": "next lint"
},
 "engines": { // 有沒有engines都一樣
  "node": "18.9.1"
}

附上heroku的Application Logs

Application Logs
2023-06-30T04:28:35.000000+00:00 app[api]: Build succeeded
2023-06-30T04:28:40.535522+00:00 heroku[web.1]: Starting process with command `npm start`
2023-06-30T04:28:41.851448+00:00 app[web.1]: 
2023-06-30T04:28:41.851483+00:00 app[web.1]: > server@1.0.0 start
2023-06-30T04:28:41.851483+00:00 app[web.1]: > node server.js
2023-06-30T04:28:41.851483+00:00 app[web.1]: 
2023-06-30T04:28:42.247225+00:00 app[web.1]: port 8080..
2023-06-30T04:28:42.709040+00:00 heroku[web.1]: State changed from starting to up
2023-06-30T04:28:44.113115+00:00 app[web.1]: Connecting to mongodb..
2023-06-30T04:28:45.444562+00:00 heroku[router]: at=info method=GET path="/" host={我的heroku網址}.herokuapp.com request_id=7899e62f-110d-4035-9312-85b83f3f6b78 fwd="219.71.101.29" dyno=web.1 connect=0ms service=1694ms status=200 bytes=168259 protocol=https

另外我有在client的.gitignore注意到裡面有/build
原以為是因為被隱藏了所以在path.join會出錯
但下場就是我把/build刪除後，node_modules會很多檔案同步被刪除
然後heroku會直接顯示Arror，連唯一有連上伺服器的資料都沒了==
重點是就算把/build加回.gitignore，node_modules被刪除的也回不來
最後用git回復到commit前才拯救回來

app.use(express.static(path.join(__dirname, "client", "build")));
if (
  process.env.NODE_ENV === "production" ||
  process.env.NODE_ENV === "staging"
) {
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"));
  });
}

後來爬文了解其他人部署next.js，會在客戶端測試npm run build

> clie
nt@0.1.0 build
> next build

- info Loaded env from /Users/x1/Desktop/Project/client/.env
- info Linting and checking validity of types  
- info Creating an optimized production build  
- info Compiled successfully
- info Collecting page data  
- info Generating static pages (11/11)
- info Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ λ /                                      2.55 kB         118 kB
├   └ css/bba6307137d03f3b.css             1.64 kB
├   /_app                                  0 B             116 kB
├ ○ /404                                   182 B           116 kB
├ ○ /seller                                282 B           121 kB
├ ○ /seller/create                         286 B           121 kB
├ ○ /seller/edit/[id]                      280 B           121 kB
├ ○ /seller/order                          285 B           121 kB
├ ○ /user/cart                             313 B           119 kB
├ ○ /user/login                            1.38 kB         117 kB
├ ○ /user/order                            282 B           119 kB
├ ○ /user/profile                          637 B           117 kB
├   └ css/90902db563362695.css             244 B
└ ○ /user/register                         1.38 kB         117 kB
+ First Load JS shared by all              117 kB
  ├ chunks/framework-cda2f1305c3d9424.js   45.2 kB
  ├ chunks/main-a9a5f9df1dceef89.js        27.6 kB
  ├ chunks/pages/_app-363a716366e2f4fa.js  42.3 kB
  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
  └ css/b5b71ddc5beffb87.css               1.17 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

/404 應該是指index.js，但目前在localhost:3000是正常運行
我後來測試一個新的next.js專案全都是預設值，部署到heroku
package.json什麼都沒改，結果一切都能正常顯示....看來真的是我的問題QQ

另外所有在客戶端需要像伺服器端請求的route都已改成heroku的url
所以在localhost:3000我的網頁是正常運作的
運行在heroku需要授權的route會出現黑底白字Unauthorized
有資料的route都是顯示黑底白字的data

沒data的route像是/login會出現白底黑字Not Found
在heroku Application Logs 會出現以下
2023-06-30T05:02:15.583209+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/client/build/index.html'
問題應該是出在build跟index.html？
麻煩各位大神開示指點方向，謝謝