SpringBoot + Vue 部署阿里云服务器

部署前准备

一、vue

1.新建文件

.env.development 

1
VUE_APP_BASEURL='http://localhost:9090'

.env.production

1
VUE_APP_BASEURL='http://:9090'

main.js 设置全局变量$baseUrl

1
Vue.prototype.$baseUrl=process.env.VUE_APP_BASEURL

request.js

1
2
3
4
const request = axios.create({
    baseURL: process.env.VUE_APP_BASEURL,   // 后端的接口地址
    timeout: 30000
})

2.文件上传地址修改、导出地址修改，vue工程全局搜索 localhost:9090 替换成 $baseUrl

1
2
3
4
5
6
7
:action="$baseUrl + '/file/upload'"

:action="$baseUrl + '/user/import'"

:action="$baseUrl + '/file/upload'"


3.注意：在Manager的 mouted函数里加上这个判断即可 防止用户在未登录的情况下进入首页

1
2
3
4
5
mounted() {   // 页面加载完成之后触发
  if (!this.user.id) {   // 当前的浏览器没有用户信息
    this.$router.push('/login')
  }
},

改完之后，重新打包vue生成dist目录并上传到/home/server/springboot+vue/vue

4.打包

npm run build

二、 SpringBoot

打包 springboot项目

mvn clean package

或者在maven中点击clean、点击package

三、 服务器

1.部署java

创建文件夹：mkdir -p /home/server/springboot+vue

springboot+vue目录下包含Java目录和vue目录

上传 jar包到服务器 /home/server/springboot+vue/java 目录

上传vue打包后的dist文件夹到/home/server/springboot+vue/vue目录

2.设置 application.yml 覆盖

将springboot的application.yml复制一份到同级目录中（优先级更高）

3.添加 启动和停止脚本

cd /home/server/springboot+vue/java

vi start.sh

1
2
3
NAME=springboot-0.0.1-SNAPSHOT.jar
nohup java -jar $NAME > server.log 2>&1 &
echo 'start success'

vi stop.sh

1
2
3
4
5
6
7
8
PORT=9090
pid=`netstat -tnlp | grep $PORT | grep -v grep | awk '{print $7}' | awk -F/ '{print $1}'`
if [ ${pid} ]; then
    kill -9 $pid
    echo "kill $PORT"
else
    echo 'stop sucess!'
fi
4.终端中赋权
1
chmod +x *

完成后的目录文件(不包含server.log)：

5.部署vue

1.nginx配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /home/server/springboot+vue/vue/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
}

2.配置完之后记得重启nginx

执行命令重启：

cd /usr/local/nginx/sbin

./nginx -s reload

四、MySQL

登录mysql： mysql -uroot -p

密码：123456

建立springboot项目的数据库和表。

可在navicat中连接阿里云数据库建立。（注意在阿里云服务器中关闭防火墙：systemctl stop firewalld）

五、启动后台程序

修改 application.yml 里面的ip为服务器的公网IP

启动程序：

1
2
cd /home/server/springboot+vue/java
./start.sh

端口：

1
2
3
4
查看被占用的9090端口：
lsof -i :9090
杀死进程（PID）：
sudo kill -9 9236  # 9236为PID

实时查看日志：tail -100f server.log

设置防火墙端口 3306、设置防火墙端口 9090

查看后台服务是否启动成功：

116.62.64.100:9090

浏览器访问：

http://116.62.64.100/