Nuxt3打包部署到Linux（node+pm2详细安装运行步骤）

以你之姓@ 2024-04-24 14:46 67阅读 0赞

> **小聊**：最近写了一个项目，需要打包部署，过程还是比较繁琐的，因为需要先配置运行环境。准备采用 pm2 管理项目运行，需要在服务器安装 pm2，而安装 pm2 的话用 npm 命令最方便，所以还要下载 node 环境。那么，就让我们一步步的完成 Nuxt3 项目上传的完整过程吧。同样是实操成功的演示，请放心阅览。开发环境是Window，部署环境是Linux。开发工具为VSCode，部署服务器为阿里云。

*  1. 服务器安装 nodejs 环境
 *  2. 安装Nuxt3的运行管理工具 pm2
 *  3. 打包Nuxt3项目并上传到服务器
 *  4. 配置ecosystem.config.js文件
 *  5. 使用pm2启动Nuxt3项目
 *  6. 常用pm2命令
 *  随笔

#### 1. 服务器安装 nodejs 环境 ####

**1. 下载安装包**

# 随便找个地方（注意：源地址只会保存最新稳定的小版本，可以访问https://nodejs.org/dist/这个地址选择源）
    wget https://nodejs.org/dist/latest-v18.x/node-v18.12.0-linux-x64.tar.gz

**2. 建一个nodejs文件夹进入解压并放入当前目录**

# 解压到当前文件夹
    tar -zxvf node-v18.12.0-linux-x64.tar.gz
    # 将解压文件夹里面的内容移动到指定文件路径，便于自己识别管理
    mv node-v18.12.0-linux-x64 /usr/local/node

**3. 配置环境变量**

vim /etc/profile
    # 末尾添加如下几行
    # nodejs环境
    export NODEJS=/usr/local/node
    export PATH=$NODEJS/bin:$PATH
    
    # 重新加载配置
    source /etc/profile
    
    # 进入/usr/local/node/bin查看版本
    cd /usr/local/node/bin
    node -v
    18.12.0

**4. 建立软链接（配置全局可用node命令）**

cd /usr/bin
    ln -s /usr/local/node/bin/node node
    ln -s /usr/local/node/bin/npm npm

**5. 配置淘宝镜像**

npm config set registry=https://registry.npmmirror.com/

**6. 查看是否切换成功**

npm config get registry

#### 2. 安装Nuxt3的运行管理工具 pm2 ####

**全局安装pm2**

npm install pm2 -g

#### 3. 打包Nuxt3项目并上传到服务器 ####

**1. 打包**

yarn build 
    // or 
    npm run build

![在这里插入图片描述][5529ead900a64d0eaa7aaf6ebfa567fe.png_pic_center]

**2. 上传服务器**

生成一个 `.oupput` 的文件夹， 里面包含 `public` 文件夹、 `server` 文件夹和 `nitro.json`。 `public` 下面主要放一些静态资源文件，`server` 下的 `index.js` 就是我们的启动入口文件。 我们要做的事情是： 把 `.output` 里面的所有文件放在服务器上的新建项目里面，我新建了一个 `nuxt3-app` 文件夹做演示。（当然你也可以直接把 `.output` 放进去）

> 官方上传文件到阿里云服务器的方法：[使用WinSCP上传文件到Linux云服务器][WinSCP_Linux]（当然其它方式都可以）

#### 4. 配置ecosystem.config.js文件 ####

> 按照官方提示，要使用 `pm2` 管理运行项目的话，需要在根目录下配置 `ecosystem.config.js` 文件（[官方说明][Link 1]）

**新建一个ecosystem.config.js，放到项目的根目录**

module.exports = {
        
      apps: [
        {
        
          name: 'NuxtAppName',  // 设置启动项目名称
          exec_mode: 'cluster',
          instances: 'max',
          // 注意这里的相对路径。要访问到index.mjs就行了，如果你是整个.output一起放在服务器的话就和官方一样路写成./.output/server/index.mjs就好了
          script: './server/index.mjs'
        }
      ]
    }

项目结构：

[root@iZwz9d9v06uh0jnrexcuk9Z nuxt3-app]# ll
    total 16
    -rw-r--r-- 1 root root  175 Nov  1 23:24 ecosystem.config.js
    -rw-r--r-- 1 root root  129 Nov  1 23:24 nitro.json
    drwxr-xr-x 3 root root 4096 Nov  1 23:23 public
    drwxr-xr-x 4 root root 4096 Nov  1 23:24 server

#### 5. 使用pm2启动Nuxt3项目 ####

**1. 直接在根目录下面执行命令**

pm2 start ecosystem.config.js
    # 然后使用下边的命令看一下启动的服务列表
    pm2 list

