docker 部署前、后端分离项目详细步骤(从打包到部署)

在平常的开发工作中，一个项目经历需求、开发、测试、上线等步骤。在开发测试完成后，我们需要部署测试环境、生产环境等，那么我们用 docker 方式应该怎么部署呢？前后端分离的项目又该如何部署呢？那么，今天我们总结下前后端分离项目从打包到部署的详细步骤。

一：安装所需软件

安装项目所需软件，如安装 mysql、redis、nacos等，这些安装方式在前面已经写过，这里不再赘述，安装步骤博客如下：

1：docker 安装 mysql 详解_本机连接docker mysql-CSDN博客

2：docker 安装 nginx 详解_docker 拉取nginx-CSDN博客

3：docker 安装 redis 详解_docker 安装redis-CSDN博客

4：docker 安装 Rabbitmq 详解_docker 安装rabbitmq-CSDN博客

5：docker 安装 MinIO 步骤详解_docker minio-CSDN博客

二：前端打包

1：修改 .env.deployment 配置文件接口调用配置，用于部署环境的环境变量配置文件，通常与 .env 文件类似，但专门针对部署阶段（如生产环境、预发布环境等）的特定配置，如图：

2：项目打包：npm run build，在 npm run build 时可以添加一些参数来调整打包。例如在 Vue CLI 项目中：npm run build -- --mode development：指定以开发模式进行打包。

当看到控制台输出如下信息时，表示打包成功：

打包成功，前端项目包如图所示：

三：后端打包

1：修改数据库信息为对应数据库，数据库配置一般在 application.yml 文件中配置。一般项目中会有多个配置文件，如 dev 开发环境、test 测试环境、prod 生产环境配置文件等，一定要注意每种配置文件中对应的数据库信息正确。如：

2：如果需要修改部署在服务上项目的端口信息，在 application.yml 中修改端口信息，如：

3：先点击 clean，然后点击 package 打包，操作如图所示：

四：构建后端服务镜像

1：编写 Dockerfile文件，Dockerfile 是一种纯文本文件，文件命名就是 “Dockerfile”，用来构建 Docker 镜像的文本文件，包含了一系列的指令和参数。通过 Dockerfile 构建的镜像可以保证开发环境、测试环境和生产环境的镜像一致，避免了换机器不能运行的问题。通过指令可以自动构建镜像。Dockerfile 可以与 Jenkins 等集成，实现自动化构建和部署。

# 使用OpenJDK 17基础镜像
FROM openjdk:17
# 创建一个名为/litemall/logs的目录
RUN mkdir -p /litemall/logs
# 切换工作目录
WORKDIR /litemall
# 配置环境变量
ENV SERVER_PORT=8085 \LANG=C.UTF-8 \LC_ALL=C.UTF-8# 暴露应用端口
EXPOSE 8085# 添加应用Jar包到容器中
ADD litemall-wx-api-0.1.0.jar ./app.jar# 设置启动命令
ENTRYPOINT ["java", \"-Dserver.port=${SERVER_PORT}", \"-Xlog:gc*:time,tags,level", \"-XX:+UseZGC", \"-jar", "app.jar"]

        2：docker build -t 镜像名:tag . 如：docker build -t litemall-all:v1.0 . ，编写完 Dockerfile 文件后，这个时候就可以构建镜像了。注意版本后面有个空格点。使用点 . ：表示使用当前目录下的 Dockerfile，如果不加这个点，Docker 不会知道从哪里获取 Dockerfile。镜像构建完成后，可以使用 docker images 查看生成的镜像。

        查看镜像：docker images

五：启动后端服务

1：编写后端服务 docker-compose.yml 文件。启动容器，可以直接用docker run 后面接一堆指令启动，也可以用 docker-compose.yml 文件管理指令，docker compose 是定义和运行多容器 Docker 应用的工具，用 docker compose 命令启动，这样更加的便捷。

services:litemall-all:image: litemall-all:v1.0container_name : litemall-allenvironment:- SERVER_PORT=8085- JAVA_OPTS="-Xmx2g -Xms2g" - TZ=Asia/Shanghairestart: alwaysnetwork_mode: "host"

        2：启动后端服务 docker compose up -d 命令，docker compose up 是阻塞窗口的，带上 -d 是非阻塞的。docker compose up -d 启动，可以更方便的管理启动命令。
        遇到的问题：
