本文创作环境
华为云Ubuntu22.04
需要对以下知识具备一定了解和经验
- Linux和Docker使用基础
- Vue基本使用
- SpringBoot基本使用
一、起手式-环境配置
1.远程服务器免密
在远程服务器执行ssh-keygen -t rsa,得到如下三个文件
language-bash1
2
3
4
5
| 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配置远程免密登录，例如
language-bash1
2
3
4
5
| Host huaweiYun
HostName xxx.xxx.xxx.xxx
User root
Port 22
IdentityFile "C:\Users\mumu\.ssh\id_rsa"
|
2.安装Docker
执行以下命令安装Docker并检查docker命令是否可以使用
language-bash1
2
3
4
5
| apt update
apt upgrade
apt install docker.io
docker ps -a
docker images -a
|
二、Vue前端部署
1.参考文件夹结构
文件先不用创建，按照下面结构先把文件夹创建出来
然后将你的Vue打包后的dist文件夹替换下面的dist文件夹（如果没有Vue的打包文件夹本人建议先在index.html随便写点东西等会看能不能访问）
language-html1
2
3
4
5
6
7
8
9
10
11
12
13
| /root
├── conf
│ └── nginx
│ ├── default.conf
│ └── nginx.conf
└── Vue
├── MyTest01
│ ├── dist
│ │ └── index.html
│ └── logs
│ ├── access.log
│ └── error.log
└── nginxDocker.sh
|
2.nginx
拉取nginx镜像并创建nginx容器
language-bash1
2
| docker pull nginx
docker run -itd nginx
|
把里面的两个配置文件复制到主机
language-bash1
2
| 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
language-bash1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| #!/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脚本并查看当前容器列表确认容器已经在运行中
language-bash1
2
| 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包如下图放入对应位置
language-bash1
2
3
4
| SpringBoot
├── javaDocker.sh
└── MyTest01
└── demo-0.0.1-SNAPSHOT.jar
|
2.openjdk17
以java17举例，拉取对应docker镜像（java8对应的镜像是java:8 ）
language-bash
如下编写javaDocker.sh脚本
language-bash1
2
3
4
5
6
7
8
9
| #!/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脚本并查看当前容器列表确认容器已经在运行中
language-bash1
2
| 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的请求
language-html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <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类，代码如下
language-java1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 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看看效果吧。
(完)
