Nuxt3-SSR 部署方式

环境:

服务器环境

  • node v18.4.0
  • Ubuntu 20.04
  • pm2…

Nuxt3 相关

  • 版本:nuxt3-rc11
  • 包管理工具: yarn
  • 其他库:element plus / unocss

我这里本来用的是 pnpm,但是打包的时候总是漏打包了某些包,导致部署时出现 500 错误,后面换成了 yarn 就好了。

Step1-打包文件夹

  • 本地生成文件: yarn build or pnpm build
  • 需要的文件:.output文件夹

我这里将.output 文件夹重命名为了 output,下面的操作中也进行了相应的修改

Step2-上传云端

可以用 scp 或者 sftp 的方式上传,如果用 scp 的话,先用命令行进入output 文件夹,然后再用 scp 上传 如:

bash
cd output && scp -P 22 -i ~/.ssh/id_rsa -r * [email protected]:/opt/work/example

其中 scp 的配置为: https://usc1.contabostorage.com/cc0b816231a841b1b0232d5ef0c6deb1:image/2022/06/f54a99d39a88a38c569c73dc65533277.png

服务器文件夹结构: 以放在/opt/test/下面为例

  • opt
    • test
      • output
        • public
        • server(这里面有 node_module 了,不需要额外 npm install,重新装会破坏原有的内容)
        • nitro.json
      • ecosystem.config.js

Step3 - 配置 pm2

pm2 是让 node 在后台持久运行的工具,不然的话关掉操作窗口后,程序就会停掉

安装 pm2:

bash
npm install pm2 -g

这里主要是修改ecosystem.config.js

javascript
module.exports = {
apps: [
{
name: 'NuxtAppName',
exec_mode: 'cluster',
instances: 'max',
script: './output/server/index.mjs',
env: {
NITRO_PORT: '8080',
}
]
}

注意几点:

  • 修改script里面 output 的路径
  • NITRO_PORT应该是字符串类型

更多配置可参考 pm2 设置文档和nuxt 配置文档

Step4-启动 pm2

pm2 start ecosystem.config.js

这个命令其实是涵盖了node output/server/index.mjs 这一个操作,如果 pm2 不行的话,可以直接到该目录下node index.mjs , 然后用别的方式让 node 服务在后台持久运行,不过需要另外研究一下端口的配置。

启动后,可以在http://ip:8080 查看站点,如果需要配置域名的话,可以用 nginx 配置反向代理,映射到 8080 端口或者其他自定义的端口,这里先不赘述了。

其他

可能有用的操作:

  • 查看端口使用情况: netstat -tunlp (如果有装这个的话)
  • 停掉当前服务:pm2 stop 进程名
  • 在当前文件夹解压 zip 包:unzip 包名

一些遇到的问题和相关解决方法:

  • [nuxt][request error] [unhandled][500] Cannot find package ‘@popperjs/core’ https://github.com/element-plus/element-plus/issues/6233

    换成yarn install,这个应该是 element plus 或者 pnpm、npm 的问题,没有把这个依赖包包进去

  • ENOENT: no such file or directory 除去真的没有这个文件的情况,一般是切换包管理工具的时候会出现这个问题,比如 pnpm 切换到 yarn,此时可以试试重新npx nuxi init nuxt-app 初始化一个 nuxt 项目文件夹nuxt-app,初始化 install 之后,把东西搬过去再yarn install

最后,nuxt3 真的蛮多坑的,不过也挺好用的,我还遇到一个问题,就是 element plus 的样式在开发模式下会覆盖掉 unocss 的样式,虽然在本地 dev 的时候是正常的……

%sveltekit.body%