Nuxt3 is packaged and deployed to Linux (node+pm2 detailed installation and operation steps)

Xiaochao : I recently wrote a project that needs to be packaged and deployed. The process is quite cumbersome, because the operating environment needs to be configured first. To use pm2 to manage project operation, you need to install pm2 on the server, and it is most convenient to use the npm command to install pm2, so you need to download the node environment. So, let us complete the complete process of uploading the Nuxt3 project step by step. It is also a demonstration of successful practical operation, please feel free to read it. The development environment is Windows, and the deployment environment is Linux. The development tool is VSCode, and the deployment server is Alibaba Cloud.

• 1. Server installation nodejs environment
• 2. Install the operation management tool pm2 of Nuxt3
• 3. Package the Nuxt3 project and upload it to the server
• 4. Configure the ecosystem.config.js file
• 5. Use pm2 to start the Nuxt3 project
• 6. Commonly used pm2 commands
• essay

1. Server installation nodejs environment

1. Download the installation package

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

2. Create a nodejs folder, unzip it and put it into the current directory

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

3. Configure environment variables

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. Establish soft links (configure globally available node commands)

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

5. Configure Taobao Mirror

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

6. Check whether the switch is successful

npm config get registry

2. Install the operation management tool pm2 of Nuxt3

Install pm2 globally

npm install pm2 -g 

3. Package the Nuxt3 project and upload it to the server

1. pack

yarn build 
// or 
npm run build

2. Upload server

Generate .oupputa folder containing publicfolders, serverfolders and nitro.json. publicThe following mainly put some static resource files, serverthe next index.jsis our startup entry file. What we have to do is: Put all the files .outputinside into a new project on the server, I created a new nuxt3-appfolder for demonstration. (Of course you can also directly .outputput in)

The official method of uploading files to the Alibaba Cloud server: use WinSCP to upload files to the Linux cloud server (of course other methods are also available)

4. Configure the ecosystem.config.js file

According to the official prompt, if you want to use pm2the management to run the project, you need to configure ecosystem.config.jsthe file in the root directory ( official instructions )

Create a new ecosystem.config.js and put it in the root directory of the project

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

Project structure:

[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. Use pm2 to start the Nuxt3 project

1. Execute the command directly under the root directory

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 indicates that the startup is successful. At this time, if you look at your project in the browser, you can access it normally.

2. Set automatic restart

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]# 

When the server fails or restarts, the pm2 service can record the status and restart automatically, without manually restarting the pm2 service.

3. View service status

pm2 list

6. Commonly used pm2 commands

Order	use
pm2 list	View the list of started services
pm2 show id number	Check the detailed service status corresponding to the id number
pm2 start name (service name)	start service
pm2 stop name (service name)	terminate service
pm2 restart name (service name)	restart service
pm2 delete name (service name)	delete service
pm2 kill name (service name)	kill service
pm2 logs name (service name)	View service execution log
pm2 logs name (service name)	View service log

essay