使用 Docker 的展示

1.1 問題設定

讓我們來創建一個小型的多容器應用程序，並逐步分析整個開發過程：從問題的設定到展示最終的產品。

目標： 創建一個多容器應用程序來管理任務，允許用戶創建、編輯、刪除任務並將其分配給其他用戶。該應用程序將由三個主要組件組成：基於 ReactJS 的前端、基於 Python (Flask) 的後端以及 PostgreSQL 數據庫。

主要任務：

1. 確定應用程序每個組件的功能需求。
2. 選擇使用的技術和工具。
3. 準備開發環境。

1.2 定義功能需求

任務管理應用的功能需求：

1. 用戶註冊和認證：
   • 用戶可以註冊到系統。
   • 用戶可以在系統中進行認證。
2. 任務管理：
   • 用戶可以創建任務。
   • 用戶可以編輯任務。
   • 用戶可以刪除任務。
   • 用戶可以查看任務列表。
   • 用戶可以將任務分配給其他用戶。
3. 任務檢視與篩選：
   • 用戶可以根據狀態篩選任務（已完成/未完成）。
   • 用戶可以查看分配給其他用戶的任務。

1.3 定義使用的技術和工具

為了實現這個應用程式，我們會使用以下的技術和工具：

1. Frontend:
   • ReactJS: 用於建立使用者介面的函式庫。
   • Axios: 用於執行 HTTP 請求的函式庫。
2. Backend:
   • Python: 用於開發伺服器端的程式語言。
   • Flask: 用於建立 REST API 的 Web 框架。
   • SQLAlchemy: 用於與資料庫互動的 ORM。
3. Database:
   • PostgreSQL: 用於儲存用戶和任務資訊的關聯式資料庫。
4. 容器化和編排:
   • Docker: 用於應用程式容器化的平台。
   • Docker Compose: 用於管理多容器應用程式的工具。

1.4 開發環境的準備

為了成功完成專案，需要配置開發環境並確保所有必要的工具已安裝。

準備環境的步驟：

1. 安裝 Docker：
   • 如果你還沒有安裝，回到第一級別的第4節講座或者參考 Docker 官方網站上的指導。
2. 安裝 Docker Compose：
   • 如果 Docker Compose 還沒有安裝，參考第四級別的第2節講座或者參考 Docker Compose 的官方網站。
3. 建立項目結構：
   • 創建一個專案的目錄以及針對每個服務的主要子目錄：

mkdir task_management_app
cd task_management_app
mkdir frontend backend database
        

1. 初始化項目：
   • 在 frontend 目錄內初始化新的 ReactJS 專案：

cd frontend
npx create-react-app .
cd ..
        

• 在 backend 目錄內創建 Python/Flask 應用的結構：

cd backend
mkdir app
touch app/__init__.py
touch app/models.py
touch app/routes.py
touch run.py
touch requirements.txt
cd ..
        

• 在 database 目錄內創建 PostgreSQL 的 Dockerfile（如有必要）：

cd database
touch Dockerfile
cd ..
        

1.5 文件範例內容：

文件 backend/app/__init__.py：

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://taskuser:taskpassword@database:5432/taskdb'
db = SQLAlchemy(app)

from app import routes
    

文件 backend/app/models.py：

from app import db

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    tasks = db.relationship('Task', backref='owner', lazy=True)

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(120), nullable=False)
    description = db.Column(db.Text, nullable=True)
    owner_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
    

文件 backend/app/routes.py：

from app import app

@app.route('/')
def index():
    return "你好，任務管理應用程式！"
    

文件 backend/run.py：

from app import app

if __name__ == '__main__':
    app.run(host='0.0.0.0')
    

文件 backend/requirements.txt：

Flask
Flask-SQLAlchemy
psycopg2-binary