【虚拟机安装与部署系列（五）】：部署前后端分离项目（SpringBoot + Vue）
前言：
鉴于这个VMware虚拟机部署是常用的，但是安装起来步骤较多，比较繁琐。自己干脆完整写下整条流程，方便自己也方便大家，在写本文之前为了寻求完整过程，已将装好的进行了卸载，因此本文所有内容均是边安装、边编辑、且放的文章都是测试过后给出正确结果，力求真实完整且运行无障碍。本系列共六篇，涵盖了从搭建到部署完整流程，更多篇幅请点击上方专栏进行查看。
目录
一：后端打包并上传
二：前端打包并上传
三：连接数据库
四： 配置Nginx（会对应运行前端dist包）
五：运行后端jar包
六：最终效果
一：后端打包并上传
1.通过ifconfig查询自己虚拟机的ip
2.先清理，变更相关虚拟机ip 和 虚拟机密码，最后打包
3.通过 WinSCP 找到对应项目目录将刚刚打的 jar 包上传至 /usr/local/app 这个指定虚拟机目录
二：前端打包并上传
1.同样的先变更为虚拟机的ip
2.有两种方式打包（都较为简单，任选其一），打包后会生成dist包
npm run bulid
3.同样的将前端dist包上传至 /usr/local/app 这个指定虚拟机目录
三：连接数据库
1.对后端需要连接的库进行在虚拟机新建数据库
2. 对新建进行配置，然后点击确定
3.自己后端数据结构拖入数据库【重要步骤】
四： 配置Nginx（会对应运行前端dist包）
1.根据上面前后端的配置，找到我们需要用到的数据，以便在下面进行nginx配置
- 前端需要用到：vue.config.js中 porxy: 192.168.109.130:8080
- 后端需要用到：application.yml中 port：8081（java全局端口配置）
2.因为我们Nginx安装目录是 /usr/local/nginx , 所以我们一步一步进入到Ngxin下conf的配置目录，如：/usr/local/nginx/conf，进入后可以看到nginx.conf
3. 使用命令打开 nginx.conf 进行编辑
- 打开编辑命令
sudo nano nginx.conf
- 进入后的nginx.conf的【原始内容解析】
#user nobody; #定义运行 Nginx worker 进程的用户,默认 nobody
worker_processes 1; #worker 进程数,建议设置为机器 CPU 核心数,这里设置为 1 个进程#error_log logs/error.log; #错误日志文件路径,默认为关闭,需手动指定
#error_log logs/error.log notice; #设置错误日志级别,输出大于等于 notice 等级的日志
#error_log logs/error.log info; #设置错误日志级别,输出大于等于 info 等级的日志#pid logs/nginx.pid; #设置 Nginx 进程 PID 文件的存放路径events {worker_connections 1024; #设置单个 worker 进程最大连接数
}http {include mime.types; #引入 mime.types 配置文件,设置 HTTP 响应的 Content-Typedefault_type application/octet-stream; #默认响应的 Content-Type#log_format main '$remote_addr - $remote_user [$time_local] "$request" '# '$status $body_bytes_sent "$http_referer" '# '"$http_user_agent" "$http_x_forwarded_for"'; #自定义访问日志格式#access_log logs/access.log main; #启用访问日志,并指定存放路径和格式为 mainsendfile on; #开启高效文件传输模式#tcp_nopush on; #在 sendfile 开启时,可以防止网络包的唐突传输#keepalive_timeout 0; #禁止长连接keepalive_timeout 65; #长连接超时时间为 65 秒#gzip on; #启用 gzip 压缩server { #HTTP 服务配置listen 80; #配置监听端口为 80server_name localhost; #设置服务器名称为 localhost#charset koi8-r; #设置响应编码为 koi8-r#access_log logs/host.access.log main; #指定该虚拟主机的访问日志location / { #根目录配置root html; #网站根目录为 /path/to/nginx/htmlindex index.html index.htm; #默认索引文件}#error_page 404 /404.html; #设置 404 错误页面error_page 500 502 503 504 /50x.html; #设置 500/502/503/504 错误页面location = /50x.html { #定义错误页面存放路径root html;}# 其他代码段为注释,暂不解释}
}- 对原始内容进行更改，下面是具体更改后的 nginx.conf的 源码示例 与 图片讲解
- 更改后的代码：
user root;
worker_processes 1;#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;#log_format main '$remote_addr - $remote_user [$time_local] "$request" '# '$status $body_bytes_sent "$http_referer" '# '"$http_user_agent" "$http_x_forwarded_for"';#access_log logs/access.log main;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;#gzip on;server {listen 8080;server_name 192.168.109.130;#charset koi8-r;#access_log logs/host.access.log main;location / {root /usr/local/app/dist;index index.html index.htm;}# 后端 Java API 请求转发（俗称反向代理）location /api/ {proxy_pass http://192.168.109.130:8081/; # 这里配置的是 Java 项目中设置虚拟机ip地址，以及java端口，【注意点： 8081/ 后边的"/"不要少了】}#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}# 其他代码段为注释,暂不解释}
}
- 具体变更详解：
4.nginx配置更改完后，进入到 /usr/local/nginx 目录下，会见到下面图片内容，使用命令重启nginx
./sbin/nginx
五：运行后端jar包
1.在上面我们已经将jar包上传至 /usr/local/app 指定目录，所以这里先进入上传后的指定目录
2.运行jar包（部署方式自选其一）
我这边采用是临时部署（当退出终端后项目关闭），
当然也可以进行永久部署（当退出终端后依然运行）。
# 临时部署
java -jar 您的jar包名称# 永久部署
nohup java -jar 您的jar包名称 & # 【针对不想永久部署，使用下述命令关闭】
# 1.查找占用
netstat -nlp | grep 端口号# 2.解除占用
kill -9 端口号
六：最终效果
1.最终效果如下
2.使外部主机可以访问虚拟机部署内容【根据自己需要决定是否设置】
- 需要开放用到端口
# 开放3306端口
firewall-cmd --zone=public --add-port=3306/tcp --permanent# 重启防火墙（变更后必经步骤）
firewall-cmd --reload# 查看已开放端口
firewall-cmd --list-ports#========================下面是配套补充==============================#
# 删除3306开放的端口（使用后记得重启防火墙）
firewall-cmd --zone=public --remove-port=3306/tcp --permanent- 开放端口后的效果（可以自己主机访问虚拟机部署效果）
