前后端分离项目部署至服务器

第一步，确保该服务器上已安装jdk，由于本人的springboot项目在IDEA上，打包较为方便，打成jar包后，将该jar包上传至服务器即可，在服务器命令行输入java -jar test.jar(此处为你的jar包名称)，完成该命令行的正确输入，该springboot项目就可以正常启动。后台代码部署至服务器运行，较为简单，接下来部署前端项目；
第二步，前端项目用vue框架编写，在服务器上部署，需安装nginx，nginx安装经百度，总结如下：
1.安装gcc
命令行输入：yum install gcc-c++
2.安装PCRE
yum install -y pcre pcre-devel
3.安装zlib
yum install -y zlib zlib-devel
4.安装openssl
yum install -y openssl openssl-devel
以上四步安装完成后，下面开始正式安装nginx
a.首先确定安装nginx的目录，nginx的安装百度上有很多方式，可以参考，这里使用编译安装，不用yum命令安装nginx，因为之前yum安装踩过一些坑，yum安装的nginx，文件目录都是系统默认分配的，并没有全部将所有文件统一放在一个目录下。开始安装nginx，打开usr下的local目录，将nginx安装于此，
命令行输入：cd /usr/local (此命令表示打开usr下local目录)接着
命令行输入：wget http://nginx.org/download/nginx-1.8.0.tar.gz（下载nginx源码的压缩包，此处命令可能报错，报错内容说找不到wget这个命令，是因为wget是一个下载器，而你的服务器上并没有这个下载器，此时你需要下载wget这个东西，
命令行输入：yum install wget 即可，等待下载完毕，会有一个提示类似 y/n 出现，意思yes or no ，选择y 按回车即可）
安装完wget后，即可再次执行前面的下载nginx源码压缩包命令
b.压缩包下载完成后，需要解压，命令行输入：tar -zxvf nginx-1.8.0.tar.gz
c.解压后，命令行输入：./configure （这里是配置文件，就按默认配置）
d.接着编译安装，命令行输入：make
e.等待make命令执行完成后，命令行输入： make install 等待该命令执行结束
f.到此，nginx安装完成，现在要启动nginx，启动nginx要到sbin目录下才可以，
命令行输入：/usr/local/nginx/sbin/nginx （这里解释一下，前面我在usr/local目录下，下载的nginx，现在目录自然到了usr/local/nginx，接着，因为安装nginx自动创建了sbin目录，里面就存放了nginx一个文件，完整的命令/usr/local/nginx/sbin/nginx意思就是找到这个目录下的nginx并启动，方便理解，也可以一步步cd到sbin目录，然后命令行直接输入nginx回车即可）
g.此时服务器的nginx已经启动，打开浏览器，输入服务器的ip地址，回车即可看见 Welcome to nginx! 表明nginx安装运行成功
nginx安装运行测试成功，就要开始在服务器上部署前端的vue项目了，开始部署之前，提几个后面会用到的命令
停止nginx命令
cd /usr/local/nginx/sbin （打开到sbin目录。前面有说到，其实sbin目录下就是放一个nginx的启动文件，既然你在这里启动，当然要在这里关闭）
进到sbin目录下后，命令行输入：./nginx -s stop
检查nginx配置文件是否正确，这里命令行输入：cd /usr/local/nginx/sbin
接着命令行输入：./nginx -t （如果配置文件nginx.conf没有错误，会提示successful，如果配置文件有错，会有错误提示，并提示该错误发生在第几行，这时你可以cd进配置文件位置，
命令行输入：vim nginx.conf 该命令表示用vim打开该配置文件，按i键，即可进行编辑，编辑完成后，按esc键，退出编辑状态，接着按下shift加：键 输入wq 表示保存并推出）
配置文件修改后，需要重新启动才能生效，同样cd进sbin目录，命令行输入：./nginx -s reload (重启命令)
查看nginx状态命令：systemctl status nginx
划重点！！！ 正式开始将前端项目通过nginx部署到服务器
1.前端通过 npm run build命令将项目打包，找到打包文件位置，将里面的dist文件上传到服务器，这里我将dist文件放到服务器里的home目录下
2.开始修改nginx的配置文件，cd /usr/local/nginx/conf 到配置文件位置，cat nginx.conf命令为查看配置文件，vim nginx.conf命令为编辑配置文件，配置文件里的重点：
server {
listen 8013; #listen后面写前端的端口号
server_name 192.168.50.63; #这里server_name为本地服务器端口号
location / {
alias /home/dist/; #注意，这里写的是你的前端文件dist上传到的目录，如果放在root下，则改成 root /home/dist/
index index.html index.htm;
}
完整的nginx.conf配置文件如下：
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8013;
server_name 192.168.50.78;
location / {
alias /home/dist/;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
修改完成后esc键退出编辑状态，shift 加 ：wq 保存并退出
3.还是在conf目录下，命令行输入vim 8013.conf（该命令表示新建8013.conf文件，并且进入编辑状态）插入如下代码
server{
listen 8013;
server_name 192.168.50.63;
location / {
alias /home/dist;
index index.html;
}
location /api { #这里解决跨域问题 /api为前端接口名字
rewrite ^/api/(.*)$ $1 break;
proxy_pass http://192.168.50.63:8000; # 这里为后端接口
}
}
到此，前端项目也已经完成了部署，首先修改完配置文件后，都要在conf目录下输入命令行：./nginx -t 测试配置文件是否有误,再到sbin目录，输入./nginx -s reload重启nginx使配置文件生效
最后开始测试，打开浏览器，输入192.168.50.63:8013 成功即可进入页面。