一、理发店系统技术栈

本项目采用前后端分离架构:
层级	技术	                        部署方式	        端口
前端	Vue 2.7 + Element UI	        Nginx 静态托管	80 (容器内) → 8082 (宿主机)
后端	Spring Boot 2.7 + MyBatis	    Java 应用	    8081(容器内) → 8081 (宿主机)
通信协议	HTTP + JSON	RESTful API	-

核心特点:
    前端只负责页面渲染和用户交互
    后端只提供 API 接口,不关心页面展示
    两者通过 HTTP 请求通信,数据格式为 JSON

二、部署方案

维度	      你的方案	                            说明
容器化	     ✅ Docker	                            前端、后端、MySQL 都跑在容器里
网络模式	      Docker 自定义桥接网络(lfd-net)	    容器间通过容器名通信
数据持久化	  Docker 卷(Volume)	                MySQL 数据持久化
编排方式	      手动 docker run	                    未使用 Compose,手动管理
部署范围	      单机本地部署	                        所有容器在同一台服务器

三、详细部署步骤

数据库部署

1、获取mysql容器

docker pull mysql:8.0

2、启动mysql容器并创建数据库

docker run -d   --name mysql   --network lfd-net   -e MYSQL_DATABASE=LFD   -e MYSQL_USER=LFD   -e MYSQL_PASSWORD=设置LFD密码   -e MYSQL_ROOT_PASSWORD=设置root密码   -p 3306:3306   mysql:8.0

-e 是 Docker 中最常用的参数之一,几乎所有镜像都支持通过环境变量来配置行为。
其中 -e MYSQL_ROOT_PASSWORD参数是试着root 密码,这个必须设置。
MySQL 容器启动时会自动执行一系列初始化脚本,MYSQL_USER 和 MYSQL_PASSWORD 创建的普通用户,会被自动授予 MYSQL_DATABASE 指定数据库的所有权限。所以 LFD 用户自动就是 LFD 数据库的拥有者,不需要额外配置。

3、连接数据库

因为容器数据库3306端口已映射服务器端口,直接通过DBeaver连接虚拟机的3306和数据库名字即可,然后导入

8.0以上数据库链接需要设置驱动属性:

4、数据库导入

后端部署

0、先把ipv4转发打开

如果不打开虚拟机和宿主机(虚拟机)不通,所以虚拟机更不会到互联网。

我这个虚拟机到互联网的作用是dockerfile里要安装ping命令等

┌─────────────────────────────────────────────────────────┐
│                   宿主机(麒麟系统)                      │
│                                                         │
│   ┌─────────────┐    ┌─────────────┐                   │
│   │  容器 A     │    │  容器 B     │    IPv4 转发     │
│   │ (172.17.0.2)│    │ (172.17.0.3)│    = 网关/路由器  │
│   └──────┬──────┘    └──────┬──────┘                   │
│          │                  │                          │
│          └────────┬─────────┘                          │
│                   │                                    │
│            Docker 网桥 (docker0)                       │
│                   │                                    │
│         ┌─────────┴─────────┐                         │
│         │   IPv4 转发功能    │  ← 就是你开启的这个      │
│         │ (net.ipv4.ip_forward)                       │
│         └─────────┬─────────┘                         │
│                   │                                    │
│             宿主机网卡 (eth0)                          │
│                   │                                    │
└───────────────────┼─────────────────────────────────────┘
                    │
                    ▼
                互联网
  • 容器的 IP 是 172.17.0.x,是私有 IP

  • 宿主机网卡 eth0 的 IP 是 192.168.140.x,是局域网 IP

  • 容器要访问外网(如 deb.debian.org),需要经过:

    1. 容器 → Docker 网桥

    2. Docker 网桥 → 宿主机网卡(需要 IPv4 转发

    3. 宿主机网卡 → 外网

如果 IPv4 转发关闭

  • 容器能访问 Docker 网桥(宿主机内部)

  • 但无法通过宿主机网卡出去

  • 所以 apt-get update 会报 Temporary failure resolving

1、把Dockerfile和后端的jar包放在服务器

#把Dockerfile和后端的jar包放在服务器
[root@localhost houduan]# pwd && ll
/home/lfd/houduan
总计 92900
-rw-r--r-- 1 root root 47558918  6月 8日 17:14 barbershop-backend-1.0.0.jar
-rwxr-xr-x 1 root root      900  6月 2日 16:28 Dockerfile

2、通过Dockerfile 创建后端镜像

#通过Dockerfile 创建镜像
[root@localhost houduan]# cat Dockerfile 
FROM openjdk:17-jdk-slim

#镜像维护者/负责人
LABEL maintainer="barbershop"
#镜像描述
LABEL description="Barbershop Backend Service"

#如果没有会自动创建
WORKDIR /app

COPY barbershop-backend-1.0.0.jar app.jar

RUN mkdir -p /uploads/login_bg /uploads/xiaoguotu \
    && apt-get update \
    && apt-get install -y \
        tzdata \
        iputils-ping \     
        net-tools \         
        curl \            
        # 系统工具
        procps \           
        coreutils \        
        grep \           
    && rm -rf /var/lib/apt/lists/* \
    && ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
    && echo "Asia/Shanghai" > /etc/timezone

# 创建软链接(ifconfig 通常已包含在 net-tools 中)
# 确保常用命令在 PATH 中(默认已包含)

EXPOSE 8081

ENV JAVA_OPTS="-Xms256m -Xmx512m -XX:+UseG1GC -Djava.security.egd=file:/dev/./urandom"

ENTRYPOINT ["sh", "-c", "exec java $JAVA_OPTS -jar app.jar"]

3、创建理发店后端镜像

#创建理发店后端镜像
docker build -t lfd:1.0 .

4、根据镜像启动理发店后端容器

#根据镜像启动理发店后端容器
docker run -d --name lfd --network lfd-net -p 8081:8081 lfd:1.0

前端部署

1、把Dockerfile(前后端各一个Dockerfile)和前端的jar包放在服务器

[root@localhost qianduan]# pwd && ll
/home/lfd/qianduan
drwxr-xr-x 5 root root   73  6月 4日 15:57 dist #前端包
-rw-r--r-- 1 root root  346  6月 4日 16:55 Dockerfile
-rw-r--r-- 1 root root 1244  6月 4日 16:45 nginx.conf #nginx配置文件

2、Dockerfile文件内容

[root@localhost qianduan]# cat Dockerfile 
# 使用轻量级 Nginx 镜像
FROM nginx:alpine                   
# 将前端构建产物复制到 Nginx 默认目录
COPY dist/ /usr/share/nginx/html/   
# 使用自定义 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf  
# 暴露 80 端口
EXPOSE 80                           
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]  

3、nginx.conf的文件内容

[root@localhost qianduan]# cat nginx.conf 
server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # 前端路由重写(Vue Router history模式)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API 代理到后端容器
    location /api/ {
        proxy_pass http://lfd:8081/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    # 文件上传代理
    location /files/ {
        proxy_pass http://lfd:8081/files/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 图片资源代理
    location /uploads/ {
        proxy_pass http://lfd:8081/uploads/;
        proxy_set_header Host $host;
    }

    # Gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_min_length 1k;
    gzip_comp_level 5;
}

4、通过Dockerfile 创建后端镜像

docker build -t lfdqd:1.0 .

5、根据镜像启动理发店前端容器

docker run -d --name lfdqd --network lfd-net -p 8082:80 lfdqd:1.0

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