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

Posted 2023-02-22

【中文标题】如何运行 Next Js 应用程序构建（输出）目录？

【英文标题】：How to run Next Js application build (out) directory?

【发布时间】：2020-12-10 14:07:33

【问题描述】：

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

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

我遵循的命令，

npm run build & npm run export

上面创建了out目录。那么如何在我的本地机器上运行这个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 提出了问题，但无论如何都没有用..

【参考方案1】：

运行此命令： npm run build && npm run export

它将创建一个输出目录。

然后

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

chrome的web服务器链接： 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',

【讨论】：

没有像 out/build/dist 这样创建的，因为我已经分享了上面的文件夹结构，你可以看到 out 目录的子文件夹。我不想更改目录名称，但我只是想在我的本地机器上运行 build 文件夹（out 目录）.. Angular 应用程序中的正常 ng build 将在 build 文件夹下生成 index.html 并且可以运行该应用程序，但是在 Next Js 中，我不知道如何运行构建文件夹 bcoz no index.html 文件在这里创建..

@Undefined 您已经提到了 out 目录的文件夹结构，这意味着它正在创建，但据我所知没有创建 index.html 文件。尝试像这样运行你的命令 npm run build && npm run export。两个 & 之间登录。不确定这会解决问题。但是请尝试一次。

这就像我们在终端中一个一个地运行命令npm run build 然后npm run export 或npm run build && npm run export .. 两者都是一样的，但这并不能解决问题..

【参考方案2】：

官方的 Next 静态导出示例使用 serve 来“服务”out 目录。由于out 目录只是一堆静态文件，因此您需要某种与外部世界/内部网络的连接层。您可以使用 nginx 之类的东西来服务这些资产（这样就无需运行两个 Web 服务器）。但是，如果您正在寻找一种简单的方法来运行本地 staging 构建，那么您将需要使用某种 Web 服务器：express、http-server 或 serve 等等。

...并且可以将工作构建分享给团队中的任何人。

如果您在远程并连接到WAN，那么您团队中的任何人都可以访问暂存版本（例如：http://wanlocalip:3000 -- 您可以使用address 打印出console message）。如果您没有连接到 WAN 并且没有自己的服务器，那么您必须使用第三方服务（如 vercel、AWS 或 Digital）创建远程登台环境海洋等等。

---

不碍事，让我们以官方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文件：

server.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`);
  
);

可选地我们可以调整next.config.js 以在开发中显示compilation message：

next.config.js

const  DefinePlugin  = require("webpack");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
const address = require("address");

const  LOCALHOST, NODE_ENV, PORT  = process.env;
const LOCALIP = address.ip();

const plugins = (isServer) => 
  const plugins = [];

  if (!isServer) 
    plugins.push(
      /* OPTIONAL -- append ENVS to client-side process */
      new DefinePlugin(
        "process.env": 
          LOCALHOST: JSON.stringify(LOCALHOST),
          NODE_ENV: JSON.stringify(NODE_ENV),
        ,
      )
    );
   else 
    plugins.push(
     /* add console compilation messages */
      NODE_ENV === "development" &&
        new FriendlyErrorsWebpackPlugin(
          compilationSuccessInfo: 
            messages: [
              `Local development build: \x1b[1m$LOCALHOST\x1b[0m`,
              LOCALIP &&
                `Remote development build: \x1b[1mhttp://$LOCALIP:$PORT\x1b[0m`,
            ].filter(Boolean),
            notes: [
              "Note that the development build is not optimized.",
              "To create a production build, use \x1b[1m\x1b[32myarn export\x1b[0m.\n",
            ],
          ,
          clearConsole: false,
        )
    );
  

  return plugins.filter(Boolean);
;

module.exports = 
  webpack(config,  isServer ) 
    /* adds custom plugins to client and/or server */
    config.plugins.push(...plugins(isServer));

    /* return new config to next */
    return config;
  ,
;

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

本地

WAN（只有在 WAN 中连接到 LAN 连接的用户才能访问）

---

单击here 以查看上述的工作回购示例。

如果您的项目仍有问题，请分享一个存储库；否则，将很难帮助您进行故障排除。

【讨论】：

在您的解决方案中，在这一行 const LOCALHOST, NODE_ENV, PORT = process.env; 我得到 LOCALHOST 和 PORT 在我的应用程序中未定义。但是如果我克隆并运行您的应用程序，那么它就可以工作了。所以你能帮我看看我的应用有什么问题吗？

我从process.env 得到NEXTAUTH_URL，如果我分配它而不是LOCALHOST，那么我得到http://localhost:3000/，但如果我在浏览器中运行这个url，那么它就不起作用。 .

缺少.env.local？

你是对的。我已经有.env.local 文件，但错过了添加这些变量。感谢您的快速回复。

如果可能的话，请你分享一些有价值的 Next Js 教程，我可以在那里有效地学习东西。我觉得我正在使用 Next Js，但不知道如何以正确的方式使用它。

【参考方案3】：

如果您有一个带有嵌套路径文件夹/文件的 NextJS 站点，您需要一个配置了回退逻辑的本地服务器。考虑一个next export，它会生成：

/out
  /_next
  /docs
    /guide.html
  /index.html
  /docs.html

当您加载 url http://localhost:3000/docs 时，您的本地服务器应该为 /docs.html 提供服务，因为 /docs/index.html 不存在。

默认情况下正确配置的唯一本地服务器是： https://www.npmjs.com/package/serve

npm install serve --save-dev

然后在你的 package.json 中添加一个dev:static 命令：

  "scripts": 
    "dev": "next dev",
    "dev:static": "serve ./out",
    "build": "next build && next export",
    "start": "next start"
  ,

然后运行命令在本地查看静态站点：

npm run build
npm run dev:static