[root@iZwz9d9v06uh0jnrexcuk9Z nuxt3-app]# pm2 start ecosystem.config.js
    [PM2] Applying action restartProcessId on app [NuxtAppName](ids: [ 0 ])
    [PM2] [NuxtAppName](0) ✓
    ┌─────┬────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
    │ id  │ name           │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
    ├─────┼────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
    │ 0   │ NuxtAppName    │ default     │ 0.0.0   │ cluster │ 1300     │ 0s     │ 0    │ online    │ 0%       │ 21.3mb   │ root     │ disabled │
    └─────┴────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
    [root@iZwz9d9v06uh0jnrexcuk9Z sunnybook-nuxt3]# pm2 list
    ┌─────┬────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
    │ id  │ name           │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
    ├─────┼────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
    │ 0   │ NuxtAppName    │ default     │ 0.0.0   │ cluster │ 1300     │ 10s    │ 0    │ online    │ 0%       │ 30.9mb   │ root     │ disabled │
    └─────┴────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

online说明启动成功，这时候在浏览器看一下自己项目，可以正常访问。

**2. 设置自动重启**

pm2 startup

[root@iZwz9d9v06uh0jnrexcuk9Z nuxt3-app]# pm2 startup
    [PM2] Init System found: systemd
    Platform systemd
    Template
    [Unit]
    Description=PM2 process manager
    Documentation=https://pm2.keymetrics.io/
    After=network.target
    
    [Service]
    Type=forking
    User=root
    LimitNOFILE=infinity
    LimitNPROC=infinity
    LimitCORE=infinity
    Environment=PATH=/usr/local/node/bin:/usr/java/jdk1.8.0_281/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin
    Environment=PM2_HOME=/root/.pm2
    PIDFile=/root/.pm2/pm2.pid
    Restart=on-failure
    
    ExecStart=/usr/local/node/lib/node_modules/pm2/bin/pm2 resurrect
    ExecReload=/usr/local/node/lib/node_modules/pm2/bin/pm2 reload all
    ExecStop=/usr/local/node/lib/node_modules/pm2/bin/pm2 kill
    
    [Install]
    WantedBy=multi-user.target
    
    Target path
    /etc/systemd/system/pm2-root.service
    Command list
    [ 'systemctl enable pm2-root' ]
    [PM2] Writing init configuration in /etc/systemd/system/pm2-root.service
    [PM2] Making script booting at startup...
    [PM2] [-] Executing: systemctl enable pm2-root...
    [PM2] [v] Command successfully executed.
    +---------------------------------------+
    [PM2] Freeze a process list on reboot via:
    $ pm2 save
    
    [PM2] Remove init script via:
    $ pm2 unstartup systemd
    [root@iZwz9d9v06uh0jnrexcuk9Z nuxt3-app]#

当服务器故障或者重启的时候，pm2服务能记录状态自动重启，不需要人为重启pm2服务。

**3. 查看服务状态**

pm2 list

#### 6. 常用pm2命令 ####

<table> 
 <thead> 
  <tr> 
   <th>命令</th> 
   <th>用途</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pm2 list</td> 
   <td>查看启动的服务列表</td> 
  </tr> 
  <tr> 
   <td>pm2 show id号</td> 
   <td>查看对应id号的详细服务情况</td> 
  </tr> 
  <tr> 
   <td>pm2 start name(服务名)</td> 
   <td>启动服务</td> 
  </tr> 
  <tr> 
   <td>pm2 stop name(服务名)</td> 
   <td>终止服务</td> 
  </tr> 
  <tr> 
   <td>pm2 restart name(服务名)</td> 
   <td>重启服务</td> 
  </tr> 
  <tr> 
   <td>pm2 delete name(服务名)</td> 
   <td>删除服务</td> 
  </tr> 
  <tr> 
   <td>pm2 kill name(服务名)</td> 
   <td>杀死服务</td> 
  </tr> 
  <tr> 
   <td>pm2 logs name(服务名)</td> 
   <td>查看服务执行日志</td> 
  </tr> 
  <tr> 
   <td>pm2 logs name(服务名)</td> 
   <td>查看服务日志</td> 
  </tr> 
 </tbody> 
</table>

#### 随笔 ####

![在这里插入图片描述][58f538d0532c427bac646477f10e68da.jpeg_pic_center]

[5529ead900a64d0eaa7aaf6ebfa567fe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/a9cf36b7dd2248b5830d63c2e2a51496.png
[WinSCP_Linux]: https://help.aliyun.com/document_detail/478699.html?spm=5176.22414175.sslink.3.27815289BDktQf
[Link 1]: https://v3.nuxtjs.org/getting-started/deployment
[58f538d0532c427bac646477f10e68da.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/f533e70f7577464ebbab5b8fd0ce6957.jpeg