随着现代化产品研发的不断推进，我们会发现，几乎每个产品线都会包含功能各异的服务，而且服务与服务之间存在也会存在着错综复杂的依赖和被依赖关系，这就会带来一个世界性难题，项目部署的时候需要运维来手动配制服务之间通信的协议和地址，稍有不慎就会导致服务异常，同时如果服务器因为坏道或者其他原因导致更换物理机，重新部署新环境的成本也会非常之高。因此，我们就会寄希望于 Docker 这种的容器技术可以让我们构建产品所需要的所有的服务能够迅速快捷的重新部署，并且可以根据需求做横向扩展，且能够保证稳定的容灾性，在出现问题的时候可以利用守护进程自动重启或者启动容灾备份。
本次我们将在 Win10 环境下利用 Docker 容器技术来对前后端分离项目 Django+Vue.js 进行打包，分别定制化对应的项目镜像，应对快速部署以及高扩展的需求。
首先当然是安装 Docker，可以参照这篇视频攻略：win10安装配置Docker并更换国内源。
随后在宿主机安装 gunicorn，容器内我们用异步的方式来启动 Django
pip3 isntall gunicorn gevent
复制代码
Django 项目配置 settings.py 对应的应用：
# 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 #进程数
复制代码
这里注意一点，ip 必须是 0.0.0.0，不要写成 127.0.0.1,否则外部环境会访问不到容器内的服务，接下来在项目的根目录编写好依赖列表：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
复制代码
这里需要注意的是，某些依赖的库最好用==标注出小版本，因为一会在容器内通过 pip 安装的时候，系统有可能会自动帮你安装最新版导致一些依赖报错。
下面就是老套路，在根目录编写 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"]
复制代码
本次的基础镜像我们选择 3.7，毕竟 2020 年了，与时俱进还是很必要的。
ok，万事俱备，运行命令对项目进行打包：
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.
复制代码
这里注意一点就是要进入到项目的目录下执行
docker build -t 'mydjango' .
复制代码
这里我的项目目录是 mydjango。
第一次打包编译的时候，可能时间会长一点，耐心等一会就可以了，如果中途遇到网络错误导致的失败，反复执行打包命令即可，此时运行命令：
可以看到编译好的镜像大概有 1g 左右：
liuyue@DESKTOP-NVU6CCV MINGW32 ~ $ docker images REPOSITORY TAG IMAGE ID CREATED SIZE mydjango latest c3ffb74ae263 24 hours ago 1.04GB
复制代码
随后启动镜像服务：
docker run -it --rm -p 5000:8000 mydjango
复制代码
这里我们用端口映射技术将宿主机的 5000 端口映射到容器内的 8000 端口，访问 Django 服务，http://容器 ip:5000
后端搞定，接下来轮到我们的前端服务 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 } }
复制代码
将打包目录改成相对路径，同时注意路由的配置，如果曾经修改为 history 模式记得改回 hash：
export default new Router({ routes:routes, //mode:'history' /*hash*/ })
复制代码
准备工作完毕，在 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 镜像。
随后进入项目的根目录，执行打包命令：
这里我的前端目录是 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.
复制代码
系统会自动根据脚本进行安装依赖，第一次也需要等待一段时间。
打包完成后，执行：
可以看到前端镜像的体积要小一点：
liuyue@DESKTOP-NVU6CCV MINGW32 ~ $ docker images REPOSITORY TAG IMAGE ID CREATED SIZE myvue latest 917d1c69f10f 23 hours ago 539MB
复制代码
运行前端服务：
docker run -it --rm -p 8081:8080 myvue
复制代码
同样使用端口映射，这次宿主机使用 8081，当然了，如果需要可以根据喜好进行修改。
访问 Vue.js 服务，http://容器 ip:8081
至此，通过 Docker 的容器技术，我们就将前后端两大服务都分别部署好了，过程并不复杂，但是意义却是里程碑式的，携此两大镜像，左牵 Django，右擎 Vue.js，如果哪天需要横向扩容，只需短短几分钟，我们就可以在新服务器上做到“拎包入住”，灵活方便。最后奉上项目文件，与君共勉：https://gitee.com/QiHanXiBei/mydjango https://gitee.com/QiHanXiBei/myvue
原文转载自「刘悦的技术博客」 https://v3u.cn/aid179
评论