[详细教程]Nuxt2前端项目的部署

此篇文章仅介绍前端Nuxt2项目的部署，如需更详细的前后端分离项目的部署教程请参考：https://blog.csdn.net/weixin_44567080/article/details/131770045

方式一：使用Node.js部署（SSR部署）

一、Node.js下载及配置

1.下载Node.js

下载地址：https://nodejs.org/zh-cn/download

官网下载Node.js，注意下载版本尽量和本地项目版本保持一致

 其他版本下载地址：https://nodejs.org/dist/

2.将Node.js上传到服务器

这里使用Xftp上传，Xftp是一个功能强大的SFTP、FTP 远程文件传输软件，能够安全的、可视化的在Windows和Linux之间传输文件。

先在/usr/local目录下创建node文件夹，再将下载的Node.js上传

3.解压并安装

# 进入目录
cd /usr/local/node
# 解压
xz -d node-v18.16.1-linux-x64.tar.xz
tar -xvf node-v18.16.1-linux-x64.tar

4.配置环境变量

# 打开profile文件进行编辑
sudo vi /etc/profile
# profile文件中，按i键进行编辑插入
# 在最上面写入如下环境变量的配置
export NODE_HOME=/usr/local/node 
export PATH=$NODE_HOME/bin:$PATH
# 编辑完按Esc键退出编辑，最后输入:wq保存退出（注意:要写）

查看是否安装成功

node -v
npm -v

5.安装pm2

pm2 是开源的基于Node.js的进程管理工具，可实现资源高效调度和负载均衡，包括守护进程、监控、日志的一整套完整的功能。

npm i -g pm2

二、使用build打包

1.修改本地项目配置

搜索localhost，全部替换为服务器IP

在nuxt.config.js文件中添加如下内容

target: 'server',  
server:{
    port:3000,   //自定义前端端口号
    host:"0.0.0.0",    //允许任意ip访问
    timing:false
}

注意：需要将端口号添加到云服务器的安全组规则中

2.打包上传到服务器

使用npm run build的方式打包，一些Nuxt项目可能命令不一样，可以在package.json文件查看

打包之后将.nuxt、nuxt.config.js、package.json、static文件上传到服务器

进入上传的文件位置，使用npm i命令安装依赖

运行npm start即可启动

3.配置pm2并后台运行

在项目目录创建一个ecosystem.config.js文件，写入如下内容

module.exports = {
    apps: [
      {
        name: 'localhost',  //名称可以自定义
        exec_mode: 'cluster',
        instances: 'max', 
        script: './node_modules/nuxt/bin/nuxt.js',
        args: 'start'
      }
    ]
}

使用pm2运行Nuxt项目：进入项目文件目录，运行pm2命令，pm2会在当前文件目录内查找ecosystem.config.js文件来运行启动

# 使用pm2启动
pm2 start npm --name 自定义名称 -- start
# 显示所有进程状态
pm2 list
# 保存当前运行的应用程序列表
pm2 save
# 生成一个启动脚本，并将保存到应用程序列表添加到系统启动项中
pm2 startup
# 重启
pm2 restart 自定义名称
# 终止进程，但程序还在
pm2 stop 自定义名称
# 删除
pm2 delete 自定义名称

方式二：使用Nginx部署（静态部署）

一、使用generate静态打包

1.修改本地项目配置

搜索localhost，全部替换为服务器IP

在nuxt.config.js文件中加上

target: 'static'

注意，打包成静态页面后，asynData方法不再生效

asyncData({ params, error }) {  
    return { newsId: params.id };
},

应该改为如下方式传参

this.newsId = this.$route.params.id;

2.打包上传到服务器

使用 npm run generate命令打包，一些Nuxt项目可能命令不一样，可以在package.json文件查看

 打包完成会生成一个dist文件，将dist文件上传到服务器

二、Nginx下载及配置

1.下载nginx安装包

下载地址：nginx: download

2.使用Xftp上传到服务器

在/usr/local目录下，新建文件夹nginx，进入nginx文件夹，将下载好的nginx上传

 3.解压并安装nginx

# 进入目录
cd /usr/local/nginx
# 解压缩包到当前目录
tar -xvf nginx-1.24.0.tar.gz
# 进入目录
cd nginx-1.24.0
# 编译 执行命令 考虑到后续安装ssl证书 添加两个模块  如不需要直接执行./configure即可
./configure --with-http_stub_status_module --with-http_ssl_module
# 执行编译
make
# 执行安装命令
make install

 4.启动nginx

cd /usr/local/nginx/sbin
# 默认配置文件为/usr/local/nginx/conf/nginx.conf
# 启动nginx
./nginx 

在浏览器中输入：服务器IP地址

看到下面这个界面则表示nginx启动成功

5.配置nginx.config

使用vi命令打开nginx.conf编辑，或者直接在Xftp中找到nginx.conf用记事本打开编辑

# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf

找到server部分，修改如下内容

server {
    listen       80;  # 监听端口，可以换成任意自己想要的
    server_name  localhost;  # 可以换成任意名称
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    location / {
        root   /quosystem/quosystemvue/dist;  # 前端vue存放路径，写到dist即可
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  # 处理前端路由刷新问题
    }
    location /prod_api/ {   # 这里的 /prod_api/ 是你想要代理的后端api路径开头
        proxy_pass http://localhost:port/;  # 替换成你后端应用的端口
	    # 设置请求头，以保留客户端的真实IP地址
	    proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    # 解决前端无法访问上传的文件问题
    location /quosystem/upload/ {      # 设置一个访问的路由
   	    alias /quosystem/upload/;    # 允许通过设置的路由访问该目录下的文件
	}

注意监听端口需要添加到阿里云的安全组规则中

这里的/prod_api/指的是前端是以/prod_api/开头的请求转发到后端服务器，不同的vue项目有所不同，比较常见的为/api/

设置完成后，只需在浏览器输入：服务器IP地址＋监听端口，就可以浏览到前端页面，并且访问/prod_api/的请求将被代理到后端接口。

6.重启nginx

cd /usr/local/nginx/sbin
# 重启命令
./nginx -s reload
# 停止指令
./nginx -s stop

7.设置nginx开机自启动

 新建一个系统服务文件

vi /etc/systemd/system/nginx.service

写入如下内容，注意文件的路径修改为自己的

[Unit]
Description=Nginx HTTP Server
After=network.target

[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s quit
PIDFile=/usr/local/nginx/logs/nginx.pid
PrivateTmp=true

[Install]
WantedBy=multi-user.target

重载系统服务

systemctl daemon-reload

之后就可以使用下面这些命令运行nginx

# 启动
systemctl start nginx
# 允许开机自启
systemctl enable nginx
# 停止
systemctl stop nginx
# 重启
systemctl restart nginx
# 查看状态
systemctl status nginx