初学者前端项目部署指南：直击部署中遇到的坑

2024-02-21 21:07:24

虽然我对前端项目部署很陌生，但最近为了学习，我决定在自己本机上的虚拟机上练习，如何把一个 react 写的单页面应用部署到虚拟机的服务器上。由于我之前对 linux 也接触不多，所以我遇到了很多困难。

问题 1：如何把前端项目代码上传到服务器？

一开始我想直接把代码上传到服务器，然后运行 npm install 来安装依赖，但是很快就遇到了第一个坑。在服务器上运行 npm install 时报了很多错，提示我一些依赖项找不到。

解决方案：

原来，这是因为服务器上没有安装 node.js，所以无法识别 npm 命令。

在服务器上安装 node.js：

sudo apt-get update
sudo apt-get install nodejs

重新运行 npm install，这次就没有报错。

问题 2：如何配置 nginx 来代理前端项目？

在服务器上安装完 node.js 后，我需要配置 nginx 来代理前端项目。这样，当用户访问服务器时，nginx 就会把请求转发给前端项目。

按照网上的教程，我在 nginx 的配置文件里添加了以下配置：

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;
    }
}

然后重新启动 nginx。

但是，当我访问服务器时，却看到 nginx 的默认页面。

解决方案：

经过一番排查，我发现问题出在服务器的防火墙上。防火墙阻止了 nginx 监听端口 80。

关闭服务器的防火墙：

sudo ufw disable

再次访问服务器，这次终于看到了前端项目的页面了。

问题 3：如何让前端项目在服务器上自动运行？

我不想每次都手动运行 npm start 来启动前端项目，所以我需要让它在服务器上自动运行。

解决方案：

可以使用 pm2 来管理进程。pm2 可以让进程在后台运行，即使服务器重启也不会中断。

首先，安装 pm2：

sudo npm install pm2 -g

然后，在项目根目录下创建一个 pm2.json 文件，内容如下：

{
  "apps": [
    {
      "name": "my-app",
      "script": "npm start",
      "watch": true
    }
  ]
}

最后，运行以下命令来启动 pm2：

pm2 start pm2.json

现在，前端项目就会在服务器上自动运行了。

问题 4：如何处理前端项目的构建产物？

前端项目在开发环境和生产环境的构建产物是不一样的。在开发环境中，构建产物是未压缩的，便于开发人员调试。而在生产环境中，构建产物是压缩过的，以便提高性能。

解决方案：

可以使用 webpack 来构建前端项目。webpack 可以根据不同的环境生成不同的构建产物。

首先，安装 webpack：

sudo npm install webpack -g

然后，在项目根目录下创建一个 webpack.config.js 文件，内容如下：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};