详细介绍Nuxt项目上线部署

8,521 阅读2分钟

引言

因为Vue的单页面开发不利于SEO,有时候做一些需要做SEO的项目,就要使用服务端渲染,这样搜索引擎怕虫就能爬取到网站的信息,显示到搜索的内容。Vue官方提供的服务端渲染文档可以自己搭建一个服务端,实现服务端渲染。由于我比较懒,所以我就用现在主流的库Nust.js。具体的使用和api请移步官网文档。下面我主要分享一下在项目完成后的部署的一些配置。

项目部署

在nuxt.js的官网介绍了3种部署方式,分别是服务端渲染应用部署,静态应用部署和单页面应用程序部署 (SPA),我需要使用服务端渲染应用部署。按照文档中的方式,我把整个项目放到了服务器,通过npm install安装好依赖包,先执行npm run build,然后npm run start。Ok,启动成功,访问一下,可以看到页面,功能也正常,但是总感觉不太对,怎么能直接把项目全部放进来呢?而且现在监听的端口号,关闭服务器就会把服务关掉了。

使用pm2启动项目

没办法,去查了一下谷歌,后面知道其实只要在本地build后,把.nuxt, static, package.json,nuxt.config.js这个4个文件打包放入服务器就行,然后在服务器安装依赖包。nuxt项目也可以使用pm2启动,安装pm2:npm install pm2 -g,设置软连接

ln -s /usr/local/node/bin/pm2 /use/local/bin/pm2

执行pm2 start npm --name "demo" -- run start ,这里的name是启动的项目标识,执行pm2 list可以查看当前运行的项目。现在关闭服务器窗口,项目也是启动的。但是项目要通过域名访问,也就是默认80端口,这就要使用nginx反向代理来实现了。

使用Nginx实现反向代理

Nginx安装请参考安装教程。安装完成后在nginx.conf加上以下内容

upstream hangjia {
    server 119.23.173.182:8000; #项目开启的监听地址
} 

location ^~/ {
        proxy_pass_header Server;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://hangjia/;
    }

参考以下图片 ![] 配置完成后重启nginx,直接访问域名,就可以代理到项目开启的地址了。后面发现这样代理原来nginx的静态资源访问不了了,原来还要把静态资源的文件夹加上

#manage为nginx里面的静态资源文件夹
 location /manage {
 autoindex on; 
    }

加上这个配置后,静态资源也是可以访问的,至此,就完成了nuxt项目的上线部署。

结语

遇到的问题都是通过谷歌找到解决方法的,在这只是做个简单总结,也方便以后忘记了回来查看一下,如有补充或者是有的地方写的不对的,还请评论区留言,谢谢!