网站上添加百度地图导航申请域名的方法和流程

Docker部署

本小节，讲解如何将前端 + 后端项目，使用 Docker 容器，部署到 dev 开发环境下的一台 Mac 电脑上。

1 环境准备

需要安装如下环境：

• Docker：容器
• MySQL：数据库
• Redis：缓存
• Nginx：负载均衡

1.1 安装 Docker

此处省略，自行查询安装环境。安装后配置加速镜像。

配置 Docker 镜像加速器（推荐）
修改 Docker 配置
编辑 /etc/docker/daemon.json（Linux）或 Docker Desktop 的配置（Windows/macOS），添加以下内容：

{
“registry-mirrors”: [“https://m.daocloud.io”]
}

1.2 使用Docker网络

如果使用 Docker Compose，可忽略本节。

默认 bridge 网络的局限性

• 不支持容器名称解析：必须使用 IP 地址，而 IP 地址可能会在容器重启后发生变化。

• 隔离性差：所有容器共享同一个默认 bridge 网络，可能存在端口冲突或安全问题。

• 配置复杂：需要手动获取 IP 地址，不适合动态环境。

为了克服默认 bridge 网络的局限性，建议使用 自定义 bridge 网络，它支持容器名称解析，并提供更好的隔离性。

# 列出所有网络
docker network ls 
# 创建网络
docker network create my-network

1.3 安装 MySQL

① 执行如下命令，使用 Docker 启动 MySQL 容器。

#  拉取 MySQL 镜像
docker pull m.daocloud.io/docker.io/mysql:8.0# mac 启动 MySQL
docker run -d \
-v ~/work/mysql/:/var/lib/mysql \
-p 3306:3306 \
-e MYSQL_ROOT_PASSWORD=123456 \
--restart=always --name mysql \
--network my-network \
m.daocloud.io/docker.io/mysql:8.0

导入SQL脚本。

1.4 安装 Redis

执行如下命令，使用 Docker 启动 Redis 容器。

# 拉取并启动 Redis 镜像
docker run -d \
--name redis \
--restart=always \
-p 6379:6379 \
-e REDIS_PASSWORD=123456 \
--network my-network \
-v ~/work/redis/data:/data \
m.daocloud.io/docker.io/redis:7.0# 进入 Redis 容器并连接
docker exec -it redis redis-cli -a 123456

1.5 安装 Nginx

创建挂载目录

Nginx 挂载到服务器的目录：

/work/nginx/conf.d 用于存放配置文件
/work/nginx/html 用于存放网页文件
/work/nginx/logs 用于存放日志
/work/nginx/cert 用于存放 HTTPS 证书

创建 /work/nginx 目录，并在该目录下新建 nginx.conf 文件，避免稍后安装 Nginx 报错。内容如下：

user  nginx;
worker_processes  1;events {worker_connections  1024;
}error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;http {include       /etc/nginx/mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';
#    access_log  /var/log/nginx/access.log  main;gzip on;gzip_min_length 1k;     # 设置允许压缩的页面最小字节数gzip_buffers 4 16k;     # 用来存储 gzip 的压缩结果gzip_http_version 1.1;  # 识别 HTTP 协议版本gzip_comp_level 2;      # 设置 gzip 的压缩比 1-9。1 压缩比最小但最快，而 9 相反gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # 指定压缩类型gzip_proxied any;       # 无论后端服务器的 headers 头返回什么信息，都无条件启用压缩include /etc/nginx/conf.d/*.conf; ## 加载该目录下的其它 Nginx 配置文件
}

启动 Nginx

① 执行如下命令，使用 Docker 启动 Nginx 容器。

docker run -d \
--name nginx --restart always \
-p 80:80 -p 443:443 \
-e "TZ=Asia/Shanghai" \
-v ~/work/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v ~/work/nginx/conf.d:/etc/nginx/conf.d \
-v ~/work/nginx/logs:/var/log/nginx \
-v ~/work/nginx/cert:/etc/nginx/cert \
-v ~/work/nginx/html:/usr/share/nginx/html \
--network my-network \
m.daocloud.io/docker.io/nginx:stable

② 执行 docker ps 命令，查看到 Nginx 容器的状态是 UP 的。

2 部署后端服务

第一步，修改配置
后端 dev 开发环境对应的是 application-dev.yaml 配置文件，主要是修改 MySQL 和 Redis 为你的地址。

#  MySQL 直接改成容器名称
url: jdbc:mysql://mysql:3306/demo?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&nullCatalogMeansCurrent=true&rewriteBatchedStatements=true # MySQL Connector/J 8.X 连接的示例
#  Reids 连接直接改成容器名称

第二步，编译后端
在项目的根目录下，执行 mvn clean package -Dmaven.test.skip=true 命令，编译后端项目，构建出它的 Jar 包。

第三步，上传 Jar 包
创建 /work/projects/demo-server 目录，将 demo-server.jar 上传到该目录下。

第四步，构建镜像
① 在 /work/projects/demo-server 目录下，新建 Dockerfile 文件，用于制作后端项目的 Docker 镜像。编写内容如下：

FROM m.daocloud.io/docker.io/eclipse-temurin:17-jre## 创建目录，并使用它作为工作目录
RUN mkdir -p /demo-server
WORKDIR /demo-server
COPY demo-server.jar app.jarENV TZ=Asia/Shanghai
ENV JAVA_OPTS="-Xms512m -Xmx512m -Djava.security.egd=file:/dev/./urandom"EXPOSE 48080ENTRYPOINT java ${JAVA_OPTS} -jar app.jar                                

② 执行如下命令，构建名字为 demo-server 的 Docker 镜像。

cd /work/projects/demo-server
docker build -t demo-server .

③ 在 /work/projects/demo-server 目录下，新建 Shell 脚本 deploy.sh，使用 Docker 启动后端项目。编写内容如下：

#!/bin/bash
set -eecho "开始删除 demo-server 容器"
docker stop demo-server || true
docker rm demo-server || true
echo "完成删除 demo-server 容器"echo "开始启动 demo-server 容器"
docker run -d \
--name demo-server \
-p 48080:48080 \
-e "SPRING_PROFILES_ACTIVE=dev" \
-v ~/work/projects/demo-server:/root/logs/ \
--network my-network \
demo-server
echo "正在启动 demo-server 容器中，需要等待 60 秒左右"

第五步，启动后端
执行 sh deploy.sh 命令，使用 Docker 启动后端项目。
执行 docker logs demo-server 命令，查看启动日志。

3 部署前端

第一步，修改配置
前端 dev 开发环境对应的是 .env.dev 配置文件，主要是修改 VITE_BASE_URL 为你的后端项目的访问地址。

请求路径:

VITE_BASE_URL='http://127.0.0.1:48080'

第二步，编译前端
在前端项目的根目录下，执行 npm run build:dev 命令，编译前端项目，构建出它的 dist 文件，里面是 HTML、CSS、JavaScript 等静态文件。

第三步，上传 dist 文件
创建 /work/nginx/html/demo-ui-admin 目录，将 dist 上传到该目录下。

4 配置 Nginx 转发

① 在 /work/nginx/conf.d 目录下，创建 demo-server.conf，内容如下：

server {listen       80;server_name  localhost; ## 重要！！！修改成你的外网 IP/域名location / {root   /usr/share/nginx/html/demo-admin-ui;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /admin-api/ { ## 后端项目 - 管理后台proxy_pass http://demo-server:48080/admin-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}location /app-api/ { ## 后端项目 - 用户 Appproxy_pass http://demo-server:48080/app-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}

友情提示：

[root] 指令在本地文件时，要使用 Nginx Docker 容器内的路径，
即 /usr/share/nginx/html/demo-admin-ui，否则会报 404 的错误。

② 执行 docker exec nginx nginx -s reload 命令，重新加载 Nginx 配置。

友情提示：如果你担心 Nginx 配置不正确，可以执行 docker exec nginx nginx -t 命令。

③ 请求 http://127.0.0.1:80 地址，成功访问前端项目地址。