如何使用 nginx 在生产环境中提供 webpack 构建文件答案

【问题标题】：how to use ngnix to serve webpack build files in production如何使用 nginx 在生产环境中提供 webpack 构建文件
【发布时间】：2022-03-04 23:03:15
【问题描述】：

我写了一个 vue + webpack 项目，它在 webpack-dev-middleware 中运行良好。现在我想用 nginx 部署它。我所做的是编写一个 webpack.build.config.js 并将所有文件捆绑到一个 dist 文件夹中。然后我只需将 dist 文件夹复制到 nginx html 文件夹中并在 nginx.conf 中分配索引。但是，它有一个错误说：

[Vue 警告]：无法挂载组件：模板或渲染函数没有定义。（在根实例中找到）

我是 devops/后端的新手，对整个构建或部署过程很困惑。生产环境还需要 webpack-dev-server 或 nodejs 吗？我的生产环境后端是 nginx/PHP 和 IIS/.Net，现在根本没有安装节点。

我的 nginx.conf 是

location / {
    root   html/dist;
    index  index.html index.htm;
}

而 webpack.build.config.js 是

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "components";
//var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

module.exports = {
    entry: [
        path.join(__dirname,'./index.js')
    ],
    output: {
        path: path.join(__dirname, '/dist/'),
        filename: '[name].js',
        publicPath: '/'
    },
    devtool: 'eval-source-map',
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, 'index.html'),
            inject: true
        })
    ],
    resolve: {
        root: [path.resolve('./components')],
        extensions: ['', '.js', '.css']
    },
    module: {
        loaders: [
        ]
    }
};

构建时我运行

webpack -p --config ./webpack.build.config.js

【问题讨论】：

对于同样的情况，我使用 ngnix 作为代理，而 pm2 (pm2.keymetrics.io) 管理 nodejs 服务器进程。
@ArkadyB 请进一步详细说明您如何使用 pm2。例如，您使用什么命令部署到生产环境？
@NIMRODMAINA，如 PM2 网站上所述，它是 nodejs 应用程序的生产流程管理器，因此您可以使用任何您想要的工具构建应用程序 - webpack 左右，并使用 pm2 在后台运行您的应用程序。更多信息请参考官网-pm2.keymetrics.io
@ArkadyB 对不起，我是新手。所以请原谅我的电枢问题。命令是 pm2 start webpack.build.config.js 还是我将它指向 build.js 文件？
@NIMRODMAINA，我所做的只是运行“pm2 start app.js”，其中 app.js 是您的节点 js 应用程序。从那时起，它们似乎有了很大的改进，现在支持更多的自动部署功能。请查看他们的文档。

标签： node.js nginx webpack vuejs2

【解决方案1】：

我正在使用vue-cli 来初始化 vuejs webpack 项目。并且项目已经有构建脚本，可以参考：

require('./check-versions')()

process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for production...')
spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

构建后，我们将有一个dist 文件夹。将里面的所有文件上传到 Nginx 的html 文件夹（默认）将根路径配置为使用完整路径，如下所示：

listen      80;
server_name mydomain www.mydomain;
root /var/www/html;

【讨论】：