偻儸小卒的博客
偻儸小卒的博客
About Me:
我是刘帅,(曾用网名:偻儸小卒、会PS的小码农、爱折腾的小码农、Edison Liu),来自酉州桃花源,重庆市酉阳县可大乡。是一枚真正会修电脑的程序员,也是一个在编程的路上越走越远的设计师,曾编写过一个叫“锟斤拷”的项目,也曾设计过一张叫“五彩斑斓的黑”的设计稿。我的个人博客采用ginblog_nuxt编写使用ginblog改写有兴趣或者申请免费友情链接的朋友可以加我QQ我们一起交流学习。
747357766
EdisonLiu_
747357766@qq.com
宝塔pm2踩坑(一个由于nuxt包大问题引发的命案)
2021-04-04 12:21
0
14

前言

最近使用ginblog二开当前这个博客的时候由于要用到seo所以就果断抛弃了大佬的vue前端然后自己使用nuxt对接了一个前端上去,但是有一个问题一直困扰着我,那就是代码放到服务器上跑起来的时候浏览器访问有几个包依然是好几个M那么多,这个问题一直困扰了我快一个月,期初我以为是我自己引包的问题,然后各种折腾各种优化然而并没有用。这两天放假正好有一些时间所以又拿起这个问题研究起来。搞了2个白天终于到今天(2021年4月4号)中午搞定了。
我使用的是宝塔做的服务器面板,当然由于人懒pm2我也使用了宝塔官方提供的,正因为我懒所以就引发了今天这个问题困扰我这么久。最初是使用宝塔官方的pm2无法启动nuxt那时候我记得我也折腾了好久,最后也解决了,解决方案见我的csdn博客https://blog.csdn.net/qq_38883889/article/details/106838937,上次使用这种方法是跑起来了,本来我以为这个就正解,所有的优化都应该基于这个方案,然而事实打脸,而且毫不留情打得又肿又痛。

后遗症

用着用着我发现使用上面这个方法跑起来有很多问题,症状如下

  • 1.服务器占用非常高
  • 2.没有使用打包后的代码运行,而是重新跑了一遍.nuxt内的代码(类似开发模式那种,但又不是)
  • 3.经过我多次观察跑起来时会直接删除.nuxt/dist文件夹 这不符合常理
  • 4.浏览器访问前端很多js包非常大(浏览器分析总传输大小在10M左右)导致访问速度也很慢(每次打开页面要10秒,我服务器是1核心2g +5m带宽)

解决思路

  • 起先我以为是我的问题,于是各种折腾,各种换着法的填写根目录、启动文件、启动名称,然而并没有什么用。除了我上面说的方法,其他的都跑不起来。于是我就自己安装了一个pm2,不装不知道,一装就发现很多问题,我装的pm2启动方式是直接输入 pm2 start 就可以,但是会报错 没有找到ecosystem.config.js 于是上网搜索了一下这个,最后在nuxt官网找到了解决方案https://nuxtjs.org/docs/2.x/deployment/deployment-pm2,把这个文件弄起来,然后再启动,提示我没权限。最后执行一下 sudo chmod -R 777 ~/.pm2 再启动,跑起来了,然后前台访问包不大了,服务器也不卡了。emmm这是为什么,为什么原生的就可以,宝塔的就不行呢(我所在不能忍,使用宝塔怎么能用命令行启动代码,当然要用宝塔的插件啊),抱着爱折腾的心态我扒开了宝塔pm2的源码,发现他执行的方法不太一样代码如下

    #添加
    def Add(self,get):
        #get.pname = get.pname.encode('utf-8');
        runFile = (get.path + '/' + get.run).replace('//','/')
        if not os.path.exists(runFile): return public.returnMsg(False,'指定文件不存在!')
        Nlist = self.List(get)
        for node in Nlist:
            if get.pname == node['name']: return public.returnMsg(False,'指定项目名称已经存在!')
        if os.path.exists(get.path + '/package.json') and not os.path.exists(get.path + '/package-lock.json'): public.ExecShell(self.__SR + "cd " + get.path + ' && npm install -s')

        public.ExecShell(self.__SR + 'cd '+get.path+' && pm2 -u www start ' + runFile +  ' --name "'+get.pname+'"|grep ' + get.pname)
        public.ExecShell(self.__SR + 'pm2 save && pm2 startup')
        if not os.path.exists(self.__path): public.ExecShell('mkdir -p ' + self.__path)
        public.writeFile(self.__path + get.pname,get.path)
        return public.returnMsg(True,'ADD_SUCCESS')
    

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

特征代码在 public.ExecShell(self.__SR + 'cd '+get.path+' && pm2 -u www start ' + runFile + ' --name "'+get.pname+'"|grep ' + get.pname) ,说明他必须 使用 -u www方式启动 百度也查不到这是啥 我就直接把它给去掉了 然后 把验证文件的那句代码也注释 就可以了

  • 修改后代码如下

    #添加
    def Add(self,get):
        #get.pname = get.pname.encode('utf-8');
        runFile = (get.path + '/' + get.run).replace('//','/')
        if not os.path.exists(runFile): return public.returnMsg(False,'指定文件不存在!')
        Nlist = self.List(get)
        for node in Nlist:
            if get.pname == node['name']: return public.returnMsg(False,'指定项目名称已经存在!')
        if os.path.exists(get.path + '/package.json') and not os.path.exists(get.path + '/package-lock.json'): public.ExecShell(self.__SR + "cd " + get.path + ' && npm install -s')

        # return public.returnMsg(False,self.__SR + 'cd '+get.path+' && pm2 start ')
        public.ExecShell(self.__SR + 'cd '+get.path+' && pm2 start ')
        # public.ExecShell(self.__SR + 'cd '+get.path+' && pm2 -u www start ' + runFile +  ' --name "'+get.pname+'"|grep ' + get.pname)
        public.ExecShell(self.__SR + 'pm2 save && pm2 startup')
        if not os.path.exists(self.__path): public.ExecShell('mkdir -p ' + self.__path)
        public.writeFile(self.__path + get.pname,get.path)
        return public.returnMsg(True,'ADD_SUCCESS')
    

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

修改后填写 如下 (启动名称直接填空格),完美运行

宝塔pm2启动nuxt