如何构建next.js产品



我试图在next.js中获得一个生产构建来在我的服务器上运行它,但当我尝试时,我无法构建next.js生产构建

npm运行构建

有人知道如何让next.js中的产品构建正常工作吗?我在next.js文档中做了所有工作,但总是在下面出现这个错误。如果我进行开发构建,它运行得很好,但尝试prod构建会导致错误。

我还多次下一次构建,并重新安装了仍然存在此错误的所有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

server.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服务器上使用node运行这个next.js站点。但要做到这一点,我需要获得react.js的生产构建,目前我只能运行一个开发构建。

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" ]

仍然需要更多的解释或帮助,请随时留言,我将非常乐意为您提供帮助。

似乎您的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的生产构建

如果您有问题,请告诉我。

您必须在根文件夹中而不是在.next/中启动next build

有三种方法:-

方法1:使用next build而不是npm run build

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

方法3:在npm run build之后,从JS中删除/,从/static/index.html文件中删除CSS链接。更换这两条

<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等

最新更新