使用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/ 能夠查看最終起起來的效果。

代碼地址

github.com/will4906/do…

參考連接

• stackoverflow.com/questions/3…
• docs.docker.com/v17.09/get-…
• www.cnblogs.com/yanshicheng…
• cloud.tencent.com/developer/a…