1. 创建专用网络

docker network create appnet

2. 构建MYSOL服务器镜像

2.1. 准备工作

创建专用目录

mkdir app/db -p

获取配置文件

# 创建一个存放数据库配置文件的文件夹

cd app/db

# 创建临时mysql容器，目的是将里面的配置文件拷贝出来

docker run --name temp -itd -e MYSOL_ROOT_PASSWORD=123456 mysql

# 将主配置文件拷贝出来

docker cp temp:/etc/mysql/my.cnf .

# 将其他次配置文件拷贝出来

docker cp temp:/etc/mysql/conf.d .

# 删除临时容器

docker rm -f temp

修改字符集，目的是为了初始化脚本的.sql文件里面的中文不会乱码

# 修改主配置文件

vim my.cnf

[mysql]

default-character-set=utf8mb4

[mysql.server]

default-character-set=utf8mb4

准备初始化脚本×××.sql （如果有的话）

2.2. 构建脚本

# 创建Dockerfile文件

vim Dockerfile

# 指定基础镜像

FROM mysql:latest

# 拷贝数据库初始化脚本到指定目录，可以不设置

COPY ×××.sql /docker-entrypoint-initdb.d

2.3. 执行构建镜像

docker build -f Dockerfile -t myappdb .

2.4. 运行容器 （上边代码为逐行解释，不能粘贴过去运行，下边代码可以粘贴过去直接运行）

docker run --name appDB -d \ # 运行容器，名字为appDB 后台运行

-p 3306:3306 \ # 映射端口号为3306

-v ./my.cnf:/etc/mysql/my.cnf \ # 将配置文件挂载到指定目录

-v ./conf.d:/etc/mysql/conf.d \ # ~~

-v ./data:/var/lib/mysql \ # ~~

-e MYSQL_ROOT_PASSWORD=root \ # 设置环境变量，密码为root

--network appnet \ # 设置自定义的网络

myappdb # 运行的镜像名称

docker run --name appDB -d \

-p 3306:3306 \

-v ./my.cnf:/etc/mysql/my.cnf \

-v ./conf.d:/etc/mysql/conf.d \

-v ./data:/var/lib/mysql \

-e MYSQL_ROOT_PASSWORD=root \

--network appnet \

myappdb

3. 构建后端服务器镜像

3.1. 淮备工作

创建专用目录

mkdir app/backend -p

创建后端配置文件

cd app/backend

vim application.yml

spring:

datasource:

url:jdbc:mysql://appDB:3306/testdb #重点关注数据库服务器的IP使用的是容器名字

后端文件打包

idea -> maven -> clean && package -> myapp.jar

3.2. 构建脚本

# 创建Dockerfile文件

vim Dockerfile

#指定基础镜像(因 SpringBoot3 要求jdk17+)

FROM openjdk:17

#工作目录app

WORKDIR /app

#拷贝jar包

COPY myapp.jar .

#暴露后端项目的端口8899

EXPOSE 8899

#默认执行jar

CMD ["java","-jar","myapp.jar"]

3.3. 执行构建

docker build -t myappbackend .

3.4. 运行容器

docker run --name appBackend -d \

-p 8086:8086 \

-v ./application.yml:/app/application.yml \

--network appnet \

myappbackend

4. 构建前端服务器镜像

4.1. 准备工作

创建专用目录

mkdir app/frontend/html -p

前端文件打包

vscode -> 终端 -> npm run build -> dist -> app/frontend/html

获取配置文件

首先进入frontend文件夹下

cd app/frontend

#以下命令会先创建一个临时nginx容器，然后将配置文件复制到指定文件夹，再删除临时容器

docker run --name temp -itd nginx

docker cp temp:/etc/nginx/nginx.conf ./nginx.conf

docker cp temp:/etc/nginx/conf.d .

docker rm -f temp

修改配置文件

vim ./conf.d/default.conf

upstream myapp.com{

server appBackend:8086;

}

server{

location / {

root /usr/share/nginx/html;

index index.html index.htm;

try_files $uri /index.html;

}

location /apis/ {

rewrite ^.+apis/?(.*)$ /$1 break;

proxy_pass http://myapp.com;

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

}

4.2. 构建脚本

# 创建Dockerfile文件

vim Dockerfile

#指定基础镜像(nginx)

FROM nginx:latest

#拷贝前端文件

COPY ./html /usr/share/nginx/html

#暴露前端项目的端口80

EXPOSE 80

4.3. 执行构建

docker build -t myappfrontend .

4.4. 运行容器

docker run --name appFrontend -d \

-p 80:80 \

-v ./nginx.conf:/etc/nginx/nginx.conf \

-v ./conf.d:/etc/nginx/conf.d \

--network appnet \

myappfrontend

参考地址：Dockerfile实战-构建前后端分离项目_哔哩哔哩_bilibili