关于前端项目如何部署，以Nuxt项目为例

1.准备工作

   首先要有一台服务器，如果有域名的话最好，没有的话可以用ip访问，我使用的是阿里云购买的服务器以及域名

2.前端项目

• 前端采用的是Nuxt项目，SSR服务端渲染，项目搭建完毕后执行 npm run build 进行打包，打包后项目根目录会出现.output文件夹（包含服务端代码 server/index.mjs 和客户端静态资源 client）
• 如果使用的mac电脑，使用scp命令在根目录上传构建文件到服务器 （本地终端执行，快速）

# /home/nuxt-ssr为你的服务器文件夹位置
scp -r ./.output 用户名@服务器IP:/home/nuxt-ssr

3.服务器配置

#  需开放80/443端口

## 因为Nuxt是服务端渲染，需要先在服务器安装一下node.js

1. 进入到对应目录

cd /home/nuxt-ssr

2.  用PM2启动Nuxt服务，守护进程（避免终端关闭后服务暂停）

方法一：☑️

pm2 start .output/server/index.mjs --name nuxt-ssr

方法二：☑️

更推荐使用PM2配置文件，如果有多个Nuxt项目，可在配置中设置运行端口号等信息（ecosystem.config.js）

# 创建并编辑配置文件
sudo vim ecosystem.config.js

具体配置：

module.exports = {
  apps: [{
    name: 'nuxt-app1',  // 项目唯一名称（用于管理）
    script: './.output/server/index.mjs',  // Nuxt SSR 的启动入口
    cwd: '/home/nuxt-ssr', // 项目目录
    env: { PORT: 3001, NODE_ENV: 'production' }  // 端口和环境变量
  }]
};

启动/重启服务：

# 启动服务（首次启动）
pm2 start ecosystem.config.js

# 若已启动，重启更新产物
pm2 restart nuxt-ssr

# 查看服务状态（确保 status 为 online）
pm2 status

# 查看日志（验证是否启动成功，有无报错）
pm2 logs nuxt-backend

✅✅ 启动成功标志：日志显示 Listening on http://[::]:3001（与配置端口一致）

3. 配置Nginx反向代理

Nginx 作为入口，实现「域名访问（无需带端口）、HTTPS 转发、静态资源缓存、负载均衡（可选）」

编辑配置文件：

sudo vim /etc/nginx/conf.d/nuxt.conf

配置内容：

server {
    listen 80;
    server_name 你的服务器IP或域名; # 可同时配置域名和ip 用空格分隔
    
    # 核心：反向代理 Nuxt3 SSR 服务
    location / {
        proxy_pass http://127.0.0.1:3001;  #Nuxt默认端口是3000
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
    }
}

验证Nginx配置并重启：

# 验证配置语法（无报错才继续）
sudo nginx -t

# 重启 Nginx 生效
sudo systemctl restart nginx

4.验证🏅

🎉在浏览器输入ip 或域名看有没有正确展示出页面