如何構建 next.js 生產？

Question

我嘗試在 next.js 中獲取生產版本以在我的服務器上運行它，但是當我嘗試時我無法構建 next.js 生產版本

npm 運行構建

有誰知道如何讓 next.js 中的 prod 構建正常工作我在 next.js 文檔中做了所有事情，但總是在下面出現這個錯誤。 如果我進行開發構建，它工作得很好，但嘗試產品構建會導致錯誤。

我也做了很多次構建並重新安裝了所有仍然有這個錯誤的 node_modules 包。

它總是在終端顯示我

Error: Could not find a valid build in the '/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/.next' directory! Try building your app with 'next build' before starting the server.
    at Server.readBuildId (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:753:15)
    at new Server (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:80:25)
    at module.exports (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next.js:6:10)
    at Object.<anonymous> (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/next.config.js:6:13)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at loadConfig (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/config.js:47:28)
    at _callee2$ (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/build/index.js:52:42)
    at tryCatch (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:114:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-next@1.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello-next@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kk/.npm/_logs/2018-12-10T19_58_00_588Z-debug.log

服務器.js

const express = require("express");
const next = require("next");

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

next.config.js

const express = require("express");
const next = require("next");

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("/projects/:page", (req, res) => {
    const page = req.params.page;
    let file = "";
    switch (page) {
      case "example1":
        file = "/projects/example1";
        break;
      case "example2":
        file = "/projects/example2";
        break;
    }
    return app.render(req, res, file, { page });
  });

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

包.json

 {
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "export": "next export"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "express": "^4.16.4",
    "next": "^7.0.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "redux": "^4.0.1",
    "video-react": "^0.13.1"
  }
}

如果有人有想法那就太好了！ 我計划在我的 AWS 服務器上使用節點運行這個 next.js 站點。 但要做到這一點，我需要獲得 react.js 的生產版本，目前我只能運行開發版本。

希望有人有想法。

提前致謝！

Answer 1

next build其次是next start應該是為生產准備構建並運行它的正確命令。

這是package.json的示例。 如果要導出應用程序以作為靜態內容運行，例如將其作為靜態網站托管在 s3 中，則需要運行next export

...
"scripts": {
    "build": "next build",
    "start": "next start",
    "export": "next export"
}
...

確保您的package.json中有上述腳本，然后按順序運行以下命令

$ npm run build 
$ npm run start

如果要使用特定端口啟動應用程序，可以指定-p端口作為npm run命令的參數

npm run start -- -p 3232

如果你想把它合並到 CI/CD 管道中，你需要有Dockerfile ，這里有一個簡單的例子

FROM node:alpine

#copy source 
COPY . /app

# Install deps 
RUN cd /app &&  npm install 

# Build 
RUN npm run build

ENTRYPOINT [ "npm", "run", "start" ]

仍然需要更多解釋或幫助，請隨時發表評論，我將非常樂意提供幫助。

Answer 2

似乎您的server.js配置不正確。 請嘗試將所有內容從next.config.js移動到server.js ，確保next.config.js文件為空，然后創建一個新的 npm 運行腳本：

"prod_start": "NODE_ENV=production node server.js"

您的package.json應如下所示：

{
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "prod_start": "NODE_ENV=production node server.js",
    "export": "next export"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "express": "^4.16.4",
    "next": "^7.0.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "redux": "^4.0.1",
    "video-react": "^0.13.1"
  }
}

確保運行： npm run build && npm run prod_start

然后你應該有一個使用 next.js 運行的 react 的生產構建

如果您有問題，請告訴我。

Answer 3

您必須在根文件夾而不是在.next/中啟動next build

Answer 4

有3種方法可以做到：-

方式 1：使用next build而不是npm run build

方式2： npm run build npm install -g serve serve -s build更多信息： https ://create-react-app.dev/docs/deployment/

方式 3：在npm run build之后，從 JS 中刪除/ ，從/static/index.html文件中刪除 CSS 鏈接。 例如。 替換這 2 行

<script defer="defer" src="/static/js/main.aa87bc08.js"></script>
<link href="/static/css/main.073c9b0a.css" rel="stylesheet"/>

用這兩條線

<script defer="defer" src="static/js/main.aa87bc08.js"></script>
<link href="static/css/main.073c9b0a.css" rel="stylesheet" />

現在它甚至可以在 file:///D:/codes/ProjectName/build/index.html

如果 3 種方法都不起作用，請在評論中告訴我，我會找到、嘗試並告訴方法 4、5 等。