在Linux上从零开始部署前后端分离的Vue+Spring boot项目

最近做了一个前后端分离的商城项目来熟悉开发的整个流程，最后希望能有个正式的部署流程，于是试着把项目放在云服务器上，做了一下发现遇到了不少问题，借此记录一下整个部署的过程。

使用的技术栈如标题所说大体上是Vue+Spring boot，但还是要提一下详细的版本，因为在解决问题的过程中发现由于开发环境的不同会产生诸多影响，查找问题时如果没有版本作为前提经常会出现很多不必要的误解，甚至是误操作，非常浪费时间。详细版本情况如下：

• Vue 2.6.11
• Vue-cli 4.5.0
• Spring boot 2.1.1
• MySQL 8.0.13 （尤其注意）
• Nginx

1 上传工具

部署的第一步要把文件上传至云服务器，并且后续还要在云服务器上进行操作，方法很多，我这里选择了Xshell和Xftp这两个工具，均出自NETSARANG这家公司，需要注意的是在国内的官网上隐藏了免费家庭版的申请地址，可以通过直接访问 Xshell、Xftp免费许可 进行下载，需要填写姓名和邮箱。

1.1 Xftp

首先在Xftp中新建连接，填写主机地址和用户名密码，连接成功就可以看到左侧选项卡为本地的文件目录，右侧为云服务器的文件目录，只要从左侧或右侧将文件拖动到另一边就可以实现相应文件的上传和下载，下方传输选项卡会显示具体进度，图形化的界面相当直观，不做过多的说明了。

关于Linux的目录规范我没有查到太多需要的信息，所以我这里是在根目录新建了一个名为 app 的文件夹来存放网站应用，关于网站的打包我们在下一节说明，这里我们掌握如何上传文件就可以。

1.2 Xshell

Xshell的连接建立方法与Xftp差不多，填写主机地址，连接后再输入用户名密码，连接后就可以在云服务器上进行操作了。

通过这两个工具与云服务器建立联系后我们就可以开始着眼于网站应用自身的问题了。

2 前端

相对来说前端的部署没有遇到太多问题，所以我们先从前端开始

2.1 Vue

由于我使用了Vue-cli，所以项目完成后通过执行命令 npm run build 程序就会自动打包到项目目录下的 dist 文件夹，打包后的目录结构如下：

之后通过Xftp将这个文件夹上传至云服务器上，之前我已经新建了一个文件夹来存放，因为我们还可能有其他项目，并且后台也需要一个文件夹，所以建立具体文件夹结构如下：

新建文件夹可以使用Xftp的图形界面快速建立，也可以在Xshell中使用指令，看个人的喜好和习惯，如果需要经常使用Linux系统，建议使用指令多加练习。

在Windows端进行开发的时候，在控制台使用 npm run serve 指令就可以快速启动一个本地网站，但是这样的网站只能在内网被访问，肯定是达不到我们最初在外网访问的目的，所以这里要借助反向代理服务器，我选择的是被广泛使用的Nginx。

2.2 Nginx

1. 选定安装目录

cd /usr/local/src

2. 在服务器上安装Nginx之前先安装若干依赖：

yum install gcc
yum install pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel

这些依赖的作用可以参考这一篇 Linux上安装Nginx依赖环境和库、Nginx安装，Nginx服务命令，我没有逐一试过缺少某个依赖会有什么问题，在安装Nginx之前就已经安装好这些依赖了。

3. 下载Nginx安装包并解压

可以从官网选择需要的版本。

wget http://nginx.org/download/nginx-1.13.7.tar.gz  #下载
tar -xvf nginx-1.13.7.tar.gz                        #解压

4. 执行配置并安装

cd nginx-1.13.7       #切换目录
./configure           #执行配置
make && make