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

如何解决如何运行Next Js应用程序的构建输出目录？

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

到目前为止，一切都还不错。但是，这是我需要构建Next Js应用程序并与团队共享构建文件夹以便在服务器中进行部署的要求。

我遵循的命令，

npm run build＆ npm run export

上面的代码创建了out目录。那么在与团队共享之前，如何在我的本地计算机上运行该目录以检查build文件夹是否按预期工作？

out目录的文件夹结构：

 -> out

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

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

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

这里https://github.com/vercel/next.js/discussions/16439出现了问题，但这还是无济于事。

解决方法

运行以下命令： 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的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中设置config

next.config.js

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

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

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

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

通过这种方式，让我们以官方的console message示例为例，并设置一个自定义快递服务器。

首先，我们将添加一些依赖项： 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,52).bold(`http://${LOCALIP}:${PORT}`)}\n`
    );
  } else {
    console.err(`\nUnable to start server: ${err}`);
  }
});

可选，我们可以调整next.config.js以在开发中显示with-static-export：

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来运行本地暂存环境。访问compilation message中打印的地址之一。

本地

WAN（仅WAN中连接到LAN连接的用户可以访问）

单击console以查看上述示例的回购示例。

如果您的项目仍遇到问题，请共享一个存储库；否则，将很难帮助您解决问题。

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

如何解决如何运行Next Js应用程序的构建输出目录？

解决方法

相关推荐