使用Docker部署前端和后端項(xiàng)目的完整教程
前言
在現(xiàn)代軟件開(kāi)發(fā)流程中,容器化部署已成為主流方案,Docker憑借輕量、隔離、可移植的特性,能大幅簡(jiǎn)化前后端項(xiàng)目的部署復(fù)雜度。本文將結(jié)合實(shí)際項(xiàng)目經(jīng)驗(yàn),詳細(xì)講解如何使用Docker部署包含前端(Vue)、后端(SpringBoot)、PostgreSQL數(shù)據(jù)庫(kù)、Redis緩存的完整項(xiàng)目,涵蓋環(huán)境配置、鏡像構(gòu)建、容器編排全流程。
docker.aityp.com(渡渡鳥(niǎo)鏡像同步站)是一款實(shí)用的Docker鏡像加速工具。它100%同步gcr.io、docker.io等多個(gè)官方鏡像源,涵蓋8000+docker.io鏡像及各類(lèi)常用鏡像。無(wú)需復(fù)雜配置,就能解決官方鏡像拉取慢的問(wèn)題,讓鏡像獲取更高效,為容器化部署節(jié)省時(shí)間。
一、項(xiàng)目架構(gòu)與環(huán)境準(zhǔn)備
1. 項(xiàng)目架構(gòu)說(shuō)明
- 前端:Vue3項(xiàng)目,通過(guò)Nginx提供靜態(tài)資源服務(wù)并反向代理后端接口;
- 后端:SpringBoot 3.x項(xiàng)目,提供業(yè)務(wù)接口,依賴PostgreSQL數(shù)據(jù)庫(kù)和Redis緩存;
- 中間件:PostgreSQL 16(數(shù)據(jù)持久化)、Redis 7.0.10(緩存);
- 網(wǎng)絡(luò):Docker自定義橋接網(wǎng)絡(luò),實(shí)現(xiàn)容器間互通;
- 存儲(chǔ):Docker數(shù)據(jù)卷,保障數(shù)據(jù)持久化。
2. 環(huán)境前置要求
- 服務(wù)器:Linux系統(tǒng)(本文以CentOS7 為例);
- 軟件:已安裝Docker、Docker Compose;
- 目錄結(jié)構(gòu):
/opt/graph-parent/ ├── frontend/ # 前端目錄(含dist構(gòu)建產(chǎn)物、Dockerfile、nginx.conf) ├── backend/ # 后端目錄(含jar包、Dockerfile、application.yml) ├── docker-compose.yml # 容器編排文件 └── logs/ # 日志目錄(可選)
二、后端項(xiàng)目容器化部署
1. 編寫(xiě)后端Dockerfile
后端基于OpenJDK 17構(gòu)建,Dockerfile放置于/opt/graph-parent/backend/目錄:
# 選擇華為云鏡像源的OpenJDK 17 slim版本(精簡(jiǎn)且穩(wěn)定) FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/openjdk:17-slim # 設(shè)置時(shí)區(qū),避免時(shí)間不一致問(wèn)題 ENV TZ=Asia/Shanghai RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone # 定義工作目錄 WORKDIR /app # 復(fù)制后端jar包到容器內(nèi)(需確保jar包名稱與實(shí)際一致) COPY graph-api.jar app.jar # 暴露后端服務(wù)端口 EXPOSE 8088 # 啟動(dòng)命令(指定生產(chǎn)環(huán)境配置,避免端口重復(fù)配置) ENTRYPOINT ["java", "-jar", "app.jar", "--spring.profiles.active=prod"]
2. 后端配置文件優(yōu)化
修改application.yml,重點(diǎn)配置數(shù)據(jù)庫(kù)和Redis連接(容器間通過(guò)服務(wù)名互通):
server:
port: 8088 # 后端服務(wù)端口
spring:
# 數(shù)據(jù)庫(kù)配置
datasource:
url: jdbc:postgresql://graph-postgres:5432/graph_db # 容器名+端口+庫(kù)名
username: postgres
password: 123456
driver-class-name: org.postgresql.Driver
# Redis配置
redis:
host: graph-redis # Redis容器名
port: 6379
timeout: 5000ms
# MyBatis-Plus配置(按需添加)
mybatis-plus:
mapper-locations: classpath:mapper/**/*.xml
type-aliases-package: com.graph.api.entity3. 構(gòu)建后端鏡像
cd /opt/graph-parent/backend/ # 構(gòu)建鏡像(--no-cache避免緩存干擾) docker build --no-cache -t graph-api:latest .
三、前端項(xiàng)目容器化部署
1. 編寫(xiě)前端Dockerfile
前端基于Nginx Alpine鏡像構(gòu)建,Dockerfile放置于/opt/graph-parent/frontend/目錄:
# 選擇華為云鏡像源的Nginx Alpine版本(輕量) FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:alpine # 清空Nginx默認(rèn)靜態(tài)文件 RUN rm -rf /usr/share/nginx/html/* # 復(fù)制前端構(gòu)建產(chǎn)物(dist目錄)到Nginx靜態(tài)資源目錄 COPY dist/ /usr/share/nginx/html/ # 復(fù)制自定義Nginx配置文件,覆蓋默認(rèn)配置 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露80端口 EXPOSE 80 # 啟動(dòng)Nginx(前臺(tái)運(yùn)行,保證容器不退出) CMD ["nginx", "-g", "daemon off;"]
2. 配置Nginx反向代理
編寫(xiě)nginx.conf,解決前端路由刷新404問(wèn)題,并代理后端接口:
server {
listen 80;
server_name localhost;
charset utf-8;
# 前端靜態(tài)文件根目錄
root /usr/share/nginx/html;
index index.html index.htm;
# 解決Vue路由刷新404
location / {
try_files $uri $uri/ /index.html;
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
# 反向代理后端接口(容器名+端口)
location /api/ {
proxy_pass http://graph-api:8088/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_connect_timeout 30s;
proxy_read_timeout 30s;
}
# 日志配置(容器內(nèi)路徑,通過(guò)數(shù)據(jù)卷掛載到主機(jī))
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
}3. 構(gòu)建前端鏡像
cd /opt/graph-parent/frontend/ # 構(gòu)建鏡像 docker build --no-cache -t graph-web-nginx:latest .
四、Docker Compose統(tǒng)一編排
1. 編寫(xiě)docker-compose.yml
通過(guò)Docker Compose管理所有服務(wù),實(shí)現(xiàn)一鍵啟動(dòng)/停止,文件放置于/opt/graph-parent/目錄:
version: '3.8'
# 自定義網(wǎng)絡(luò)(容器間互通)
networks:
graph-network:
name: graph-network
driver: bridge
# 數(shù)據(jù)卷(持久化存儲(chǔ))
volumes:
postgres-data: # PostgreSQL數(shù)據(jù)卷
redis-data: # Redis數(shù)據(jù)卷
backend-logs: # 后端日志卷
nginx-logs: # Nginx日志卷
# 服務(wù)定義
services:
# PostgreSQL服務(wù)
postgres:
container_name: graph-postgres
image: postgres:16
restart: always
environment:
POSTGRES_PASSWORD: 123456
POSTGRES_USER: postgres
POSTGRES_DB: graph_db
TZ: Asia/Shanghai
POSTGRES_INITDB_ARGS: "--encoding=UTF8 --lc-collate=C --lc-ctype=C"
ports:
- "5432:5432"
volumes:
- postgres-data:/var/lib/postgresql/data
networks:
- graph-network
# 健康檢查(確保數(shù)據(jù)庫(kù)啟動(dòng)完成后再啟動(dòng)后端)
healthcheck:
test: ["CMD-SHELL", "pg_isready -U postgres -d graph_db"]
interval: 10s
timeout: 5s
retries: 5
# Redis服務(wù)
redis:
container_name: graph-redis
image: redis:7.0.10
restart: always
environment:
TZ: Asia/Shanghai
ports:
- "6379:6379"
command:
- redis-server
- --appendonly yes
- --bind 0.0.0.0
- --protected-mode no
volumes:
- redis-data:/data
networks:
- graph-network
healthcheck:
test: ["CMD", "redis-cli", "ping"]
interval: 10s
timeout: 5s
retries: 5
# 后端服務(wù)
graph-api:
container_name: graph-api
image: graph-api:latest
restart: always
environment:
TZ: Asia/Shanghai
ports:
- "8088:8088"
volumes:
- backend-logs:/app/logs
- /opt/graph-parent/backend/config/application.yml:/app/config/application.yml # 掛載外部配置
networks:
- graph-network
# 依賴PostgreSQL和Redis健康啟動(dòng)
depends_on:
postgres:
condition: service_healthy
redis:
condition: service_healthy
# 前端服務(wù)
graph-web:
container_name: graph-web
image: graph-web-nginx:latest
restart: always
environment:
TZ: Asia/Shanghai
ports:
- "80:80"
volumes:
- nginx-logs:/var/log/nginx
# 可選:掛載前端dist目錄,無(wú)需重建鏡像即可更新前端
# - /opt/graph-parent/frontend/dist:/usr/share/nginx/html
networks:
- graph-network
# 依賴后端啟動(dòng)后再啟動(dòng)
depends_on:
graph-api:
condition: service_started2. 啟動(dòng)所有服務(wù)
cd /opt/graph-parent/ # 后臺(tái)啟動(dòng)所有服務(wù) docker-compose up -d # 查看服務(wù)狀態(tài)(確保所有服務(wù)為Up狀態(tài)) docker-compose ps # 查看日志(按需排查問(wèn)題) docker-compose logs graph-api # 后端日志 docker-compose logs graph-web # 前端日志
五、常見(jiàn)問(wèn)題與解決方案
1. 后端連接數(shù)據(jù)庫(kù)報(bào)密碼認(rèn)證失敗
- 原因:PostgreSQL容器首次啟動(dòng)時(shí)的密碼與配置不一致(密碼僅首次啟動(dòng)生效);
- 解決:刪除PostgreSQL數(shù)據(jù)卷,重新初始化:
docker-compose down docker volume rm graph-parent_postgres-data docker-compose up -d postgres
2. 前端無(wú)法訪問(wèn)后端接口
- 原因:Nginx代理配置錯(cuò)誤、容器網(wǎng)絡(luò)不通、后端未啟動(dòng);
- 解決:
- 檢查Nginx配置中
proxy_pass的后端容器名和端口是否正確; - 驗(yàn)證容器網(wǎng)絡(luò)互通:
docker exec -it graph-web telnet graph-api 8088; - 確保后端服務(wù)正常啟動(dòng):
docker-compose logs graph-api。
3. 容器啟動(dòng)后自動(dòng)退出
- 原因:Nginx未前臺(tái)運(yùn)行、后端啟動(dòng)命令錯(cuò)誤、依賴服務(wù)未就緒;
- 解決:
- Nginx啟動(dòng)命令需添加
daemon off;; - 檢查后端啟動(dòng)命令是否正確,避免端口重復(fù)配置;
- 通過(guò)
depends_on配置服務(wù)依賴順序,添加健康檢查。
4. 鏡像構(gòu)建失?。ㄎ募也坏剑?/h3>
- 原因:Dockerfile中
COPY指令的源文件路徑錯(cuò)誤; - 解決:確保構(gòu)建上下文(執(zhí)行
docker build的目錄)內(nèi)包含待復(fù)制的文件(如dist、jar包、nginx.conf)。
COPY指令的源文件路徑錯(cuò)誤;docker build的目錄)內(nèi)包含待復(fù)制的文件(如dist、jar包、nginx.conf)。六、部署驗(yàn)證與維護(hù)
1. 訪問(wèn)驗(yàn)證
- 前端頁(yè)面:瀏覽器訪問(wèn)
http://服務(wù)器IP; - 后端接口:訪問(wèn)
http://服務(wù)器IP:8088/doc.html(按需替換為健康檢查接口); - 數(shù)據(jù)庫(kù):
docker exec -it graph-postgres psql -U postgres -d graph_db; - Redis:
docker exec -it graph-redis redis-cli。
2. 日常維護(hù)
- 停止服務(wù):
docker-compose down; - 重啟服務(wù):
docker-compose restart; - 更新后端:重新構(gòu)建鏡像后
docker-compose up -d graph-api; - 更新前端:重新構(gòu)建鏡像后
docker-compose up -d graph-web(或掛載dist目錄直接替換文件); - 查看日志:
docker-compose logs -f 服務(wù)名(-f實(shí)時(shí)查看)。
七、總結(jié)
通過(guò)Docker+Docker Compose實(shí)現(xiàn)前后端項(xiàng)目的容器化部署,不僅能解決環(huán)境不一致問(wèn)題,還能簡(jiǎn)化部署流程、提高服務(wù)可用性。核心要點(diǎn)包括:
- 合理編寫(xiě)Dockerfile,選擇精簡(jiǎn)鏡像減少體積;
- 利用Docker網(wǎng)絡(luò)實(shí)現(xiàn)容器間互通,優(yōu)先使用容器名而非IP;
- 通過(guò)數(shù)據(jù)卷實(shí)現(xiàn)數(shù)據(jù)持久化,避免容器銷(xiāo)毀導(dǎo)致數(shù)據(jù)丟失;
- 借助Docker Compose統(tǒng)一編排服務(wù),管理依賴關(guān)系和啟動(dòng)順序;
- 重視配置文件掛載和日志收集,便于問(wèn)題排查和配置更新。
本文的部署方案經(jīng)過(guò)實(shí)際項(xiàng)目驗(yàn)證,適用于中小型前后端分離項(xiàng)目,可根據(jù)業(yè)務(wù)需求擴(kuò)展(如添加HTTPS、負(fù)載均衡等)。
到此這篇關(guān)于使用Docker部署前端和后端項(xiàng)目的文章就介紹到這了,更多相關(guān)Docker部署前端后端項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Docker容器化部署嘗試——多容器通信(node+mongoDB+nginx)
這篇文章主要介紹了Docker容器化部署嘗試——多容器通信(node+mongoDB+nginx),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Docker的安裝過(guò)程以及服務(wù)器與客戶端之間的通信
文章簡(jiǎn)要介紹了在Ubuntu24.04系統(tǒng)上安裝Docker的流程,包括修改apt源、安裝服務(wù)端與客戶端、配置鏡像目錄、端口通信及SSH連接,最終實(shí)現(xiàn)客戶端與服務(wù)端的成功通信驗(yàn)證2025-08-08
docker overlay實(shí)現(xiàn)跨主機(jī)的容器互通的方法
這篇文章主要介紹了docker overlay實(shí)現(xiàn)跨主機(jī)的容器互通,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-11-11
查看Docker停止容器占用的內(nèi)存的實(shí)現(xiàn)方法小結(jié)
要查看 Docker 停止的容器占用的內(nèi)存,可以通過(guò)以下幾種方法來(lái)實(shí)現(xiàn),Docker 提供了一些命令和工具來(lái)幫助你管理和監(jiān)控容器的資源使用情況,需要的朋友可以參考下2024-11-11
docker在自定義網(wǎng)絡(luò)中安裝ElasticSearch和Kibana的步驟
這篇文章主要介紹了docker在自定義網(wǎng)絡(luò)中安裝ElasticSearch和Kibana的步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-08-08
Docker連接超時(shí)的5種快速解決方法總結(jié)
在實(shí)際的開(kāi)發(fā)和測(cè)試過(guò)程中,模擬網(wǎng)絡(luò)請(qǐng)求超時(shí)是非常有必要的,因?yàn)樵谡鎸?shí)的生產(chǎn)環(huán)境中,網(wǎng)絡(luò)請(qǐng)求超時(shí)是常見(jiàn)的情況之一,這篇文章主要介紹了Docker連接超時(shí)的5種快速解決方法,需要的朋友可以參考下2025-08-08

