vue + express + nginx 部署

环境介绍

这次软工团队作业是写一个学习用的交流（聊天）软件。而我负责管理端的编写。工作范围从数据库到

前后端。采用的技术栈为vue-cli+express+nginx。本地环境为win10，服务器为华为云Ubuntu。在代码编写部分并未遇到太大的问题，然而在部署到服务器上时，发现前后端无法交互。

网上随处可见部署过程中的技术细节。但却缺少对部署这项工作的总体介绍。对萌新或者着急肝工程的人很不友好。

部署就是将项目从本地localhost开发环境（别人无法访问）转移到拥有稳定ip地址生产环境的服务器上的过程。

本地部署？

为什么自己的电脑无法作为服务器呢？因为中国拥有的ip地址太少了。除了学校，商业等机构拥有固定ip地址外，普通居民的ip地址常常是动态的。以满足中国庞大网络终端的ip需求。因此，如果你也曾尝试用自己的电脑当服务器，劝君省点力气。（当然也有其他用自己电脑当服务器的办法，这里主要说的是，别妄想有固定ip）

什么是前后端分离？

我的vue启蒙来自github开源代码，因此初期对vue的架构毫不熟悉。以为后端代码放在vue框架里就不是前后端分离。但并不是这样，只要你的前后端是通过get/post一个url进行的，那它就可以变为前后端分离。

前后端分离并不是一种开发模式，而是web应用的一种架构模式。 在前后端分离模式中，

• 浏览器和服务器通过约定好的数据格式通过http等协议交互。前端拿到数据并渲染。

• 前端与后端的代码可以完全分开，是两套完整的逻辑，后端可以独立测试，前端也可以通过伪造数据独立开发。

vue很好的支持了前后端分离。使用npm run build等即可获得“前端”封装优化好的代码，一般名为dist。因此，不要以为你的后端代码在vue框架下它就会帮你打包哦。

前端部署

在vue-cli的官方文档里较为详细的讲解了vue项目的部署流程。我参照了最后一个docker+nginx的部署方式。（这里假设各位看官已经看过了官方文档）但是docker实际上把我绕晕了。（或者是Nginx奇怪的配置把我绕晕了，总之就是看完不知所云）

docker是一个虚拟的环境，docker中的端口 ≠ 实际电脑的端口。

server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }

这段代码是官方文档nginx.conf中的最重要的一部分。listen 80是为http协议开放的。作为浏览网页的默认端口。也就是，如果要访问http://127.0.0.1/实际上就是在访问http://127.0.0.1:80/。这段协议在docker中不会引起端口冲突。因为在docker run -d -p 8080:80 my-app这里约定了端口映射，将真实机器的8080端口映射为docker中的80端口。实际访问时访问的也是8080端口。

事实上，只要你没有对端口有太大要求，不使用docker也是可以的。

Nginx配置

安装好的Nginx在/etc/nginx/下有Nginx.conf文件，其中include了conf.d文件夹下所有已.conf为后缀的文件。因此，可以在conf.d下新建一个自己的conf，例如zhangsan-9008.conf

接下来以我的配置为例，讲解一下nginx的配置详情：

server {
    listen 9008; #这个端口是浏览器访问的端口
    server_name 114.115.***.245; #这是服务器ip地址，有需要转为域名的自己搜
    location / {    #/是默认匹配的路径，如果下面没有location可以匹配才会匹配到这里
        root /home/***/dist/;   #前端dist文件所在的位置，
        try_files $uri $uri/ /index.html;
        index index.html;   #默认入口
    }
    location /api/ {    #当请求中以/api开头时匹配到这里
        proxy_pass http://114.115.***.245:3000/;    #转发到后端
    }
}

后端部署

后端其实不用部署，之前不断看到有教程要用tomcat，但这似乎适用于java开发，不适用于轻量级的js或者dijango。你只需要像在本地一样run server就好了

端口转发

这个坑让我吐血了三天，因此萌生写博客的想法。原来location会把匹配到的屏蔽掉！！！原来location会把匹配到的屏蔽掉！！！原来location会把匹配到的屏蔽掉！！！

这和我在本地开发的情况严重不符。本地的proxyTable内容如下：

proxy:{
        '/api/': {
          target: 'http://114.115.***.245:3000/',
          changeOrigin: true,
          pathRewrite: {
            '^/api': '/api'
          }
        }
      },

工作流程是，前端请求/api/**，后端获取/api/**看起来很和谐吧？？大概是pathRewrite扛下了一切。而打包时你是需要把proxyTable这段代码删掉的（或者不删也起不了作用），于是nginx就擅自把匹配到的location替换为了空，这时，前端发出请求/api/**，后端拿到的只有/**了，代码不变自然不可能有响应。

这样代理不会再错了。

如果你还错，百度搜一下8，别的教程已经说的很详细了。

想要不受影响的运行？

不用非得用docker，用nohup 指令即可，还不会多占用你的内存（有多少人的服务器只有可怜的1G）

 

希望这篇博客可以帮到正在挣扎的你