原文轉(zhuǎn)載自「劉悅的技術(shù)博客」https://v3u.cn/a_id_179
隨著現(xiàn)代化產(chǎn)品研發(fā)的不斷推進(jìn)册倒，我們會發(fā)現(xiàn)蚓挤，幾乎每個產(chǎn)品線都會包含功能各異的服務(wù)，而且服務(wù)與服務(wù)之間存在也會存在著錯綜復(fù)雜的依賴和被依賴關(guān)系驻子，這就會帶來一個世界性難題灿意，項目部署的時候需要運(yùn)維來手動配制服務(wù)之間通信的協(xié)議和地址，稍有不慎就會導(dǎo)致服務(wù)異常崇呵，同時如果服務(wù)器因為壞道或者其他原因?qū)е赂鼡Q物理機(jī)缤剧，重新部署新環(huán)境的成本也會非常之高。因此域慷，我們就會寄希望于Docker這種的容器技術(shù)可以讓我們構(gòu)建產(chǎn)品所需要的所有的服務(wù)能夠迅速快捷的重新部署荒辕，并且可以根據(jù)需求做橫向擴(kuò)展，且能夠保證穩(wěn)定的容災(zāi)性芒粹，在出現(xiàn)問題的時候可以利用守護(hù)進(jìn)程自動重啟或者啟動容災(zāi)備份。
本次我們將在Win10環(huán)境下利用Docker容器技術(shù)來對前后端分離項目Django+Vue.js進(jìn)行打包大溜，分別定制化對應(yīng)的項目鏡像化漆，應(yīng)對快速部署以及高擴(kuò)展的需求。
首先當(dāng)然是安裝Docker钦奋，可以參照這篇視頻攻略：win10安裝配置Docker并更換國內(nèi)源座云。
隨后在宿主機(jī)安裝gunicorn，容器內(nèi)我們用異步的方式來啟動Django
pip3 isntall gunicorn gevent
Django項目配置settings.py對應(yīng)的應(yīng)用：
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders',
'rest_framework',
'myapp',
'dwebsocket',
'gunicorn'
]
然后在Django項目的根目錄編寫gunicorn的配置文件：gunicorn.conf.py
import multiprocessing
bind = "0.0.0.0:8000" #綁定的ip與端口
workers = 1 #進(jìn)程數(shù)
這里注意一點付材，ip必須是0.0.0.0朦拖，不要寫成127.0.0.1,否則外部環(huán)境會訪問不到容器內(nèi)的服務(wù)，接下來在項目的根目錄編寫好依賴列表：requirements.txt
Django==2.0.4
django-cors-headers==2.5.3
djangorestframework==3.9.3
celery==4.4.2
dwebsocket==0.5.12
redis==3.3.11
pymongo==3.8.0
PyMySQL
Pillow
pyjwt
pycryptodome
selenium
qiniu
gunicorn
gevent
這里需要注意的是厌衔，某些依賴的庫最好用==標(biāo)注出小版本璧帝，因為一會在容器內(nèi)通過pip安裝的時候，系統(tǒng)有可能會自動幫你安裝最新版導(dǎo)致一些依賴報錯富寿。
下面就是老套路睬隶，在根目錄編寫DockerFile文件：
FROM python:3.7
WORKDIR /Project/mydjango
COPY requirements.txt ./
RUN pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
COPY . .
ENV LANG C.UTF-8
CMD ["gunicorn", "mydjango.wsgi:application","-c","./gunicorn.conf.py"]
本次的基礎(chǔ)鏡像我們選擇3.7，畢竟2020年了页徐，與時俱進(jìn)還是很必要的苏潜。
ok，萬事俱備变勇，運(yùn)行命令對項目進(jìn)行打包：
liuyue@DESKTOP-NVU6CCV MINGW32 ~/www/mydjango (master)
$ docker build -t 'mydjango' .
Sending build context to Docker daemon 17.57MB
Step 1/7 : FROM python:3.7
---> 5b86e11778a2
Step 2/7 : WORKDIR /Project/mydjango
---> Using cache
---> 72ebab5770a2
Step 3/7 : COPY requirements.txt ./
---> Using cache
---> b888452d1cad
Step 4/7 : RUN pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
---> Using cache
---> a576113cff5a
Step 5/7 : COPY . .
---> 5c5247d5a743
Step 6/7 : ENV LANG C.UTF-8
---> Running in af84623622a6
Removing intermediate container af84623622a6
---> f3d876487dab
Step 7/7 : CMD ["gunicorn", "mydjango.wsgi:application","-c","./gunicorn.conf.py"]
---> Running in d9392807ae77
Removing intermediate container d9392807ae77
---> c3ffb74ae263
Successfully built c3ffb74ae263
Successfully tagged mydjango:latest
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.
這里注意一點就是要進(jìn)入到項目的目錄下執(zhí)行
docker build -t 'mydjango' .
這里我的項目目錄是mydjango恤左。
第一次打包編譯的時候，可能時間會長一點，耐心等一會就可以了飞袋，如果中途遇到網(wǎng)絡(luò)錯誤導(dǎo)致的失敗戳气，反復(fù)執(zhí)行打包命令即可，此時運(yùn)行命令：
docker images
可以看到編譯好的鏡像大概有1g左右：
liuyue@DESKTOP-NVU6CCV MINGW32 ~
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
mydjango latest c3ffb74ae263 24 hours ago 1.04GB
隨后啟動鏡像服務(wù)：
docker run -it --rm -p 5000:8000 mydjango
這里我們用端口映射技術(shù)將宿主機(jī)的5000端口映射到容器內(nèi)的8000端口授嘀，訪問Django服務(wù)物咳，http://容器ip:5000
后端搞定，接下來輪到我們的前端服務(wù)vue.js了蹄皱，首先打開vue項目的打包配置文件config/index.js:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
將打包目錄改成相對路徑览闰，同時注意路由的配置，如果曾經(jīng)修改為history模式記得改回hash：
export default new Router({
routes:routes,
//mode:'history' /*hash*/
})
準(zhǔn)備工作完畢巷折，在vue的項目根目錄下編寫Dockerfile：
FROM node:lts-alpine
# install simple http server for serving static content
RUN npm install -g http-server
# make the 'app' folder the current working directory
WORKDIR /app
# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./
# install project dependencies
RUN npm install
# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]
這里我們選擇體積更小的alpine鏡像压鉴。
隨后進(jìn)入項目的根目錄，執(zhí)行打包命令：
docker build -t myvue .
這里我的前端目錄是myvue
liuyue@DESKTOP-NVU6CCV MINGW32 ~/www/myvue (master)
$ docker build -t myvue .
Sending build context to Docker daemon 202.1MB
Step 1/9 : FROM node:lts-alpine
lts-alpine: Pulling from library/node
cbdbe7a5bc2a: Pull complete
4c504479294d: Pull complete
1e557b93d557: Pull complete
227291017118: Pull complete
Digest: sha256:5a940b79d5655cc688cfb319bd4d0f18565bc732ae19fab6106daaa72aeb7a63
Removing intermediate container 5317abe3649b
---> 2ddb8a0e3225
Successfully built 2ddb8a0e3225
Successfully tagged myvue:latest
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.
系統(tǒng)會自動根據(jù)腳本進(jìn)行安裝依賴锻拘，第一次也需要等待一段時間油吭。
打包完成后，執(zhí)行：
docker images
可以看到前端鏡像的體積要小一點：
liuyue@DESKTOP-NVU6CCV MINGW32 ~
$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
myvue latest 917d1c69f10f 23 hours ago 539MB
運(yùn)行前端服務(wù)：
docker run -it --rm -p 8081:8080 myvue
同樣使用端口映射署拟，這次宿主機(jī)使用8081婉宰，當(dāng)然了，如果需要可以根據(jù)喜好進(jìn)行修改推穷。
訪問Vue.js服務(wù)心包，http://容器ip:8081
至此，通過Docker的容器技術(shù)馒铃，我們就將前后端兩大服務(wù)都分別部署好了蟹腾，過程并不復(fù)雜，但是意義卻是里程碑式的区宇，攜此兩大鏡像娃殖，左牽Django，右擎Vue.js议谷，如果哪天需要橫向擴(kuò)容炉爆，只需短短幾分鐘，我們就可以在新服務(wù)器上做到“拎包入住”卧晓，靈活方便叶洞。最后奉上項目文件，與君共勉：https://gitee.com/QiHanXiBei/mydjango https://gitee.com/QiHanXiBei/myvue
原文轉(zhuǎn)載自「劉悅的技術(shù)博客」 https://v3u.cn/a_id_179
