如何运行 Next Js 应用程序构建（输出）目录？

Question

我已经完成了 Next Js 应用程序的开发，到目前为止我已经使用vercel完成了自动部署

到目前为止一切都很好..但是我需要构建 Next Js 应用程序并与团队共享构建文件夹以在服务器中进行部署。

我遵循的命令，

npm run build & npm run export

而上面的创建out目录..那么如何在我的本地机器上运行这个目录以检查构建文件夹是否按预期工作，然后再与团队共享？

out目录的文件夹结构：

 -> out

      -> _next
             -> static
             -> xxxxxxxxxxxxx (some random name)
      -> static
      -> home.png
      -> location.png

所以任何人都可以帮助我如何运行这个生成的构建文件夹（out）来检查开发的 Next Js 应用程序在我的本地机器上是否正常工作，之后我可以与团队共享相同的构建文件夹？

具体来说，我想知道如何在本地构建下一个 js 应用程序，然后在本地测试构建的文件夹，该文件夹将运行该应用程序并可以与团队中的任何人共享工作构建。

在此处提出问题https://github.com/vercel/next.js/discussions/16439但这无论如何都无济于事..

Answer 1

官方 Next 静态导出示例使用serve来“提供”out目录。由于out目录只是一堆静态文件，因此您需要某种与外部世界/内部网络的连接层。您可以使用nginx之类的东西来为这些资产提供服务（这样就无需运行两个 Web 服务器）。但是，如果你正在寻找一个简单的方法来运行本地分期建设，那么你就需要使用某种形式的Web服务器：表达，HTTP服务器或服务，仅举几例。

...并且可以与团队中的任何人共享工作构建。

如果您是远程连接到WAN，那么您团队中的任何人都可以访问临时构建（例如：http://wanlocalip:3000--您可以使用地址打印控制台消息）。如果您没有连接到 WAN 并且没有自己的服务器，则必须使用 vercel、AWS 或 Digital Ocean 等第三方服务创建远程登台环境，仅举几例。

顺便说一下，让我们以官方的with-static-export示例并设置自定义快速服务器。

首先，我们将添加一些依赖项： yarn add chalk dotenv express

将package.json文件脚本调整为：

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

然后我们将server.js在根目录中创建一个文件：

服务器.js

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

可选的，我们可以调整next.config.js显示编译消息在发展：

下一个.config.js

const dotenv = require("dotenv");
// import ENVs from ".env.local" and append to process
dotenv.config({ path: ".env.local" }); 
const express = require("express");
const address = require("address");
const chalk = require("chalk");

// create express web server instance
const app = express();
// pull out ENVs from process
const { LOCALHOST, PORT } = process.env;
// get the Local IP address
const LOCALIP = address.ip();

// tell express to serve up production assets from the out directory
app.use(express.static("out"));

// tell express to listen for incoming connections on the specified PORT
app.listen(PORT, (err) => {
  if (!err) {
    // log the LOCALHOST and LOCALIP addresses where the app is running
    console.log(
      `\n${chalk.rgb(7, 54, 66).bgRgb(38, 139, 210)(" I ")} ${chalk.blue(
        "Application is running at"
      )} ${chalk.rgb(235, 220, 52).bold(LOCALHOST)} ${chalk.blue(
        "or"
      )} ${chalk.rgb(235, 220, 52).bold(`http://${LOCALIP}:${PORT}`)}\n`
    );
  } else {
    console.err(`\nUnable to start server: ${err}`);
  }
});

现在我们已经设置好了一切，我们可以运行yarn export以构建项目并将其导出到out目录，然后我们可以通过运行yarn start. 访问控制台中打印的地址之一。

当地的

WAN（只有那些连接到 WAN 内的 LAN 连接的人才能访问）

单击此处查看上述工作的回购示例。

如果你的项目仍然有问题，那么请分享一个存储库；否则，帮助您排除故障将非常困难。

Answer 2

运行这个命令： npm run build && npm run export

它将创建一个 out 目录。

然后

要运行该out/build/dist目录，您可以安装web server for chrome addon in your chrome browser或安装http-server. 我在这里进行覆盖web server addon。

Chrome 网络服务器链接： https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb ?hl=en

启动应用程序，然后选择您的out/build/dist文件夹，然后它将为您提供一个链接，只需导航到给定的链接即可。

如果您想更改out目录名称，请参见下文

next.js 创建.next目录而不是build.

要创建自定义目录build，您需要在next.config.js

next.config.js

module.exports = {
  distDir: 'build',
}