前言

文章始发于我的自媒体博客《https://blog.kyeteo.cn》,选自《Vuejs开发技巧》系列文章

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

部署环境要求

• linux服务器
• 安装好的nginx web服务器
• npm

nuxt部署

• 在nuxt项目更目录执行

npm run build

• 用sftp工具将以下文件上传到服务器中我们已经创建好的目录中

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

• 安装正式依赖

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

npm install --production

• 安装pm2

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

npm install -g pm2

• 编写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"
 }
 }
 ]
}

• pm2启动nuxt应用

在nuxt项目根目录执行

pm2 restart pm2.json

看到如下便是启动成功

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

使用nginx做端口代理

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

• 配置根据域名进入端口

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.domain.com就会直接访问到/www/wwwroot/nuxt项目根目录/下面的index.html文件

• 将80端口访问的内容代理到本机的3000端口上（3000端口为nuxt应用默认启动的端口）

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 reload)后我们发现可以通过xxx.domain.com访问内容了，可是我们发现报错了，一些静态资源无法访问，出现这些问题其实是代理出现了问题，我们在这个基础之上再调整下就好了(●'?'●)

• 代理nuxt项目的静态资源

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.domain.com，发现一切都正常啦

结语

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