Nuxt3从零到发布

官网地址：Nuxt3

一：创建项目

Node.js -或更新版本v16.10.0

npx nuxi init nuxt-app

如果出现下面错误，请修改DNS为114.114,114,114

 创建完成后在 Visual Studio Code 中打开项目文件夹：

 二：安装依赖

npm install 或 yarn install

如果出现页面错误需要安装yarn或直接使用npm安装：npm install -g yarn

 三：启动项目

npm run dev 或 yarn dev

四：项目打包

npm run build

五：项目发布

1. CentOS安装Nodejs

//下载Linux版本nodejs
wget https://npm.taobao.org/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz

//或者
wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz
 
//解压
tar -xvf node-v16.14.0-linux-x64.tar.xz

//移动文件夹
mv node-v16.14.0-linux-x64/ /usr/local/node
 
//设置环境变量
echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile
//让配置生效
source /etc/profile
 
//测试输出node版本号
node -v

2. 安装pm2

npm install pm2 -g

 3. 把 .output 里面的所有文件放在服务器上的新建项目里面

4. 在项目根目录配置ecosystem.config.js文件

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',  // 设置启动项目名称
      exec_mode: 'cluster',
      instances: 'max',
      // 注意这里的相对路径，访问到index.mjs
      script: './server/index.mjs'
    }
  ]
}

5. 使用pm2启动Nuxt项目

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

6. 设置自动重启

pm2 startup

7. 查看pm2常用指令

pm2 list    查看启动的服务列表
pm2 show id号    查看对应id号的详细服务情况
pm2 start name(服务名)    启动服务
pm2 stop name(服务名)    终止服务
pm2 restart name(服务名)    重启服务
pm2 delete name(服务名)    删除服务
pm2 kill name(服务名)    杀死服务
pm2 logs name(服务名)    查看服务执行日志
pm2 logs name(服务名)    查看服务日志

8. 配置Nginx反向代理

upstream nodenuxt {
    server 127.0.0.1:3000; #nuxt项目 监听端口
    keepalive 64;
}
server {
    listen 80;
    server_name yoursite.com;    
     location / {
            root   html;
            index  index.html index.htm;
            proxy_pass  http://nodenuxt; 
    }
}

多端口反向代理

 
server {
    listen       80;
    server_name  yoursite.com;
    location /a {
        proxy_pass http://127.0.0.1:8001/;
    }
    location /b {
        proxy_pass http://127.0.0.1:8002/;
    }
    location /c {
        proxy_pass http://127.0.0.1:8003/;
    }
}