Localhost Docker 教學｜容器化開發環境設定指南

引言：現代開發者的必備工具

「在我的電腦上明明可以跑啊！」——這句話你一定聽過。

Docker 的出現就是為了解決這個問題。它讓你可以把應用程式和所有相依套件打包成一個「容器」，確保在任何環境都能一致運行。

本文將帶你從零開始學習 Docker，從基礎概念到在 localhost 上運行容器，再到處理常見的網路問題。

要點一－為什麼用 Docker 做本機開發？（優勢說明）

在學習 Docker 之前，讓我們了解它能解決什麼問題。

Docker 解決的痛點

傳統開發的問題	Docker 的解決方案
「在我電腦可以跑」	容器化確保環境一致
版本衝突（Python 2 vs 3）	每個專案用獨立容器
安裝複雜的相依套件	一個指令啟動所有服務
團隊環境不一致	共用相同的容器設定
開發環境污染系統	容器隔離，刪除即清除

Docker vs 傳統開發環境

項目	傳統方式（XAMPP 等）	Docker
環境一致性	依賴個人電腦設定	完全一致
安裝複雜度	需要分別安裝各元件	一個指令搞定
切換專案	可能有版本衝突	完全隔離
團隊協作	需要文件說明環境	分享 docker-compose.yml
學習曲線	低	中等

什麼時候該用 Docker？

適合使用 Docker：

多人協作的專案
需要多個服務（後端 + 資料庫 + 快取）
開發和正式環境需要一致
需要頻繁切換不同專案

可以先不用 Docker：

剛開始學習程式設計
只是做簡單的靜態網頁
個人練習專案

要點二－Docker 基礎概念快速入門

開始使用 Docker 前，先了解幾個核心概念。

核心概念

1. 映像檔（Image）

映像檔就像是「模板」，定義了容器要如何建立。你可以把它想像成安裝光碟。

# 下載 Node.js 映像檔
docker pull node:18

2. 容器（Container）

容器是映像檔的「執行中實例」。一個映像檔可以建立多個容器。

# 用 node 映像檔建立並執行容器
docker run node:18

3. Dockerfile

Dockerfile 是用來建立自訂映像檔的「配方」。

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]

4. Docker Compose

用來定義和管理多個容器的工具。用一個 YAML 檔案描述整個應用程式。

version: '3.8'
services:
  web:
    image: nginx
  db:
    image: mysql:8.0

概念關係圖

Dockerfile → 建立 → Image → 執行 → Container
                         ↓
                   可以建立多個 Container

要點三－Docker Desktop 安裝與設定

讓我們開始安裝 Docker。

Windows 安裝

系統需求：

Windows 10/11 64-bit
啟用 WSL 2（建議）或 Hyper-V
至少 4GB RAM

安裝步驟：

前往 Docker Desktop 官網
下載 Windows 版本
執行安裝程式
安裝完成後重新啟動電腦
開啟 Docker Desktop

確認安裝成功：

docker --version
# Docker version 24.0.x, build xxxxxxx

docker-compose --version
# Docker Compose version v2.x.x

macOS 安裝

系統需求：

macOS 12 或更新版本
Apple Silicon 或 Intel 晶片

安裝步驟：

前往 Docker Desktop 官網
下載 macOS 版本（選擇對應的晶片）
開啟 .dmg 檔案
將 Docker 拖曳到 Applications
開啟 Docker Desktop

Linux 安裝

# Ubuntu/Debian
sudo apt update
sudo apt install docker.io docker-compose

# 啟動 Docker
sudo systemctl start docker
sudo systemctl enable docker

# 讓當前使用者可以使用 docker（不用 sudo）
sudo usermod -aG docker $USER

要點四－第一個 Docker 容器：Nginx

讓我們用最簡單的方式體驗 Docker。

啟動 Nginx 容器

打開終端機，執行：

docker run -d -p 8080:80 --name my-nginx nginx

