pm2部署nuxt.js项目的小坑

前言

第一次通过pm2部署nuxt项目,磕磕绊绊,在网友们帖子上解决了很多问题,也碰到有一些小问题没有查到,感觉可能是大佬们不把这种小坑放在眼里,不过既然觉得是坑,大小也留个底,之后再碰到就能早早发现

一,pm2部署项目并启动成功

首先,我们要确认nuxt项目是打包过的,build命令后的项目才能进行start命令启动或者进行pm2部署,且当我们再次进行过dev之后项目也已经不再是build的状态了.两种情况下的项目是不同的,这一点相信大家都是知道的,当废话听听就过...

然后我们正式进入pm2部署,最直接的就是通过下面的命令

pm2 start npm --name "my-nuxt" -- run start

但是不知道为什么没启动成,我相信它既然存在就应该是可以的,可能是我自己的问题(比如环境配置),但没关系,我们还有别的办法

安装node-cmd，在nuxt根目录创建startCmd.js文件，内容如下：

const cmd = require('node-cmd');
cmd.run('yarn start');

调用 pm2 start startCmd.js --name "项目名称"或者pm2 start startCmd.js --name "项目名称" -f(-f强制启动,刚开始没能启动成功)

pm2能启动了，但是Nuxt直接就死了,无法访问

没关系,我还能出手

Nuxt根目录新建ecosystem.config.js文件 (强烈推荐)

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      exec_mode: 'cluster',
      instances: '1', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start'
    }
  ]
}

调用pm2 start就可以了。这时候Nuxt就可以访问了。使用pm2 list也可以查看到nuxt进程相关的信息。

注意:#更换`pm2`配置后,在进行`pm2 start`命令前如果存在之前的项目进程,建议先进行`pm2 delete`关闭全部,不然新的`pm2`配置不会生效 ,差点让我以为我又是失败的man

其实上述方法是踩坑的同时在名为【亲测可用】使用pm2部署nuxt项目的帖子中取得的真经,讲述的很详细,也有其他方案可以了解,有需要的朋友可以去搜索看下,之所以没有在这里上连接是因为同样的标题同样的内容在不同的平台挂着不同的作者,我也不知道那个前辈是真正的作者,所以就不上连接了

二,解决pm2部署后启动ip端口失败

配置的host+port在pm2 start后无法访问,让我一度以为部署失败,但是通过pm2 list发现项目正在运行着,实在奇怪,直到通过pm2 logs看到日志,才发现能访问的端口是localhost:3000,这不是默认的路径端口吗,难道是我ip配置失效了

之后我将ip配置从package.json的

'config":{
  "nuxt":{
      "host":"192.168.**.***"
      "port":"8090"
      }
    }

转移到nuxt.config.js下的

server:{
      host:"192.168.**.***"
      port:8090
}

再次build+pm2 start一条龙,访问成功

三,静态资源存放问题

刚开始我在静态资源如img之类的是放在assets目录下还是放在static下纠结,最后还是选择放在assets下,习惯了,也没觉得有啥不妥,对于大家普遍放在static目录下这一说法并没有在意

后来发现在项目运行的时候assets下的文件因为需要编译总是慢了一点,导致项目调取就会久一点,特别是项目中被用于link引入的文件,在项目创建时因为不能及时拿到资源,会在日志弹出一条404错误,虽然后面最终资源被调取到,但错误已经产生

所以建议放在static目录下

四,一句话的小问题

nuxt项目在dev下只能在浏览器访问,我在webview下访问到了,但是不能正常使用,build+start后则可以正常访问