1. 背景: 本機win10上,後端django框架代碼與前端vue框架代碼聯調經過。html
2. 目的: 在centos7系統服務器上使用docker容器部署該項目。前端
3. 方案一:僅使用基礎dockerfile逐步搭建部署;vue
方案二: 使用compose配置應用程序須要的全部服務,一鍵部署運行;python
4. 準備文件結構以下:1爲後端django項目代碼,2爲前端build後的代碼;mysql
1、腳本文件準備過程linux
1. django目錄下test_platform 工程項目下:nginx
- 需修改/test_platform/settings.py 中 DEBUG=False,正式環境需關閉debug,避免信息泄露;
- 需修改/test_platform/settings.py 中 DATABASES 中 'host':'db',db爲數據庫容器的名稱,同一網絡下,可經過容器名相互訪問;
- 需修改/test_platform/settings.py 中 DATABASES 中 'name':'test',test爲啓動數據庫容器db時指定的數據庫名稱;
- 新建static文件夾====>在/test_platform/settings.py 最後一行增長STATIC_ROOT = os.path.join(BASE_DIR, "static")===>執行python manage.py collectstatic命令,收集後端的靜態文件 admin、rest_framework、drf-yasg===>將這三個文件夾遷移到 nginx/dist/static下;
2.nginx目錄下前端工程:web
- webstorm中修改vue框架前端代碼 pulic/index.html : 增長
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data: ; style-src 'self' 'unsafe-inline' at.alicdn.com fonts.googleapis.com; font-src 'self' 'unsafe-inline' at.alicdn.com fonts.gstatic.com data: ; default-src 'self' 120.26.53.205:*;"> # 120.26.53.205爲雲服務器地址
- webstorm中修改vue框架前端代碼 src/api/api.js :
// let host = 'http://127.0.0.1:8000'; let host = 'http://120.26.53.205:8000';
- 修改完後,進入項目根目錄下package.json, 點擊 "build": "vue-cli-service build"左側的運行按鈕 ,或者使用命令行 npm run bulid 進行打包,打包完成後生成dist文件夾,將此文件夾複製到 nginx目錄下。
2、dockerfile 方式部署sql
django下dockerfile:vue-cli
FROM python:3-alpine LABEL maintainer='100@qq.com' LABEL description='Deploying Django project' WORKDIR /usr/src/app COPY ./test_platform ./test_platform/ COPY ./gunicorn_config.py ./configs/ COPY ./docker-entrypoint.sh /entrypoint.sh WORKDIR test_platform/ RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories && \ apk upgrade && \ apk add --allow-untrusted build-base mariadb-connector-c-dev curl iputils && \ apk update && apk upgrade && \ pip install --no-cache-dir -i https://pypi.douban.com/simple -r requirements.txt && \ pip install -i https://pypi.douban.com/simple gunicorn && \ apk add ca-certificates bash && \ rm -rf /var/cache/apk/* && \ chmod 777 /entrypoint.sh VOLUME /usr/src/app/logs/ VOLUME /usr/src/app/test_platform/ EXPOSE 8000 # CMD ["/usr/local/bin/gunicorn", "-c", "/usr/src/app/configs/gunicorn_config.py", "test_platform.wsgi"] ENTRYPOINT ["/entrypoint.sh"]
nginx下dockerfile:
FROM alpine-base:latest LABEL maintainer='100@qq.com' LABEL description='Install nginx' ENV TERM dumb RUN apk add --update \ supervisor nginx && \ rm -rf /var/cache/apk/* && \ mkdir /tmp/nginx && \ mkdir -p /var/www/html && \ chown -R nginx:nginx /var/www/html COPY dist/ /var/www/html/ COPY configs/default.conf /etc/nginx/conf.d/ COPY configs/nginx.conf /etc/nginx/nginx.conf COPY configs/supervisord.conf /etc/supervisord.conf VOLUME /var/log/nginx/ EXPOSE 80 8000 443 CMD ["supervisord"]
經過命令行逐步部署:
-
建立django_app_net網絡:docker network create django_app_net
-
啓動mariadb容器:docker run --name db -v mysql_db:/var/lib/mysql --restart=always -e MYSQL_ROOT_PASSWORD=123456 -e MYSQL_DATABASE=test -d --network django_app_net mariadb --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
-
構建nginx鏡像: cd ./nginx docker build -t qqhub/test-nginx .
- 構建django_app鏡像:cd ./django_app_docker docker build -t qqhub/test-django .
-
啓動django_app容器:docker run --name django_app -v logs:/usr/src/app/logs/ -v django_code:/usr/src/app/test_platform/ --restart=always -d --network django_app_net qqhub/test-django
-
啓動nginx容器: docker run --name web -v logs:/var/log/nginx/ -p 8866:80 -p 8000:8000 --restart=always -d --network django_app_net qqhub/test-nginx
- 向數據庫導入數據:cd ./datas docker exec -i docker-platform_db_1 sh -c 'exec mysql -uroot -p"123456" -A test' < 01_tb_projects.sql
至此,部署完成,docker ps -a 查看一下各容器狀態。若是碰到問題,嘗試刪除對應的容器、數據卷、鏡像,從新構建並啓動。
3、Compose方式部署
Compose 使用的三個步驟:
-
使用 Dockerfile 定義應用程序的環境。
-
使用 docker-compose.yml 定義構成應用程序的服務,這樣它們能夠在隔離環境中一塊兒運行。
-
最後,執行 docker-compose up 命令來啓動並運行整個應用程序。
# 指定版本信息 version: '3' # 指定服務(啓動的容器) services: # 服務名: 項目根目錄小寫_當前指定的服務名_服務個數的序號 # deploydjango_db_1 db: # 指定鏡像的名稱 # 若是本地有這個鏡像, 會直接使用, 若是沒有, 會去Docker hub中pull到本地 image: mariadb # 覆蓋默認的CMD, 指定在運行容器時,(docker run), 須要運行的命令或者參數 command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci # 指定目錄映射 volumes: - mysql_db:/var/lib/mysql - /etc/timezone:/etc/timezone - /etc/localtime:/etc/localtime # 指定容器重啓的策略 restart: always # 指定環境變量 environment: MYSQL_ROOT_PASSWORD: 123456 MYSQL_DATABASE: test # ports: # - "13306:3306" django_app: # 指定容器的啓動依賴,只有當db容器啓動以後, 再啓動 django_app 容器 depends_on: - db # 指定Dockerfile所在的路徑 build: ./django # 指定構建的鏡像名 image: qqhub/test-django restart: always volumes: - logs:/usr/src/app/logs/ - django_code:/usr/src/app/test_platform/ - /etc/timezone:/etc/timezone - /etc/localtime:/etc/localtime web: depends_on: - django_app build: ./nginx image: qqhub/test-nginx restart: always # 端口映射 ports: - "8866:80" - "8000:8000" volumes: - logs:/var/log/nginx/ - web:/var/www/html/ - /etc/timezone:/etc/timezone - /etc/localtime:/etc/localtime # 指定容器使用的數據卷 volumes: # deploydjango_mysql_d # 數據卷名爲: 項目根目錄小寫_指定的數據卷名 mysql_db: django_code: logs: web:
進入docker-compose所在目錄,執行命令:docker-compose up -d,便可等待部署完成。而後進入數據庫容器,導入sql語句。
4、檢驗部署是否成功
瀏覽器訪問120.26.53.205:8866,查看前端頁面,訪問120.26.53.205:8000/docs/,查看後端接口。均展現無誤,使用正常,即部署成功。