參數解釋：

-d：在背景執行（detached mode）
-p 8080:80：將主機的 8080 Port 映射到容器的 80 Port
--name my-nginx：為容器取名
nginx：使用的映像檔

存取你的網站

打開瀏覽器，輸入：

http://localhost:8080

你會看到 Nginx 的歡迎頁面！

常用 Docker 指令

# 查看正在執行的容器
docker ps

# 查看所有容器（包含已停止的）
docker ps -a

# 停止容器
docker stop my-nginx

# 啟動已停止的容器
docker start my-nginx

# 刪除容器
docker rm my-nginx

# 查看容器日誌
docker logs my-nginx

# 進入容器內部
docker exec -it my-nginx /bin/bash

使用自己的網頁

建立一個 index.html：

<!DOCTYPE html>
<html>
<head>
    <title>我的 Docker 網站</title>
</head>
<body>
    <h1>Hello from Docker!</h1>
</body>
</html>

用 Volume 掛載：

docker run -d -p 8080:80 \
  -v $(pwd):/usr/share/nginx/html \
  --name my-nginx nginx

現在 http://localhost:8080 會顯示你的網頁！

要點五－docker-compose 多容器環境

實際專案通常需要多個服務。docker-compose 讓你輕鬆管理它們。

範例：Node.js + MySQL + Redis

建立 docker-compose.yml：

version: '3.8'

services:
  # Node.js 應用程式
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DB_HOST=mysql
      - REDIS_HOST=redis
    depends_on:
      - mysql
      - redis
    volumes:
      - .:/app
      - /app/node_modules

  # MySQL 資料庫
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: myapp
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql

  # Redis 快取
  redis:
    image: redis:alpine
    ports:
      - "6379:6379"

volumes:
  mysql_data:

建立 Dockerfile：

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000
CMD ["npm", "run", "dev"]

啟動所有服務

# 啟動（背景執行）
docker-compose up -d

# 查看日誌
docker-compose logs -f

# 停止所有服務
docker-compose down

# 停止並刪除 Volume
docker-compose down -v

存取各服務

服務	網址
Node.js App	http://localhost:3000
MySQL	localhost:3306
Redis	localhost:6379

要點六－Docker 與 Localhost 的網路問題

使用 Docker 時，localhost 的行為和傳統開發不太一樣。這是最常讓人困惑的地方。

問題一：容器內的 localhost 不是主機的 localhost

情境：你的應用程式在容器內，想連接主機上運行的服務。

錯誤方式：

// 這在容器內不會連到主機
const db = mysql.connect('localhost:3306')

正確方式：

// 使用 host.docker.internal 連接主機
const db = mysql.connect('host.docker.internal:3306')

問題二：容器間的通訊

情境：你有多個容器需要互相通訊。

錯誤方式：

environment:
  - DB_HOST=localhost  # 錯誤！

正確方式：

environment:
  - DB_HOST=mysql  # 使用服務名稱

在 docker-compose 中，可以直接用服務名稱作為主機名稱。

問題三：Port 映射

Port 映射格式：

-p 主機Port:容器Port

範例：

# 主機 8080 → 容器 80
docker run -p 8080:80 nginx

# 只允許本機存取
docker run -p 127.0.0.1:8080:80 nginx

# 隨機主機 Port
docker run -p 80 nginx

問題四：0.0.0.0 vs 127.0.0.1

有些應用程式預設只監聽 127.0.0.1，在 Docker 中會導致外部無法存取。

解決方法：讓應用程式監聽 0.0.0.0

// Node.js 範例
app.listen(3000, '0.0.0.0')

# Flask 範例
app.run(host='0.0.0.0', port=5000)

🚀 想把 Docker 專案部署到雲端？

提醒：Docker 讓本機開發變簡單，但部署到雲端需要更多設定。

VibeFix 如何幫助你？

