使用docker-compose搭建django+vue工程

隨着虛擬化技術的發展，越來越多的web工程採用docker進行部署運維。我們嘗試使用docker-compose編排一個後端基於django，前端基於vue，數據庫爲postgresql並使用nginx進行反向代理的web工程。

工程準備

Docker

• 安裝Docker
• 安裝docker-compose

django

1. 在python3.7的環境下創建 django-admin startproject dockerdemo
2. 修改settings.py文件
   • 修改 DEBUG=False
   • ALLOWED_HOSTS = ['127.0.0.1', 'web']
   • 將靜態文件收集路徑添加進 STATIC_ROOT，筆者設置爲static
   • 添加 STATICFILES_DIRS，此項配置後 django 的 collectstatic 會在此路徑下收集靜態文件到 STATIC_ROOT 的路徑中去。
   • 另外，靜態文件的處理筆者採用的是 whitenoise 的方案進行處理，所以需要在中間件中配置一下whitenoise的處理中間件。

     'django.middleware.security.SecurityMiddleware',
     'whitenoise.middleware.WhiteNoiseMiddleware',
     

   • 同時設置 STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
   • 修改數據庫信息（可選），針對實際使用的數據庫進行配置，也可以採用django默認的sqlite，筆者此處演示了postgresql的簡單配置
   • TEMPLATES下的DIRS配置爲 os.path.join(BASE_DIR, 'web', 'dist')
3. 配置views.py和urls.py將首頁設爲vue的index.html

vue

1. 使用vue-cli3創建了一個簡單的vue工程
2. 配置 npm run build 的靜態文件目錄到 dist/static 中

nginx

準備nginx的配置文件，進行端口轉發的設置。

鏡像和編排

我們先確定一下部署一個web工程所需要的環節。在這裏筆者繪製了一張流程圖。

按照流程圖的順序，我們編寫一下Dockerfile和docker-compose.yml

數據庫

數據庫需要先準備一下web工程使用的用戶和數據庫，這裏涉及到一個點，就是如何初始化數據庫的問題。這裏以postgresql舉例。

官方文檔中提供了兩種示例，一種是配置環境變量：

• POSTGRES_DB
• POSTGRES_USER
• POSTGRES_PASSWORD

另一種是將初始化腳本拷貝進/docker-entrypoint-initdb.d/ 中，鏡像在初始化的時候會執行文件夾下的所有腳本，我們可以在腳本中創建數據庫和用戶。這裏給出腳本的一種方式。

#!/bin/bash
set -e

psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" <<-EOSQL
	CREATE USER $DATABASE_USER;
	CREATE DATABASE $DATABASE_NAME;
	GRANT ALL PRIVILEGES ON DATABASE $DATABASE_NAME TO $DATABASE_USER;
EOSQL

需要注意的是，初始化操作盡在第一次build的時候又進行初始化。以後如果終止了docker-compose或者使用 docker-compose stop指令之後再啓動是不重新初始化的。只有在 docker-compose down命令執行過後，再執行啓動命令纔會進行初始化。

web

我們的web工程在一個Dockerfile分爲構建和運行兩部分內容。分別使用node:8鏡像作爲前端構建的基礎鏡像和python:3.7作爲django工程運行的基礎鏡像。比較有意思的點在於一份Dockerfile是可以分階段構建的，也就是可以編寫多個FROM並且用as給一個別名，後面的鏡像可以通過這個別名獲取該鏡像的一些內容，比如COPY --from等方式。

前端

前端內容比較簡單，就是將代碼拷到工作目錄下，配置一下淘寶的鏡像代理，然後執行 npm run build 構建一下前端靜態文件即可。

django

pip安裝一下依賴，另外在安裝一下gunicorn。由於如果在windows環境下進行開發，gunicorn是無法安裝的，所以我們這裏單獨放進Dockerfile中進行安裝。使用的鏡像是清華大學提供的鏡像地址。依賴安裝完成後，執行一下靜態文件的收集指令即可。

nginx

準備一份配置文件，監聽80端口並將接收到的請求全部轉發給django工程。筆者準備了比較簡單的一份配置文件。其他具體需求還需根據場景進行設置。

server {
    listen 80;
    server_name localhost;

    location / {
      proxy_pass http://web:8123;
    }
}

ignore

編寫 .dockerignore 文件忽略掉一些不需要打包的文件，如node_modules等。

docker-compose.yml

這份文件用來編排一個工程，主要內容是上面描述的web, nginx和postgres這3項。除此之外還有一些細節。

• nginx和postgres都需要將數據卷掛載到存放相應配置和數據的地方
• 數據庫的相關信息用環境變量來讀取，因此我們準備一份.env文件，並通過env_file指定讀取的環境變量文件。
• web中我們對command進行了一些設定，延遲8秒是爲了等待數據庫啓動完成。接着進行數據庫的數據遷移，最後用gunicorn進行啓動。
• 在鏡像中配置depends_on或者links可以達到利用服務名稱進行網絡通信的效果，另外depends_on還可以控制容器的啓動順序進行以來控制。

效果

訪問 http://localhost/ 或 http://localhost/admin/ 可以查看最終起起來的效果。

代碼地址

https://github.com/will4906/dockerdemo

參考鏈接

• https://stackoverflow.com/questions/33322103/multiple-froms-what-it-means
• https://docs.docker.com/v17.09/get-started/part2/#dockerfile
• https://www.cnblogs.com/yanshicheng/p/9452545.html
• https://cloud.tencent.com/developer/ask/81121