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

发布于：2025-06-02 ⋅ 阅读:(26) ⋅ 点赞:(0)

        在平常的开发工作中，一个项目经历需求、开发、测试、上线等步骤。在开发测试完成后，我们需要部署测试环境、生产环境等，那么我们用 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.0
    container_name : litemall-all
    environment:
      - SERVER_PORT=8085
      - JAVA_OPTS="-Xmx2g -Xms2g" 
      - TZ=Asia/Shanghai
    restart: always
    network_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:latest
    container_name: nginx-litemall-test
    environment:
      TZ: Asia/Shanghai
    ports:
      - "8085:8085"
    volumes:
      # 配置文件映射
      - /litemall/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - /litemall/nginx/conf:/etc/nginx/conf
      # 页面目录
      - /litemall/html/dist:/usr/share/nginx/html
    privileged: true
    network_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 文件中配置尤为重要，监听的端口，挂载文件目录，一定要注意书写正确，否则可能看着都没问题，但是就是访问失败。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布