Django - 部署與測試

在完成開發後，將 Django 應用與 Vue 3 前端部署到線上環境是必須的一步。本節課程將教你如何部署應用到生產環境，同時進行測試，確保應用的穩定性與性能。

---

課程目標

1. 瞭解 Django 和 Vue 3 的部署步驟與最佳實踐。
2. 配置 Nginx 和 Gunicorn，將 Django 應用部署到伺服器。
3. 使用 CI/CD 流程自動化部署。
4. 進行基礎測試與壓力測試，驗證應用的穩定性。

---

課程內容

1. 部署 Django 後端

安裝必要套件

在伺服器環境中，安裝以下工具：

sudo apt update
sudo apt install python3-pip python3-venv nginx

設置虛擬環境

python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

遷移數據庫

python manage.py migrate

收集靜態文件

python manage.py collectstatic

安裝 Gunicorn

pip install gunicorn

啟動 Gunicorn：

gunicorn myproject.wsgi:application --bind 0.0.0.0:8000

---

2. 配置 Nginx

編輯 Nginx 配置檔：

sudo nano /etc/nginx/sites-available/myproject

配置內容如下：

server {
    listen 80;
    server_name your_domain.com;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /path/to/your/project;
    }

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

啟用配置：

sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled
sudo nginx -t
sudo systemctl restart nginx

---

3. 部署 Vue 3 前端

生成生產文件

在 Vue 專案目錄下運行：

npm run build

生成的靜態文件會存儲於 dist/ 資料夾。

設置 Nginx 提供前端服務

在 Nginx 配置中添加靜態文件服務：

server {
    listen 80;
    server_name your_frontend_domain.com;

    root /path/to/your/vue/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

重新啟動 Nginx：

sudo systemctl restart nginx

---

4. 測試應用

使用 pytest 測試 Django

安裝 pytest：

pip install pytest pytest-django

在 tests/ 資料夾中添加測試檔案，例如 test_models.py：

import pytest
from myapp.models import Post

@pytest.mark.django_db
def test_create_post():
    post = Post.objects.create(title="Test Post", content="Test Content")
    assert post.title == "Test Post"

執行測試：

pytest

使用 Cypress 測試 Vue 前端

安裝 Cypress：

npm install cypress --save-dev

運行測試：

npx cypress open

進行壓力測試

安裝 Apache Bench：

sudo apt install apache2-utils

測試 API：

ab -n 1000 -c 100 http://your_domain.com/api/posts/

---

5. 自動化部署 (CI/CD)

使用 GitHub Actions

創建 .github/workflows/deploy.yml：

name: Deploy to Production

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Python
        uses: actions/setup-python@v2
        with:
          python-version: 3.9

      - name: Install dependencies
        run: |
          python -m venv venv
          source venv/bin/activate
          pip install -r requirements.txt

      - name: Run tests
        run: pytest

      - name: Deploy to server
        run: |
          ssh user@server 'cd /path/to/project && git pull && source venv/bin/activate && pip install -r requirements.txt && python manage.py migrate && python manage.py collectstatic --noinput && sudo systemctl restart gunicorn'

---

課堂練習

1. 部署 Django 應用並確保 API 正常工作。
2. 部署 Vue 前端並測試與後端的交互功能。
3. 使用 pytest 和 Cypress 為後端與前端分別撰寫測試。

---

作業

1. 使用 Docker 容器化部署 Django 和 Vue 應用。
2. 添加 HTTPS 支援，為 Nginx 配置 SSL 憑證（建議使用 Let’s Encrypt）。
3. 使用 Jenkins 或 GitHub Actions 自動化部署流程。

---