《Vuejs开发技巧》Nuxt项目部署+Nginx端口代理

前言

文章始发于我的自媒体博客《》,选自《Vuejs开发技巧》系列文章

nuxt是基于vue--开发的vuejs服务端渲染框架，它极大的避免了我们基于vue cli创建项目自己搭建服务端渲染的繁琐过程，今天我们就来讲一讲如何部署一个基于nuxt开发的web应用

部署环境要求nuxt部署

npm run build

在nuxt项目根目录中将.nuxt,,,env,nuxt..js,.json六个文件上传上去，其中env文件为自定义配置文件，可根据实际自己有无使用选择上传

在服务器nuxt项目根目录中执行以下命令，--参数是只安装非编译型依赖，主要体现在指令只会安装.json中中的依赖，不会安装中的依赖包

npm install --production

pm2是用于node进程管理的进程守护工具，它能够使我们node项目因出现不可控制的因素报错crash而快速自动重启，类似应用的一样

npm install -g pm2

在nuxt项目根目录创建pm2.json文件，内容如下

{
 "apps": [
 {
 "name": "自定义启动应用名称", 
 "script": "server/index.js",
 "out_file": "日志目录/logs/nuxt_out.log",
 "error_file": "日志目录/logs/nuxt_error.log",
 "cwd": "nuxt项目在服务器中的根目录位置",
 "max_memory_restart": "200M",
 "autorestart": true,
 "node_args": [],
 "args": [],
 "instances": 4,
 "exec_mode": "cluster",
 "env": {
 NODE_ENV: "production"
 }
 }
 ]
}

在nuxt项目根目录执行

pm2 restart pm2.json

看到如下便是启动成功

pm2启动

接下来我们就可以通过默认3000端口访问了（前提是服务器开放了3000端口，否则会出现无法访问的现象）

使用nginx做端口代理

很多时候我们访问的网站地址是类似这样的xxx..com,这些链接是不包括端口的，我们该如何实现这个功能呢，这个就离不开我们强大的nginx的功能了，接下来我们一步步实现以上功能

server
{
 listen 80;
 server_name xxx.domain.com; #该域名是接下来我们直接通过这个链接访问nuxt应用
 index index.php index.html index.htm default.php default.htm default.html;
 root /www/wwwroot/nuxt项目根目录;
}

通过以上配置，我们访问xxx..com就会直接访问到/www//nuxt项目根目录/下面的index.html文件

server
{
 listen 80;
 server_name xxx.domain.com; #该域名是接下来我们直接通过这个链接访问nuxt应用
 index index.php index.html index.htm default.php default.htm default.html;
 root /www/wwwroot/nuxt项目根目录;
 # 代理端口
 location / {
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
 proxy_set_header Host $host;
 proxy_set_header X-Nginx-Proxy true;
 proxy_cache_bypass $http_upgrade;
 proxy_pass http://127.0.0.1:3000;
 }
}

这时候重启nginx(nginx )后我们发现可以通过xxx..com访问内容了，可是我们发现报错了，一些静态资源无法访问，出现这些问题其实是代理出现了问题，我们在这个基础之上再调整下就好了(●'◡'●)

server
{
 listen 80;
 server_name xxx.domain.com; #该域名是接下来我们直接通过这个链接访问nuxt应用
 index index.php index.html index.htm default.php default.htm default.html;
 root /www/wwwroot/nuxt项目根目录;
 # 代理端口
 location / {
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
 proxy_set_header Host $host;
 proxy_set_header X-Nginx-Proxy true;
 proxy_cache_bypass $http_upgrade;
 proxy_pass http://127.0.0.1:3000;
 }
 # 代理静态资源
 location ^~ /_nuxt/{
 proxy_set_header Host $host;
 proxy_pass http://127.0.0.1:3000;
 }
 location ^~ /js/{
 proxy_set_header Host $host;
 proxy_pass http://127.0.0.1:3000;
 }
 location ^~ /css/{
 proxy_set_header Host $host;
 proxy_pass http://127.0.0.1:3000;
 }
 location ^~ /image/{
 proxy_set_header Host $host;
 proxy_pass http://127.0.0.1:3000;
 }
}

重启nginx,浏览器打开xxx..com，发现一切都正常啦

结语

今天有关nuxt部署的技巧就分享到这里啦，觉得不错就点下你们宝贵的关注吧┭┮﹏┭┮，或者有什么其他问题可以下方留言哟，我会一一解答（不限前端，后端，不限开发语言哟）(●'◡'●)