✅ 容器化應用部署：將你的 Docker 應用部署到雲端
✅ CI/CD 流程建置：自動化部署流程
✅ 雲端架構設計：選擇最適合的雲端平台
✅ 效能最佳化：容器資源配置與調校
✅ 問題排解：網路、儲存、權限問題快速解決

💡 為什麼選擇 VibeFix？

Docker 專業：豐富的容器化部署經驗
雲端整合：熟悉 AWS、GCP、Azure 等平台
持續支援：部署後持續維護

新用戶優惠：Docker 部署服務享 8 折優惠！

👉 立即點擊了解 VibeFix 專業部署服務！

要點七－常見問題排解

使用 Docker 時常見的問題及解決方法。

問題一：Port 已被佔用

錯誤訊息：Error: port is already allocated

解決方法：

# 檢查佔用 Port 的程序
lsof -i :8080

# 使用其他 Port
docker run -p 8081:80 nginx

問題二：容器無法連網

症狀：容器內 apt update 或 npm install 失敗

解決方法：

# 檢查 Docker 網路
docker network ls

# 重啟 Docker Desktop
# 或重建網路
docker network create my-network

問題三：Volume 權限問題

症狀：容器無法讀寫掛載的目錄

Linux 解決方法：

# 確認目錄權限
chmod -R 777 ./data

# 或在 docker-compose 中設定
user: "1000:1000"

問題四：映像檔太大

解決方法：

使用 alpine 版本的映像檔
使用多階段建構
清理不需要的檔案

# 使用更小的基底映像檔
FROM node:18-alpine

# 多階段建構
FROM node:18 AS builder
WORKDIR /app
COPY . .
RUN npm ci && npm run build

FROM node:18-alpine
COPY --from=builder /app/dist /app

FAQ

Q1：容器內如何連到主機的 localhost？

使用 host.docker.internal 代替 localhost。

Q2：docker-compose 是什麼？

docker-compose 是用來定義和管理多個 Docker 容器的工具。用一個 YAML 檔案描述所有服務。

Q3：Port 映射怎麼設定？

使用 -p 主機Port:容器Port 格式。例如 -p 8080:80 把主機的 8080 映射到容器的 80。

Q4：Docker 和虛擬機有什麼差別？

Docker 容器共用主機的核心，啟動更快、資源佔用更少。虛擬機有獨立的作業系統核心，隔離性更強但更耗資源。

要點八－進階：開發與生產環境分離

專業開發會區分開發和生產環境的設定。

建立不同的 Compose 檔案

docker-compose.yml（基礎設定）：

version: '3.8'

services:
  app:
    image: myapp
    environment:
      - NODE_ENV=production

docker-compose.override.yml（開發環境）：

version: '3.8'

services:
  app:
    build: .
    volumes:
      - .:/app
    environment:
      - NODE_ENV=development

docker-compose.prod.yml（生產環境）：

version: '3.8'

services:
  app:
    image: myapp:latest
    restart: always

使用方式

# 開發環境（自動套用 override）
docker-compose up

# 生產環境
docker-compose -f docker-compose.yml -f docker-compose.prod.yml up

環境變數管理

使用 .env 檔案：

DB_PASSWORD=mysecretpassword
REDIS_URL=redis://redis:6379

在 docker-compose.yml 中使用：

services:
  app:
    environment:
      - DB_PASSWORD=${DB_PASSWORD}

結論：擁抱容器化開發

本文重點回顧

透過這篇教學，你學會了：

Docker 的優勢：環境一致、隔離、易於分享
核心概念：Image、Container、Dockerfile、Docker Compose
基本操作：docker run、docker-compose up
網路設定：Port 映射、容器間通訊、host.docker.internal
常見問題排解：Port 佔用、權限問題、網路問題

下一步學習建議

實際專案練習：把現有專案容器化
學習 CI/CD：自動化建構和部署
探索 Kubernetes：進階的容器編排
準備上線：Localhost 轉正式上線指南

