在部署项目之前先改两个地方,打开 package.json,去掉 @nuxt/image-edge 这个依赖,以后有稳定版本的时候再用这个包。
打开 nuxt.config.ts,去掉 modules 里的 @nuxt/image-edge,再去掉 image 这个配置选项。
做一次提交,然后在终端,执行 git push --all ,把本地项目推送到远程。
打开项目的远程仓库,复制一下这个 Nuxt.js 项目的远程仓库的地址,回到通过 SSH 登录到的远程服务器上,进入到想要存储项目的地方,cd /mnt,执行一下 git clone,后面加上项目的远程仓库的地址。
克隆成功以后,进入到项目所在目录 ninghao-nuxt。确定了要部署的分支以后,在项目下面执行 npm install ,准备一下项目需要的依赖。
准备好以后,执行 npm run build ,编译一下项目。编译成功以后,可以用 node 执行一下 .output/server 里的 index.mjs 。
应用的端口号默认是 3000,如果在服务器上有其它的应用已经使用了这个端口号,就会发现冲突。
这就需要在运行 Nuxt.js 应用的时候,改变一下它所使用的端口号,设置一下环境变量,名字是 NITRO_PORT,它的值就是服务的端口号,比如 3006,后面再用 node 执行一下 .output/server/index.mjs。
成功以后在浏览器上测试一下,访问我提前指向我的这台服务器 IP 地址的一个域名。ninghao-nuxt.ninghao.co,后面要加上端口号,3006。
要注意的是,我们必须保证服务器允许通过网络访问 3006 这个端口。在阿里云,可以通过配置服务器的安全规则,允许访问 3006 这个端口。
再回到终端,我们可以在服务器上安装一个 pm2,用它管理 node 进程。执行 npm install 安装的是 pm2。
然后再输入 NITRO_PORT=3006 ,执行的是 pm2 start .output/server/index.mjs ,用 --name 选项设置一下应用的名字,比如 ninghao-nuxt。
成功以后再回到浏览器,刷新一下应用的页面,现在仍然可以显示这个应用。