云服务器Docker部署SpringBoot+Vue前后端(Ubuntu)

本文创作环境
华为云Ubuntu22.04
需要对以下知识具备一定了解和经验

• Linux和Docker使用基础
• Vue基本使用
• SpringBoot基本使用

一、起手式-环境配置

1.远程服务器免密

在远程服务器执行ssh-keygen -t rsa,得到如下三个文件

root@hecs-295176:~# ls -lh .ssh/
total 12K
-rw------- 1 root root  570 Oct 21 15:14 authorized_keys
-rw------- 1 root root 2.6K Oct 21 15:09 id_rsa
-rw-r--r-- 1 root root  570 Oct 21 15:09 id_rsa.pub

将id_rsa.pub内容复制到authorized_keys，然后将id_rsa下载到本地。
在VsCode使用Remote-SSH配置远程免密登录，例如

Host huaweiYun
  HostName xxx.xxx.xxx.xxx
  User root
  Port 22
  IdentityFile "C:\Users\mumu\.ssh\id_rsa"

2.安装Docker

执行以下命令安装Docker并检查docker命令是否可以使用

apt update
apt upgrade
apt install docker.io
docker ps -a
docker images -a

二、Vue前端部署

1.参考文件夹结构

文件先不用创建，按照下面结构先把文件夹创建出来
然后将你的Vue打包后的dist文件夹替换下面的dist文件夹（如果没有Vue的打包文件夹本人建议先在index.html随便写点东西等会看能不能访问）

/root
├── conf
│   └── nginx
│       ├── default.conf
│       └── nginx.conf
└── Vue
    ├── MyTest01
    │   ├── dist
    │   │   └── index.html
    │   └── logs
    │       ├── access.log
    │       └── error.log
    └── nginxDocker.sh

2.nginx

拉取nginx镜像并创建nginx容器

docker pull nginx
docker run -itd  nginx

把里面的两个配置文件复制到主机

docker cp containerName:/etc/nginx/nginx.conf ~/conf/nginx/nginx.conf
docker cp containerName:/etc/nginx/conf.d/default.conf ~/conf/nginx/default.conf

编辑default.conf 文件，修改以下内容：

• 将 listen 80; 改为 listen 8080;，表示 nginx 容器监听 8080 端口。
• 将 root /usr/share/nginx/html; 改为 root /usr/share/nginx/dist;，表示 nginx容器的根目录为 /usr/share/nginx/dist。
• 将 index index.html index.htm; 改为 index index.html;，表示 nginx 容器的默认首页为 index.html。

参考第一小步文件夹结构，把以下内容写入nginxDocker.sh

#!/bin/bash

containerName="Test01"
nginxConf="/root/conf/nginx/nginx.conf"
defaultConf="/root/conf/nginx/default.conf"
logsPath="/root/Vue/MyTest01/logs"
vuePath="/root/Vue/MyTest01/dist"

docker run  -d --name "$containerName" \
            -v "$nginxConf":/etc/nginx/nginx.conf \
            -v "$defaultConf":/etc/nginx/conf.d/default.conf \
            -v "$logsPath":/var/log/nginx \
            -v "$vuePath":/usr/share/nginx/dist \
            -p 8080:8080 \
            nginx

命令行运行这个sh脚本并查看当前容器列表确认容器已经在运行中

bash Vue/nginxDocker.sh
docker ps -a

3.开放8080端口

如果你使用的VsCode远程连接的服务器，那么可以先通过端口转发，在本地访问前端服务。
如果想要别人通过公网访问，需要去购买云服务器的平台，修改服务器的安全组配置，添加入站规则，开放8080端口。
之后使用IP+8080即可访问这个docker容器里的前端服务。

4.复盘

首先是更新便捷性，使用-v挂载文件到容器，我们可以直接修改主机的dist文件夹内容而不必对容器做任何操作，前端服务就可以自动update，其它-v挂载的文件都可以在主机直接修改而不必连入容器中修改，同时重启容器即可一定保证所有服务重启。
其次是多开便捷性，以上流程就是一个包裹了前端服务的docker占一个端口，如果有多个Vue前端，使用不同端口即可。
总而言之，都是选择Docker容器化的优势所在。

三、SpringBoot后端部署

1.参考文件夹结构

将maven打包好的jar包如下图放入对应位置

SpringBoot
   ├── javaDocker.sh
   └── MyTest01
       └── demo-0.0.1-SNAPSHOT.jar

2.openjdk17

以java17举例，拉取对应docker镜像（java8对应的镜像是java:8 ）

docker pull openjdk:17

如下编写javaDocker.sh脚本

#!/bin/bash

containerName="JavaTest01"
SpringBootPath="/root/SpringBoot/MyTest01/demo-0.0.1-SNAPSHOT.jar"

docker run  -d --name "$containerName" \
            -p 8081:8081 \
            -v "$SpringBootPath":/app/your-app.jar \
            openjdk:17 java -jar /app/your-app.jar

命令行运行这个sh脚本并查看当前容器列表确认容器已经在运行中

bash SpringBoot/javaDocker.sh
docker ps -a

3.开放8081端口

需要去购买云服务器的平台，修改服务器的安全组配置，添加入站规则，开放8081端口。
打开浏览器，输入IP:8081然后跟上一些你在程序中写的api路径，验证是否有返回。

四、Vue->Axios->SpringBoot前后端通信简单实现

vue这里使用ts + setup +组合式语法举例，前端代码如下
意思是向IP为xxx.xxx.xxx.xxx的云服务器的8081端口服务发送路径为/Home/Kmo的请求

<template>
  <div>
    Your Remote JavaDocker State : {{ line }}
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";
const line = ref("fail");
axios.get("http://xxx.xxx.xxx.xxx:8081/Home/Kmo").then(rp=>{
  line.value = rp.data
})
</script>


<style scoped>
</style>

SpringBoot后端写一个简单Controller类，代码如下

package com.kmo.demo.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@CrossOrigin(originPatterns = "*", allowCredentials = "true")
@RestController
@RequestMapping("Home")
public class TestController {

    @GetMapping("/Kmo")
    public String test(){
        return "Success!";
    }

}

分别打包放到云服务指定文件夹，然后restart重启两个docker容器即可，在本地浏览器访问IP:8080看看效果吧。

(完)