【项目0->1】我是如何部署我的Vue项目到后台的？如下图所示的列表结构，图片和标题，点击进入之后会有大图和描述的以及跳

适合人群：比较适合初级全栈学习者，和前端。

一、项目的前置说明

出发点：目前已经完成的项目情况

我制作了一个作品集网站，前端使用vue框架写的，后端用express写的，它们的概况如下：

vue app

如下图所示的列表结构，图片和标题，点击进入之后会有大图和描述的以及跳转作品链接的二维码，很简单的逻辑。

2. server

只完成get操作：

部署到后台的项目结构

app文件夹下面放的是我用express写的server项目
cases里面装的是展示用的静态页面
vue是网站的UI

一、先配置vue

这个项目的难点是配置nginx，让代理指向正确的页面。

//登录到后台后，前往nginx的default更改配置
sudo vi /etc/nginx/sites-available/default

文件配置如下：

server {

  listen 80;
  
  root /var/www/html/vue/;
  index index.html index.htm index.nginx-debian.html

  server_name _;	

  error_page 404 /;

  location / {
  	try_files $uri $uri/ /index.html;
  }

  location /cases/ {
  	alias /var/www/html/cases/;
  	autoindex off;
  }
}

因为本文不去探究背后的深入原理，只是一篇技术操作的说明文，我仅对做一些浅显的说明。如果大家想深入的了解，推荐读一下以下两篇博文：

二、配置server的nginx

vue已经占了default这条代理路径，要启用server端，我们需要新建一个新的代理文件，我给它命名为api。

cd /etc/nginx/sites-available/
cp default api #拷贝default，并创建新的文件叫api

api代理文件的配置

server {

  listen 81;

  server_name xxx.xxx.xxx.xxx;	

  error_page 404 /;

  location / {
  	proxy_set_header X-Real-IP $remote_addr;
  	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  	proxy_set_header X-NginX-Proxy true;
  	proxy_pass http://127.0.0.1:xxxx;
  	proxy_set_header Host $http_host;
  	proxy_cache_bypass $http_host;
  	proxy_redirect off;

  }

}

#修改完回到主界面执行下面的语句
ln -s /etc/nginx/sites-available/api  /etc/nginx/sites-enabled/ #把api连接到enabled文件中，每次更改自动更新

三、启动服务器

#先用ufw启动81端口
sudo ufw allow 81
sudo ufw enable
#跳转到server端文件的目录下，用pm2启动写好的server文件
cd /var/www/app/dist #==> 我的server在打包好的dist文件中
pm2 start app.js #==> server的文件名是app.js，根据自己的实际情况更改。

如果成功，访问81端口，就应该能访问到json。

如果不知道ufw，和pm2操作的小伙伴，请参考

PM2的安装在文章第七小结
ufw是防火墙，不允许端口，访问不到。ufw的官方文档

如果没有调试成功，可能出现的原因

nginx有缓存，要重启一次。

sudo service nginx reload

pm2监听的port出现了冲突，清空、重启

pm2 status #查看一下状态

#上图所示，每一个在维持的后台文件都有个id，比如要删除上图的id，要执行
pm2 stop 0
pm2 delete 0
#然后在目标目录重启一下
pm2 start app.js

说起来很白痴，vue文件里面调用api的端口改正了没有，81有没有漏加？

nginx语法不熟，漏掉了；或者空格，用nginx -t来检查以下语法。最好按照文中的来，删除掉一切不需要的乱七八糟的注释。

总结

我们要弄清楚的逻辑是：

nginx default代理是在完成vue UI页面的业务逻辑
nginx api是完成后台生成Json这条业务逻辑

我之前在网上看到一个小伙伴问，说他把vue给到后台，后台说配置不了，需要两个服务器来完成...😂背后的逻辑其实就是我说的这两条业务线。大家有时间还是最好多少了解一下nginx的语义，nginx的官方文档一坨翔😂，推荐看一下nginx cheatsheet快速习得一下。

配置有奇葩问题，可以截图版聊，一起探讨一下。