Vue & SpringBoot 从零实现博客系统（六）

本系列基于已上线的博客stonee.club
共分为需求分析，数据库设计，接口设计，前端代码编写，后端代码编写，服务器部署等六部分

本文系Vue & SpringBoot从零实现博客系统第六部分服务器部署

服务器部署

前言

服务器部署我花了小三天的时间，虽然网上有大量的博客，但是对于我这个新手加菜鸟来说，因为网上大多数只说配置，而每个人的服务器环境又不尽相同，所以难免会踩到其他的坑。

整个服务器部署流程并不复杂，配置也并不繁琐，但是想要成功配置好，还是不免会走些弯路

环境 & 服务器

阿里云（如果经费不充足，可以使用VMware等虚拟机先做一遍）
centos（企业级linux服务器OS）
ngnix（部署前端vue代码，反向代理）
jdk 11（我用的jdk11，自己可根据情况来处理）
putty / winscp（用于和服务器进行连接）
MySQL 8.0+（我用的MySQL8，自己根据情况处理）

注意

如果用的阿里云的服务器，记得到控制台查看下端口的开放情况，我上次就是在防火墙关闭的情况下想测试下远程的后台接口，结果总是连不上8080端口，非常郁闷，最后才发现阿里云上面自带的防护措施没有开启8080端口
还有一个就是当服务器装好ngnix或者mysql的时候，都要测一下，防止最后安装完成出错之后不知道错误原因在哪。MySQL的测试可以通过DataGrip去远程连接一下，比较方便
因为使用的是springBoot，所以就不用安装tomcat了

部署步骤

环境的搭建

安装MySQL

centos7安装MySQL
安装好了把3306的端口打开，用datagrip测一下

安装nginx

centos7安装nginx
只需要安装之后把nginx运行起来就行，后续会说nginx的配置
验证nginx是否运行，通过浏览器打开ip就行了，上面会显示nginx，就说明运行成功

安装jdk11

centos7安装jdk7
7和11的过程大差不差

代码打包到服务器

linux部署常用的命令

vue打包并配置nginx

使用vue cli3.0的UI界面打包之后会生成dist文件夹，之后通过winscp把dist上传到centos的一个目录上
yum安装nginx的配置目录
然后在nginx的网站默认站点配置 而不是 全局配置中配置自己的vue项目地址，负载等等
vue部署nginx

下面是我的配置

server {
    // nginx监听端口
    listen       80;
    server_name  localhost;

    // 因为vue中配置了跨域请求，增加了/API/，此处要把localhost:80/api/变为localhost:8080以请求后台接口，我在第四部分前端代码编写有说到
    location /api/ {
        proxy_pass http://127.0.0.1:8080/;
	    proxy_set_header    Connection "";
        proxy_set_header    Host $host;
    	// nginx给后台tomcat传递客户端真实的请求地址
        proxy_set_header    X-Real-Ip $remote_addr;
    }
	
    location / {
        // 之前打包的vue项目地址
    	root  /opt/vue/dist;
    	index index.html;
    	try_files $uri $uri/  /index.html last;
    }

}

注意：

我刚开始因为在vue配置了跨域请求就可以了，原来nginx中也要配置
同时，我是通过后台代码来获取ip的，但是当nginx和tomcat部署到同一台服务器上，所以servlet中获得的ip永远是localhost，此时就需要修改后台代码，因为我们通过nginx把客户端的真实ip放到了请求头

springboot打成jar包并部署到centos上

因为通过Maven进行项目控制，只需输入命令mvn clean package -Dmaven.test.skip= true
之后把打包成功的jar包通过winscp传到服务器上，通过java -jar 启动即可

让jar包一直后台运行，可参考这篇博客，同时，也可以把jar包的启动和关闭直接封装为shell会更方便，如下

start.sh

#!/bin/bash
nohup java -jar blog-0.0.1-SNAPSHOT.jar --server.port=8080 &

stop.sh

#!/bin/bash
PID=$(ps -ef | grep blog-0.0.1-SNAPSHOT.jar | grep -v grep | awk '{ print $2 }')
if [ -z "$PID" ]
then
    echo Application is already stopped
else
    echo kill $PID
    kill $PID
fi

启动时sh start.sh，关闭时sh stop.sh即可

注意

如果本地数据库的名称和服务器的名称不一样，一定要注意修改
有问题欢迎与我交流

王星星的魔灯

发布了100 篇原创文章 · 获赞 142 · 访问量 17万+

私信关注

Vue & SpringBoot 从零实现博客系统 （六）