Dockerfile构建前后端分离项目

【Dockerfile构建前后端分离项目】

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

注:将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

进入后输入ggVG全选内容  输入d删除 然后粘贴下面的文本

vim ./conf.d/default.conf
upstream myapp.com {
    server 39.170.99.28:8086;
}

server {
    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    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;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

将下方文件放到server上   (注:appBackend  为自定义网络内的后端容器名   如果没有自定义网络可以直接写成ip地址)

upstream myapp.com {
    server appBackend:8086;
}

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. 执行构建

   注:运行此命令前必须在  cd app/frontend  目录下不然挂载会报错

(注:最后那个“.” 很重要,不可以漏掉,表示复制当前路径下的jar包。 前提是 Dockerfile 和刚才上传的 html文件、配置文件 在同一路径下)

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

posted @ 2024-07-10 20:58  xd99  阅读(2)  评论(0编辑  收藏  举报