nuxt项目部署上线之宝塔

后端 2019-10-14T15:45:36 浏览:229

最近在学习vue,于是将原来的个人博客站点改造一下,使用vue全家桶vue-cli、vue-router、vuex、axios将基于wordpress的站点一番噼里啪啦的改造一番,主要是深入了解这些全家桶如何配合使用,由于使用了单页面机制,导致SEO完全没有了地位。于是通过nuxt+wordpress技术改造了现在看到的博客。这篇文章主要记录一下博客上线的步骤。

环境:
服务器:Centos7+宝塔

一、安装nginx+node+npm+pm2

因为是用的宝塔,所有安装这些,就如探囊取物,非常简单。

二、nuxt项目本地调试完成后,npm run build 打包应用

打包之后,我们将

.nuxt
static
nuxt.config.js
package.json

传到服务器空间里。(新建一个网站mla.xin即可,然后将数据传入)

三、部署服务器上部署运行

1.进入到对应的网站目录里,运行cnpm install 安装package里的依赖
ps:最好安装一下cnpm,不然会很慢很慢
2.运行npm start就可以运行node程序了,基本上都是 http://localhost:3000的状态运行,这里的端口号可能有所不同。
3.新建的网站mla.xin配置下反向代理,代理node运行的地址
此时我们就可以在浏览器上输入 mla.xin 访问了。服务端渲染瞬间出来了,但这并不理想,进程稳定性能否常驻后台?当我们退出后台xshell,意外也就出现了,网站无法访问了,这个node程序也随之关闭了。

四、pm2开启进程守护

进入对应的应用目录,执行以下命令

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

其中nuxt-name的名称是 我们在package.json中的项目名称。

我们可以通过pm2 list 命令查看守护的进程,pm2 delete x可以关闭指定的进程。

最后效果,就如同现在的网站一般呈现。