【虚拟机安装与部署系列（五）】：部署前后端分离项目（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-Type
    default_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; #启用访问日志,并指定存放路径和格式为 main
 
    sendfile        on; #开启高效文件传输模式
    #tcp_nopush     on; #在 sendfile 开启时,可以防止网络包的唐突传输
 
    #keepalive_timeout  0; #禁止长连接
    keepalive_timeout  65; #长连接超时时间为 65 秒
 
    #gzip  on; #启用 gzip 压缩
 
    server { #HTTP 服务配置
        listen       80; #配置监听端口为 80
        server_name  localhost; #设置服务器名称为 localhost
 
        #charset koi8-r; #设置响应编码为 koi8-r
 
        #access_log  logs/host.access.log  main; #指定该虚拟主机的访问日志
 
        location / { #根目录配置
            root   html; #网站根目录为 /path/to/nginx/html
            index  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

• 开放端口后的效果（可以自己主机访问虚拟机部署效果）