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 文件中配置尤為重要，監聽的端口，掛載文件目錄，一定要注意書寫正確，否則可能看著都沒問題，但是就是訪問失敗。