nuxt3项目打包部署上线

官方部署文档

想了解原来spa应用部署时nginx如何处理的，直接看最下面的 "问题"

第一步：配置环境变量

package.json文件配置

{
    "scripts": {
        "build:prod": "nuxt build --mode prod",
        "build:dev": "nuxt build --mode dev",
        "dev": "nuxt dev --mode dev",
        "prod": "nuxt dev --mode prod",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
    }
}

我这边定义了dev环境和prod环境运行项目和打包的命令

--mode 自定义环境名

使项目获取相关环境参数。

nuxt.config.ts文件配置

import { loadEnv } from 'vite'
​
interface VITE_ENV_CONFIG {
    VITE_HOST:string,
    VITE_BASE_URL:string
}
​
const envScript = process.env.npm_lifecycle_script?.split(' ') || []
const envName = envScript[envScript.length - 1] // 通过启动命令区分环境
const envData = loadEnv(envName, 'env') as unknown as VITE_ENV_CONFIG
​
export default defineNuxtConfig({
    runtimeConfig: {
        pubilc: envData
    }
    ...
})

将环境变量内容放入runtimeConfig.pubilc下

创建env文件

根目录下创建env文件夹，文件例如.env.dev，.env.prod

注意变量开头必须为VITE才可将其暴露出去

// .env.dev
​
VITE_BASE_URL='localhost'

// .env.pord
​
VITE_BASE_URL='线上地址'

如何使用

在文件下使用useRuntimeConfig()

demo.ts
​
export default defineEventHandler(event => {
    let baseURL:string = useRuntimeConfig().public.VITE_BASE_URL
    console.log(baseURL)    // 例如dev环境下打印的就是 'localhost'
})

第二步：配置pm2启动文件

服务器使用pm2启动项目，在服务器安装npm i pm2 -g

ecosystem.config.js

module.exports = {
    apps: [
        {
            name: '项目名称',
            port: '80', //监听端口
            exec_mode: 'cluster',
            instances: 'max',
            script: './server/index.mjs'
        }
    ]
}

将此文件放入build后的.output文件夹下

这里列出我自己常用的pm2 命令

pm2 list //查看所有pm2进程
pm2 start //启动进程
pm2 stop all //停止所有进程
pm2 stop 进程号 //停止某个进程
pm2 delete all //删除所有进程
pm2 delete 进程号 //删除某个进程
pm2 reload 进程号 //重启某个进程

第三步：部署

上传

使用scp命令手动将打包文件夹上传至服务器

scp -r ./.output root@服务器公网ip:~/目标文件夹名          //目标文件夹不存在将自己创建

随后输入服务器密码就ok了

启动

cd到目标文件夹下输入命令pm2 start，自动读取pm2的启动文件ecosystem.config.js

问题

普通spa应用和nuxt3 ssr应用的区别

我之前的前端项目是基于vue3+vite的spa项目，此项目部署时打包出来有index.html文件，服务器需通过nginx将访问网址和项目"绑定起来"

// nginx.conf
server {
        listen       80;
        server_name  47.108.62.93;
​
        location / {
            try_files $uri $uri/ /index.html = 404;
            root   /root/blog_web;
            index  index.html index.htm;
        }
        
        location /api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://47.108.62.93:8083/;
        }
​
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

而nuxt3下，通过npm run build打包后是node服务，所有没有.html文件，代替的是一个index.mjs启动文件，可通过node命令启动此文件而达到运行项目的目的。直接使用pm2启动，让项目运行在服务器后台。

停止原来的nginx进程，直接将pm2启动文件的监听端口改为80端口就可成功部署。