如何构建 next.js 生产?

2024-01-08

我尝试在 next.js 中获取生产版本以在我的服务器上运行它,但当我尝试时无法构建 next.js 生产版本

npm 运行构建

有谁知道如何让 next.js 中的产品构建正常工作我在 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! [email protected] /cdn-cgi/l/email-protection build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] /cdn-cgi/l/email-protection 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 的生产版本,目前我只能运行开发版本。


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

仍然需要更多解释或帮助,请随时发表评论,我将非常乐意提供帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何构建 next.js 生产? 的相关文章

  • 将 useRef 挂钩传递给 ref 属性的正确方法

    我不确定如何更明确地提出这个问题 但它是关于值传递 and 引用传递反应中的情况 还有胡克斯 我正在使用 gsap 来制作 div 滑入和滑出的动画 这是其上下文 但我猜测 ref 的用途并不重要 因此 这工作得很好 尽管这是一种更典型的类
  • 启动nodejs时出错:openssl配置失败

    启动 Express 节点时出现以下错误 openssl 配置失败 错误 02001003 系统库 fopen 没有这样的 过程 节点无论如何都会启动 我没有尝试使用 SSL 这是起始代码 app Express app set port
  • 在 React 应用程序中简单连接到 mongodb

    我使用 create react app 创建了简单的反应应用程序 这个应用程序包含表单 验证和引导程序 没有什么花哨的东西能像魅力一样发挥作用 我还注册了 mongo 以获得免费集群 以便我可以发送一些数据 所以我有这个网址 mongod
  • 将命令行参数传递给 npm 'pre' 脚本和具有多个命令的脚本

    有没有办法将命令行参数传递给 npm pre 脚本或运行多个命令的脚本 假设一个简单的脚本mySexyScript js这只是注销 process argv console log process argv 这有效 使用 npm 脚本 sc
  • EJS在JS onload函数中访问express变量

    我知道你可以像这样获取 ejs 文件中变量的值 h1 h1 如果我要在同一个 ejs 页面的 onload javascript 函数中使用相同的标题变量 我将如何使用它 例如 这个函数产生一个控制台错误说 未捕获的语法错误 意外的标识符
  • 如何从配置加载套接字 io 事件监听器? [复制]

    这个问题在这里已经有答案了 我有使用套接字io 的nodejs 应用程序 我将存储在 config routes js 中的所有事件侦听器 module exports routes auth login controller auth a
  • 尝试在节点 0.12 上重新安装 `node-sass`?

    我想使用谷歌网络入门套件 我安装了node js v0 12 0 node sass gulp 然后跑 sudo npm install 当我打字时gulp serve然后得到这个错误 Using gulpfile web starter
  • NodeJS:如何获取服务器的端口?

    您经常会看到 Node 的示例 hello world 代码 它创建一个 Http Server 开始侦听端口 然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要
  • React 文件预览 (FIREBASE)

    我目前将文件存储在 Firebase 存储中 我希望能够实时生成每个文件的文件预览 映射 例如 PDF 文件会将第一页显示为图像 docx 将是文档的第一页 pptx 将是第一张幻灯片 未知文档将是默认文档符号 有人知道有什么好的服务可以轻
  • Angular ng new 返回包安装失败错误-compiler.umd.js 丢失

    我正在尝试学习 Angular 并且正在学习在线教程 但是 我似乎无法通过 ng new 创建一个新项目 我在 Windows 7 上运行节点 v10 16 0 和 npm 6 9 0 我在日志中收到以下错误 15177 verbose c
  • 在玩笑中运行普通转换后如何转换模块

    用笑话测试 React 组件 其中一些组件使用 OpenLayers ol 软件包 v5 2 0 在 ol 包 v4 中 我应用了 transformIgnorePatterns 来转换 ol 包 jest transformIgnoreP
  • npm 命令 create-react-app 失败

    我正在尝试在运行 Os X sierra 10 12 6 的计算机 mac pro 2017 上测试reactjs 我已经遵循了 Facebook 教程 确保您安装了最新版本的 Node js done 按照安装说明进行操作创建一个新项目
  • 如何将 NODE_EXTRA_CA_CERTS 的值传递给使用 Serverless 部署的 AWS Lambda?

    我正在部署一个节点AWS Lambda https aws amazon com lambda with 无服务器 https github com serverless serverless 由于运行此代码的机构的内部要求 我需要通过额外
  • 为什么 JavaScript base-36 转换看起来不明确

    我目前正在编写一段使用 Base 36 编码的 JavaScript 我遇到了这个问题 parseInt welcomeback 36 toString 36 看来要回归了 welcomebacg 我在 Chrome 开发者控制台和 Nod
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 使用nodegit切换分支/标签

    我整个早上都在尝试打开现有的存储库并使用 nodegit 更改分支或标签 文档内容很丰富 但似乎已经过时了 关于我做错了什么有什么想法吗 var NodeGit require nodegit var open NodeGit Reposi
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • node.js 本身还是 nginx 前端来提供静态文件?

    是否有更快的基准或比较 将 nginx 放在节点前面并让它直接提供静态文件或仅使用节点并使用它提供静态文件 nginx 解决方案似乎对我来说更易于管理 有什么想法吗 我不得不不同意这里的答案 虽然 Node 可以做得很好 但如果配置正确 n
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本

随机推荐