[Docker] 利用Docker移植Angular & NestJS & PostgreSQL到新電腦上執行 (可一同SQL資料一起移植至新電腦)
前言:
利用可以用docker把環境統一的能力，用在目前正在撰寫的Angular + NestJS + PostgreSQL
進行環境的統一，並生成三個image檔 + 一個volume檔(PostgreSQL)的資料檔
以下是我本來建好的docker環境:
這個是我的image檔，主要是inventorysystem-backend & inventorysystem-frontend & postgres
Volume的inventorysystem_pg-data (主要是保留SQL上的原始資料)
實作:
接下來就要在有WSL的Win11環境下開啟cmd。對應使用docker指令:
將image檔存下來:
docker save -o frontend.tar inventorysystem-frontend:latest
docker save -o backend.tar inventorysystem-backend:latest
docker save -o postgres.tar postgres:18-alpine
image來到新電腦:
docker load -i frontend.tar
docker load -i backend.tar
docker load -i postgres.tar
將volume存下來:
docker run --rm -v inventorysystem_pg-data:/from -v C:\Users\IT:/backup alpine tar -czvf /backup/pgdata.tar.gz -C /from .
volume來到新電腦:
docker run --rm -v inventorysystem_pg-data:/to -v "C:\externalData\dockerBackup:/backup" alpine tar -xzvf /backup/pgdata.tar.gz -C /to
這邊附上舊電腦上的docker-compose.yml檔
version: '3.8'
services:
# --- Backend Service (NestJS) ---
backend:
build: ./backend
container_name: nest-backend
ports:
- "3000:3000"
volumes:
- ./backend:/app:cached # ⭐ 將本機程式碼同步到容器
- /app/node_modules # ⭐ 避免 node_modules 被覆蓋
command: npm run start:dev # ⭐ 啟用 NestJS 熱更新
environment:
# 設定環境變數給 NestJS 讀取
- CHOKIDAR_USEPOLLING=true # ⭐ 使用輪詢方式偵測檔案變化
- CHOKIDAR_INTERVAL=1000 # 每 1000ms 掃描一次檔案
- DB_HOST=192.168.102.209 # 注意：這裡要填資料庫服務的名稱 (service name)
- DB_PORT=5432
- DB_USERNAME=postgres
- DB_PASSWORD=Qaz123456
- DB_DATABASE=postgres
depends_on:
- database # 確保資料庫先啟動
networks:
- app-network
# --- Frontend Service (Angular) ---
frontend:
build: ./frontend
container_name: angular-frontend
ports:
- "4200:4200"
volumes:
- ./frontend:/app
- /app/node_modules
environment:
- CHOKIDAR_USEPOLLING=true
depends_on:
- backend
networks:
- app-network
# --- Database Service (PostgreSQL) ---
database:
image: postgres:18-alpine
container_name: postgres-db
ports:
- "5432:5432" # 讓你可以用本機的 DBeaver/pgAdmin 連線
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=123456
- POSTGRES_DB=postgres
volumes:
- pg-data:/var/lib/postgresql/data # 資料持久化
networks:
- app-network
# 定義 Volume 用來存資料庫檔案
volumes:
pg-data:
networks:
app-network:
driver: bridge
這邊附上新電腦上的docker-compose.yml檔 (主要是改成讀image，並試圖讓前端angular可以對外連線的設定):
version: '3.8'
services:
# --- Backend Service (NestJS) ---
backend:
image: inventorysystem-backend:latest # ⭐ 改成用已存在的 image
container_name: nest-backend
ports:
- "3000:3000"
environment:
- DB_HOST=database # ⭐ 指向資料庫 service 名稱
- DB_PORT=5432
- DB_USERNAME=postgres
- DB_PASSWORD=Qaz123456
- DB_DATABASE=postgres
depends_on:
- database
networks:
- app-network
# --- Frontend Service (Angular) ---
frontend:
image: inventorysystem-frontend:latest # ⭐ 改成用已存在的 image
container_name: angular-frontend
ports:
- "4200:4200"
command: ng serve --host 0.0.0.0 --port 4200 --disable-host-check
environment:
- CHOKIDAR_USEPOLLING=true
depends_on:
- backend
networks:
- app-network
# --- Database Service (PostgreSQL) ---
database:
image: postgres:18-alpine
container_name: postgres-db
ports:
- "5432:5432"
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=Qaz123456
- POSTGRES_DB=postgres
volumes:
- pg-data:/var/lib/postgresql/data
networks:
- app-network
# 定義 Volume 用來存資料庫檔案
volumes:
pg-data:
networks:
app-network:
driver: bridge
全準備好後，在有yml檔底下的資料夾之cmd檔輸入:
docker-compose up -d
如果想重新build image檔(例如 Dockerfile有改動過)才用
docker-compose up -build -d
以上就是移植的所有過程。這邊只是簡單的記錄一下，有時間再來分享如何把開發環境用在docker裡面開發。 讓原本的電腦環境與開發環境切開。
留言
張貼留言