Nuxt3框架入门：nuxt3项目部署

尖椒土豆sss
1,788 阅读6分钟

前言

当开发完nuxt3项目后，就需要进行部署了。nuxt3项目支持ssr部署。

nuxt3项目部署

nuxt项目部署方式有两种，在nuxt.config.js 配置文件中要对不同打包方式进行配置

静态部署（ssg）

将项目部署为普通的 spa 应用。缺点就是如果后台修改数据，前端还是显示之前打包的数据，相当于静态页面。

nuxt.config.js 配置

export default defineNuxtConfig({ 
  ssr: false
})
  • npm run generate 生成 .output文件夹

本地打包完成后可以执行 npm run preview 查看

image.png

浏览器访问之后可以打开网络请求检查一下 document 文件看看返回的是什么，发现只有一个空壳子，说明SPA部署成功。

注意观察ssg方式打包后 __nuxt 容器是空的：

image.png

  • 上传生成的 .output 文件夹下所有文件到服务器

  • nginx配置代理后访问地址即可

动态部署（ssr）

将项目部署为 ssr 应用。

nuxt.config.js 配置

export default defineNuxtConfig({ 
  ssr: true // 默认为true
})
  • npm run build生成 .output 会多一个 server 文件夹

image.png

  • 上传生成的 .output 文件夹下所有文件到服务器

  • nginx配置代理后访问地址即可

本地打包完成后可以先本地执行 npm run preview 看一下是否正常启动

浏览器访问：http://localhost:3000， 但是页面报错 This page is temporarily unavailable.

image.png

修改 nuxt.config 配置文件，添加 host 字段

  devServer: {
    host: "0.0.0.0"
  },

重新打包、执行 npm run preview 访问成功

image.png

启动后看一下网路请求里面的 document 是否是有内容的html的页面，如果有内容，就代表 ssr 本地启动成功了，然后就可以部署到服务器上了。

注意观察 __nuxt 容器是有内容的：

image.png

并且 type 为 application/json 的这个 script 也是有内容的：

image.png

可以看到这里直接是返回的是内容，这样就非常适合seo了。

ssr项目部署到服务器，需要在服务器搭个node环境，然后启动node服务，直接在上面跑。但是关闭窗口就会中断，所以需要在服务器使用 pm2 来守护进程。

本地部署（使用pm2）

PM2是一个Node.js应用程序的生产进程管理器，可以用来启动、重启、停止和删除应用程序。

本地安装pm2

由于我没有服务器，所以这里就使用自己的机器当服务器，模拟一遍部署流程。

安装 pm2： npm install pm2@latest -g

查看版本： image.png

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(服务名)查看服务日志

新增配置文件

要使用 pm2 管理运行项目的话，需要在根目录(部署项目的目录，比如我是将.output内容部署在我本地nginx的 www/nuxt1目录下) 所以就需要在 www/nuxt1 目录下配置 ecosystem.config.js

  • 新建配置文件：ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'nuxt3-demo',  // 设置pm2启动项目名称
      exec_mode: 'cluster',  // 使用集群模式运行
      instances: 'max', // 根据CPU核心数自动分配实例数
      script: './server/index.mjs'  // 注意这里的相对路径
    }
  ]
}

image.png

直接在根目录下进入终端执行命令： pm2 start ecosystem.config.js

image.png

此时访问 localhost:3000 发现可以访问成功！因为默认监听的端口是3000，但是我不希望启动的端口是3000，所以修改配置文件如下：


module.exports = {
  apps: [
    {
      name: 'nuxt3-demo',
      port: '5100',
      exec_mode: 'cluster', // 使用集群模式运行
      instances: 'max', // 根据CPU核心数自动分配实例数
      script: './server/index.mjs',
      args: 'start -e production'// pm2执行其实就是 `nuxt start -e production`
    }
  ]
}

然后重新使用pm2启动服务：pm2 start ecosystem.config.js

我的mac电脑 cpu核总数是8，所以启动了8个实例。 如果在服务器部署，服务器的CPU是几核，就会启动几个实例。

image.png

如果有服务器，使用服务器进行部署，此时就可以使用服务器ip地址+ 端口进行访问， 而我是在本地电脑部署就可以使用本地ip+端口访问了。

配置nginx进行代理转发

mac上nginx 的配置文件路径： /opt/homebrew/etc/nginx/nginx.conf

例子

  • 配置nginx，让服务器域名可以直接访问nuxt项目网站
server {
	listen 80;
        server_name www.xxxx.run;
        location /{
                     proxy_pass http://localhost:3000; # 反向代理至node服务器
         }
}

ps： 监听80端口，当访问 www.xxxx.run 域名时，直接代理到：使用pm2启动的nuxt3项目的node服务： http://localhost:3000
此时在浏览器使用：http:// www.xxxx.run 就可以访问到pm2启动的 3000端口的网站了

nginx配置代理

  • 9991
server {
   listen      9991;
   server_name localhost;
   location / {
      proxy_pass http://localhost:5100;
   }
   location /api/ {
     proxy_pass http://127.0.0.1:5002;
   }
}

这里监听 9991端口， 当访问 http://localhost:9991 时，会进行拦截转发，注意这里是转发，使用的是 proxy_pass，转发到： http://localhost:5100的服务上。

这里和传统的前端打包 dist 文件配置nginx不一样。dist是一种静态资源，可以直接 alias /www/xxx/,然后会访问该目录下的 index.html.

而nuxt3项目的部署是在服务器上运行一个node服务-> 通过nginx代理转发到这个服务，从而能访问到nuxt3项目的前端页面-> 然后在操作页面的时候会发请求到后端项目的端口，这样整个项目跑通。

配置好后，重启nginx服务访问成功：

image.png

重点问题

pm2修改端口访问失败

我的配置文件端口配置的是：6000，pm2启动后，浏览器输入：http://localhost:6000 访问失败。

原因：谷歌浏览器默认有一些非安全端口其中就包含 6000，所以端口需要注意一下。

于是， pm2 delete nuxt3-demo 删除，修改配置文件端口为：5100，使用pm2启动服务。

浏览器输入：http://localhost:5100 访问成功：

image.png

nuxt服务ip和端口

Nuxt在启动时有默认的IP和端口，且默认的IP是 localhost 端口是 3000
若不配置，则默认的IP的localhost 也就是127.0.0.1。localhost是127.0.0.1的别名 127.0.0.1是本地的环回地址 专供自己访问自己 这样我们用外网的IP当然是访问不到的

所以需要改一下Nuxt默认的主机地址改为0.0.0.0，意味着监听每一个可用的网络接口，这样无论是内网还是外网都可以访问。

nginx -s reload报错

报错：nginx: [error] open() "/opt/homebrew/var/run/nginx.pid" failed (2: No such file or directory)

原因：还没有启动 nginx 服务，终端直接执行：nginx 进行启动。

总结

至此，完成了nuxt3项目的部署，了解了ssg和ssr部署的区别。 因为没有服务器，所以直接使用本地电脑部署，把项目部署到本地的nginx，并且使用pm2在本地启动服务，最后用nging做代理转发。

avatar
文章
阅读
粉丝