參考資料

圖片描述清單

插圖 1：localhost-docker-hero
- 用途：文章主視覺圖
- 建議尺寸：1200 x 630 px
- 描述：主視覺圖呈現 Docker 容器化概念。畫面中央是 Docker 的鯨魚標誌，鯨魚背上載著多個貨櫃（代表容器）。旁邊有一台電腦顯示 localhost:8080。背景有雲朵元素，暗示容器可以在任何地方運行。整體使用 Docker 的藍色品牌色，風格現代科技感。
- Slug：localhost-docker-hero

插圖 2：localhost-docker-install
- 用途：Docker Desktop 安裝確認
- 建議尺寸：1000 x 500 px
- 描述：Docker Desktop 應用程式的截圖。顯示 Docker Desktop 的主介面，左側選單、中央的容器列表區域、右上角的設定按鈕。狀態列顯示 Docker 正在運行（綠色圖示）。旁邊附上終端機視窗，顯示 docker --version 的成功輸出。整體風格清晰，標註「確認安裝成功」。
- Slug：localhost-docker-install

插圖 3：localhost-docker-compose
- 用途：多容器架構說明
- 建議尺寸：1000 x 600 px
- 描述：架構圖呈現 docker-compose 管理的多容器環境。中央是 Docker Compose 區塊，內含三個容器方塊：Node.js（Port 3000）、MySQL（Port 3306）、Redis（Port 6379）。容器間用虛線連接表示內部通訊。左側是主機，箭頭指向各 Port 表示映射關係。底部有 Volume 圖示連接到 MySQL。整體風格清晰，展示容器間的關係。
- Slug：localhost-docker-compose

插圖 4：localhost-docker-learning-path
- 用途：Docker 學習路徑
- 建議尺寸：1000 x 600 px
- 描述：學習路線圖以階梯形式呈現 Docker 學習路徑。從下到上分為四個階段：1. 基礎（Docker 概念、基本指令）2. 進階（docker-compose、Dockerfile）3. 網路（容器通訊、Port 映射）4. 部署（CI/CD、雲端部署）。每個階段配有簡單圖示，當前文章涵蓋的範圍用顏色標示。整體風格清晰，幫助讀者規劃學習。
- Slug：localhost-docker-learning-path

Localhost Docker 教學｜容器化開發環境設定指南

引言：現代開發者的必備工具

要點一－為什麼用 Docker 做本機開發？（優勢說明）

Docker 解決的痛點

Docker vs 傳統開發環境

什麼時候該用 Docker？

要點二－Docker 基礎概念快速入門

核心概念

概念關係圖

要點三－Docker Desktop 安裝與設定

Windows 安裝

macOS 安裝

Linux 安裝

要點四－第一個 Docker 容器：Nginx

啟動 Nginx 容器

存取你的網站

常用 Docker 指令

使用自己的網頁

要點五－docker-compose 多容器環境

範例：Node.js + MySQL + Redis

啟動所有服務

存取各服務

要點六－Docker 與 Localhost 的網路問題

問題一：容器內的 localhost 不是主機的 localhost

問題二：容器間的通訊

問題三：Port 映射

問題四：0.0.0.0 vs 127.0.0.1

🚀 想把 Docker 專案部署到雲端？

VibeFix 如何幫助你？

💡 為什麼選擇 VibeFix？

👉 立即點擊了解 VibeFix 專業部署服務！

要點七－常見問題排解

問題一：Port 已被佔用

問題二：容器無法連網

問題三：Volume 權限問題

問題四：映像檔太大

FAQ

要點八－進階：開發與生產環境分離

建立不同的 Compose 檔案

使用方式

環境變數管理

結論：擁抱容器化開發

本文重點回顧

下一步學習建議

相關文章

參考資料

圖片描述清單

VibeFix

這篇文章有幫到你嗎？