SPA项目利用PM2工具部署到服务器之细节揭秘

2023-11-08 12:41:01

如今，SPA（Single Page Application）项目前端和后端分离已经成为主流开发模式，这样的好处在于前端和后端可以分别进行独立的开发和维护，提高开发效率，同时还可以支持多端兼容，但它也带来一个问题：前端与后端如何协同工作。

为了解决此问题，前端项目需要一个打包工具（如webpack）将前端代码打包成静态文件，然后后端服务将静态文件提供给客户端。因此，当我们需要将SPA项目部署到服务器时，需要将前端和后端的代码都部署上去，这就涉及到前端和后端的协作问题。

PM2工具简介

PM2（Process Manager 2）是一款流行的进程管理工具，它可以帮助用户轻松启动、管理和监控进程。在Node.js开发中，PM2经常被用来管理Node.js应用程序。

使用PM2管理Node.js应用程序

1. 安装PM2

npm install -g pm2

2. 启动Node.js应用程序

pm2 start app.js

3. 停止Node.js应用程序

pm2 stop app.js

4. 重新启动Node.js应用程序

pm2 restart app.js

5. 查看Node.js应用程序状态

pm2 status

利用PM2工具部署前端和后端项目

1. 在服务器上安装PM2

ssh username@ipaddress
sudo apt-get update
sudo apt-get install pm2

2. 将前端和后端代码上传到服务器

可以使用scp命令将代码上传到服务器，也可以使用Git等工具将代码上传到服务器。

3. 安装前端和后端依赖

在服务器上分别运行以下命令：

cd frontend
npm install
cd ../backend
npm install

4. 将前端代码打包

在服务器上运行以下命令：

cd frontend
npm run build

5. 配置PM2

在服务器上创建以下文件：

/etc/pm2/conf.json

{
  "apps": [
    {
      "name": "frontend",
      "script": "./frontend/build/index.js",
      "env": {
        "NODE_ENV": "production"
      }
    },
    {
      "name": "backend",
      "script": "./backend/index.js",
      "env": {
        "NODE_ENV": "production"
      }
    }
  ]
}

6. 启动PM2

在服务器上运行以下命令：

pm2 start /etc/pm2/conf.json

7. 查看PM2状态

在服务器上运行以下命令：

pm2 status

如果一切正常，你会看到以下输出：

┌────────┬────────┬────────┬──────┬────────┬───────┬────────┬────────┬──────┐
│ App name │ Id      │ Mode    │ PID    │ Status │ Memory │ CPU    │ Uptime │ Restarts │
├────────┼────────┼────────┼──────┼────────┼───────┼────────┼────────┼──────┤
│ frontend │ 0       │ cluster │ 12345 │ online │ 100mb   │ 10%     │ 1h      │ 0       │
│ backend  │ 1       │ cluster │ 12346 │ online │ 200mb   │ 20%     │ 1h      │ 0       │
└────────┴────────┴────────┴──────┴────────┴───────┴────────┴────────┴──────┘