报错 1 如下：下载镜像报错

   解决方法：
   修改 /etc/daemon.json文件中镜像加速器配置，如果遇见下载镜像错误，基本都是这种解决方法。但是修改了好久镜像加速器配置，就是没有解决，一直以为是加速器没有配置对，导致问题，后面发现是 docker-compose.yml 中 image 镜像名称写错了，所以导致下载镜像一直失败，Dockerfile 文件中的镜像，如图：

报错 2 如下：无法找到运行的主类

解决方法：找到服务所在模块的 pom.xml 中如下配置：

<build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><execution><id>repackage</id><configuration><executable>true</executable><classifier>exec</classifier></configuration> </execution></executions></plugin></plugins>
</build>

将 <execution> 标签中的内容改为如下，即可解决：

<goals><goal>repackage</goal><goal>build-info</goal>
</goals>

4：测试后端服务
在服务器上执行：curl -v http://localhost:8085/wx/auth/login 后面接口为后端服务中的接口，查看返回信息，如果返回 200，则表示接口调用成功；如果连接失败，-v 会显示错误详情（如 Connection refused 表示端口未监听）。

六：nginx 配置

1：编写 nginx.conf 文件，主要作用是将 Nginx 服务器配置为监听 6255 端口，处理前端静态资源请求和后端接口请求，通过反向代理将以 /wx/ 开头的请求转发到 http://localhost:8085 后端服务器。

user  nginx;
worker_processes  auto;events {worker_connections  1024;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;autoindex on;keepalive_timeout  65;server {listen 6255;server_name localhost;charset utf-8;# 处理前端静态资源请求location / {root  /usr/share/nginx/html;index index.html index.htm;}# 处理后端接口请求location /wx/ {proxy_pass http://localhost:8085;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;}}
}

2：编写 docker-compose.yml 文件，定义了使用镜像及版本，容器名称、环境配置及端口映射，挂载了宿主机目录等，使用 docker-compose.yml 文件，可以更好的管理启动命令，方便使用。

services:nginx:image: nginx:latestcontainer_name: nginx-litemall-testenvironment:TZ: Asia/Shanghaiports:- "8085:8085"volumes:# 配置文件映射- /litemall/nginx/conf/nginx.conf:/etc/nginx/nginx.conf- /litemall/nginx/conf:/etc/nginx/conf# 页面目录- /litemall/html/dist:/usr/share/nginx/htmlprivileged: truenetwork_mode: "host"

3：启动 nginx，用 docker compose up 启动，可以实时看到启动日志。可以 docker ps 查看是否启动成功。

        4：遇到的问题：访问报 404，如下：

nginx 报错如下：无法打开 /html 文件夹，没有此文件或者目录

   解决方法：搜了好多方法，基本都是说文件夹权限问题，chmod 修改文件夹权限，各种修改权限，看目录路径是否正确，修改了好久，没有解决，后面发现是 nginx.conf 中
前端文件目录写的是宿主机的文件目录，而不是容器的目录，所以导致一直找不到，
        修改前、后如下图：

此处要注意：nginx 文件挂载目录映射位置：

七：测试

根据 http://xx.xx.xx.xx:6255 进行访问，访问页面如下：

        可能会遇到的问题：项目启动成功，访问失败，可以查看项目端口是否因没开防火墙导致无法访问。如果是，解决步骤如下：
        (1)：查看防火墙开的端口：firewall-cmd --zone=public --list-ports
(2)：若端口未开，则添加，比如开放 8008 端口：firewall-cmd --zone=public --add-port=8008/tcp --permanent
(3)：修改完成后，重启防火墙：firewall-cmd --reload

八：总结

首先装需要的软件，如部署需要的 nginx、redis、rabbitmq、nacos、mysql等，接着就是打前端包，打后端包，包打完之后，将包上传到服务器，构建后端服务镜像，编写启动后端服务 docker-compose.yml 文件。创建 nginx.conf 文件，nginx.conf 文件的配置和 nginx 的 docker-compose.yml 文件中配置尤为重要，监听的端口，挂载文件目录，一定要注意书写正确，否则可能看着都没问题，但是就是访问失败。