nuxt使用PM2+Nginx部署到服务器

本地版本号

• nuxt

"nuxt": "^2.15.8",

• node v16.13.1

1、安装scss环境小插曲

1-1、安装sass@10

npm install --save-dev node-sass sass-loader@10 fibers @nuxtjs/style-resources

• package.json

"fibers": "^5.0.0",
"node-sass": "^6.0.1",
"sass-loader": "^10.2.0"

2-2、nuxt.config.js

buildModules: [
  // https://go.nuxtjs.dev/eslint
  "@nuxtjs/style-resources"//引入模块
],
// global sass
styleResources: {
  scss: ["~assets/scss/entrance.scss"] //输入你的scss路径
},

2-3 参考

# Using Sass In Nuxt.js

2、部署

2-1、上传到服务器

• 本地项目先打包 npm run build

• 把项目下四个文件上传到服务器目录

2-2、用pm2运行项目

方法一，利用命令

• 在目录下安装依赖, 执行npm i

• 安装pm2, npm install -g pm2

• 在目录下运行 pm2 start npm --name "你的项目名称" -- run start

• pm2 list查看是否运行成功

• 浏览器输入xxx.com:3000就能访问了，这里默认为3000端口， 这里要注意下服务器有没有开放3000端口

---

方法二，利用宝塔

像我这样的菜鸟，不用宝塔是在可惜！
像我这样的菜鸟，不用宝塔是在可惜！！
像我这样的菜鸟，不用宝塔是在可惜！！！

• 在宝塔软件商店内安装pm2
• 打开配置窗口

• 运行成功

2-3、用Nginx转发

• 配置nginx

# 新建一个 nuxt server 服务
http{
  upstream nuxt {
    # 这里就是上面配置的 Node ip + 端口号，之前默认是 localhost:3000
    server 0.0.0.0:3000;
    keepalive 64;
  }
  
  server {
    listen 3308; # 服务器端口
    server_name www.xxx.com; # 你的域名
    location / {
      proxy_pass http://nuxt;
      index index.html index.htm index.php;
    }
  }
}

2-4、结果

• www.xxx.com:3308 --- nginx
• www.xxx.com:3000 --- pm2

部分参考

参考