昨天尝试部署一个 Vue+Koa2 的前后端分离项目，没想到因为前端项目部署的问题，卡了一整天，今天才终于找到了问题所在，成功解决。这篇文章主要谈谈：

服务器上的项目结构大概是这样的：

其中，Vue-mall 是之前部署在根目录下的项目，也就是输入域名后默认访问的项目，这个我们不用动它；而 MiniProgram-Admin 就是本次需要部署的项目，包括一个 client 前端项目文件夹和一个 server 后端项目文件夹，我们希望达到的效果是，输入域名 + /admin/ 后，可以访问这个项目。

之前的项目是直接部署在根目录下的，也即 Nginx 配置文件的 location / 下，所以不需要改动前端项目的配置文件，直接打包上传即可；但这次不是部署在根目录下，所以我们要修改两个地方：打包路径和路由配置

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径.

vue.config.js 文件下的 publicPath 项，在 1. 开发环境 或者 2.生产环境但部署在根目录的情况下，直接使用默认的 / 即可，不需要特意去配置；但在生产环境且不是部署在根目录的情况下，则需要额外进行配置。

具体的路径配置是任意的，根据你自己的需要选择 —— 因为我们希望输入域名 + /admin/ 后，就可以访问这个项目，所以配置了 /admin/ 路径。这里要注意，虽然路径可以任选，但是必须和后面 Nginx 的路径配置一致，否则会报错。

同样，我们也需要配置一下路由：

这里必须要使用 history 模式，同时和上面一样区分好项目环境。

之前都是本地开发，没有区分开发环境和生产环境下的请求地址，所以这里还得修改一下。

在项目的 src 文件夹下新建 config.js 文件，内容如下：

之后在请求相关的 api.js 里再把 config 导入使用：

这样就可以根据开发环境和生产环境向不同的地址发送请求了。

之后就可以 npm run build 打包了，打包后生成的静态资源结构是这样的：

（当然，可能你的静态资源会出现在 static 文件夹里，这要看你是否配置了 assetsDir: 'static'）

打开 index.html 文件看一下，大概是这样的：

注意看这里的资源引用路径，都是以 /admin/ 开头的，后面跟上的是静态资源文件夹的名字。

可能你会在本地开个服务器看看效果，但是呢，这时候的页面一定会是空白的，毕竟资源引用路径不对嘛，本地并没有 admin 文件夹。所以不用管本地预览效果了，直接上传到服务器即可。

我这里使用 MobaXterm （顺便安利一下，这软件挺全能的，唯一缺点就是有点卡）将文件上传到服务器，最后的结构就像文章开头那样：

接着就是最关键的地方了，配置 Nginx 的文件。你可以直接在 nginx.conf 文件配置，也可以引入单独的 .conf 文件。但无论如何，一定要弄清自己引入了哪些 .conf 文件，防止发生配置被覆盖的问题。

为了方便项目管理，我这里引入了额外的 MyProject.conf 文件，配置好之后的内容如下：

下面详细介绍各个配置：

1. server：

所有配置都是写在 server 模块下的，并且通过配置 listen 80 监听 80 端口，server_name 主要用于配置基于名称的虚拟主机，就本项目而言，可以不写

2. location：

在 server 模块下有多个 location 块，一个 location 对应一个项目。可以看到，第一个块的路径是 /，这决定了我们输入域名后将访问该 location 块下的项目；同理，第二个块的路径是 admin，所以输入域名 + /admin/ 之后，访问的是现在部署的这个项目，注意，正如前面所说的，这里的 location 路径务必和之前前端项目配置的路径保持一致；第三个块是做重定向用的，稍后再解释

3. location 下的各个配置：

确保配置正确且成功引入之后，就可以重启 Nginx 了：

不出意外的话，通过域名 + /admin/ 就能访问我们的项目了。当然，有可能打开之后遇到页面空白的情况，这种情况基本就是配置错误了，需要回过头再仔细检查一遍各种路径的配置。

这样，前端项目就部署好了，接下来部署后端项目

后端项目的部署就比较简单了，基本不需要额外的配置。这里主要是解决跨域问题，其实我们用 Nginx 的话直接通过反向代理就可以解决跨域，但之前本地开发的时候，我是通过 koa2-cors 解决跨域的，因此还是继续用这个方案吧，安装模块后，在app.js 使用，大致配置如下：

需要设置的是 origin 和 credentials。origin 可以是函数或者字符串，指示可信任的域名。这里的话我准备了一个白名单，前端发送请求的时候会判断域名是否在白名单里，不在的话就拒绝此次请求。最后，默认返回的是本地开发用的端口。

需要改动的就是这里，之后直接把后端项目文件夹上传到服务器即可（node_modules 就不要拖过去了，我们直接在服务器那边安装好），因此最后的结构是这样的：

同时，还需要再次修改 Nginx 的配置文件，在开头添加：

和本地一样，服务器监听的是 3000 端口。

接下来安装后端项目的依赖。但我的服务器并没有 node 环境，所以还要安装一下 node：

同时安装 npm：

最后安装项目依赖：

安装速度可能很慢，换个源就好了。最后 npm run server （也可能是 npm run dev，看自己的配置）开启后端服务，访问域名 + 3000 端口，显示如下的页面就说明成功了：

你的页面内容可能不是这个，具体看你给 ctx.body 返回什么。

最后还有一个问题，我们现在是通过 npm run server 开启后端服务的，一旦关闭终端或者断开 ssh 连接，后端服务就停止了。怎么才能让它常驻后台运行呢？

可以安装 forever 或者 pm2 解决这个问题，这里我用的是 pm2。

先安装 pm2：

安装完 pm2 -v 查看一下，确认安装正确，接着启动 node 服务：

这里通过 --name 参数可以自己指定一个项目名字，后面的 run server 对应此前给后端项目配置的 npm 启动指令。

当然，也可以通过直接指定文件的方式启动 node 服务：

可以看到这里有两个开启同一个 node 服务的项目。下面是一些日常会用到的 pm2 指令：

监听文件改动，重启服务器：

终止某个项目：

彻底删除某个项目：

查看项目列表：

重启项目：

当然，这个过程还可能会遇到端口冲突的问题，解决方法参考下面。

在开启后端服务的时候，可能会遇到下面的报错：

这是因为 3000 端口被占用了，所以我们先找出占用端口的进程：

可以看到，这里占用端口的是之前没有正确关闭的 node 进程，找到进程号 17821，直接 kill 即可：

如果在访问 3000 端口的时候，页面显示无法连接，可能是因为服务器的安全组没有开放 3000 端口，去控制台看看，配置一下入口规则即可。

这两个报错都是因为数据返回格式不对。前面我们在 Nginx 的文件里配置过 try_files —— 如果找不到入口文件，就会使用 fallback，返回一个默认的 index.html（或者是 404.html），但是因为向服务端请求的是 css 和 js 文件，并且对于返回的资源也是按照 css 或者 js 去解析的，所以在遇到 html 文件的