本文创作环境
Linux和Docker使用基础
Vue基本使用
SpringBoot基本使用
一、起手式-环境配置 1.远程服务器免密 在远程服务器执行ssh-keygen -t rsa,得到如下三个文件
language-bash 1 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下载到本地。
language-bash 1 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-bash 1 2 3 4 5 apt update apt upgrade apt install docker.io docker ps -a docker images -a
二、Vue前端部署 1.参考文件夹结构 文件先不用创建，按照下面结构先把文件夹创建出来
language-html 1 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-bash 1 2 docker pull nginx docker run -itd nginx
把里面的两个配置文件复制到主机
language-bash 1 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-bash 1 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-bash 1 2 bash Vue/nginxDocker.sh docker ps -a
3.开放8080端口 如果你使用的VsCode远程连接的服务器，那么可以先通过端口转发，在本地访问前端服务。8080端口。
4.复盘 首先是更新便捷性，使用-v挂载文件到容器，我们可以直接修改主机的dist文件夹内容而不必对容器做任何操作，前端服务就可以自动update，其它-v挂载的文件都可以在主机直接修改而不必连入容器中修改，同时重启容器即可一定保证所有服务重启。
三、SpringBoot后端部署 1.参考文件夹结构 将maven打包好的jar包如下图放入对应位置
language-bash 1 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-bash 1 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-bash 1 2 bash SpringBoot/javaDocker.sh docker ps -a
3.开放8081端口 需要去购买云服务器的平台，修改服务器的安全组配置，添加入站规则，开放8081端口。
四、Vue->Axios->SpringBoot前后端通信简单实现 vue这里使用ts + setup +组合式 语法举例，前端代码如下8081端口服务发送路径为/Home/Kmo的请求
language-html 1 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-java 1 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看看效果吧。
(完)
