如何在 localhost (NextJS) 上运行 web 应用程序的 nrwl/nx 生产版本

Question

有没有办法在本地主机上运行 nrwl/nx next.js 构建的应用程序以用于生产？

我尝试在下一个应用的文件夹中使用npm i -g serve 和serve -s 之后，但应用显示时没有样式和导航。

似乎只有 index.html 存在。

我是否必须使用 Vercel 进行部署，或者是否有办法仅在 localhost 上测试捆绑应用程序的性能？

Answer 1

编辑：

您还可以使用自定义服务器文件运行自定义命令。官方documentation is here。

"production": {
  "executor": "@nrwl/workspace:run-commands",
  "options": {
    "command": "node apps/web/server.js"
  }
},

1) 静态网站

来自official documentation：

然后，运行下一个构建来构建您的应用程序。最后，运行 next start 启动 Node.js 服务器。此服务器支持 Next.js 的所有功能。

这意味着您要在NX 中构建您的项目：

nx build project-name

然后导航到dist 文件夹：

cd dist/apps/project-name

那你可以run your project:

npm run start

2) SSR 网站

Gh05d 是正确的，如果你想在 SSR 模式下运行 Next，那么你必须创建一个自定义服务器文件。你可以找到文档如何做到这一点here，然后你的其余设置将取决于你想在哪里以及如何部署你的应用程序。

如果您正在开发演示应用程序，或者如果您的公司使用 Vercel，那么您可以将应用程序部署到 Vercel，而无需自定义 server.js 文件。

这里是NX官方documentation：

Answer 2

为此，您需要一个自定义服务器。在项目的根目录中创建一个 server.js 文件。它应该是这样的：

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

const PORT = parseInt(process.env.PORT, 10) || 3364;
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) => handle(req, res));

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

然后确保您的 package.json 有这些脚本：

{
  "scripts": {
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

然后您只需使用npm run build 构建应用程序，然后使用npm run start 启动应用程序。

next build 在 .next 文件夹中构建生产应用程序。构建完成后，next start 启动一个支持混合页面的 Node.js 服务器，为静态生成的页面和服务器端呈现的页面提供服务。

阅读更多相关信息here。

更新： 添加了正确的启动脚本。