原文转载自「刘悦的技术博客」https://v3u.cn/a_id_179

随着现代化产品研发的一直推动，咱们会发现，简直每个产品线都会蕴含性能各异的服务，而且服务与服务之间存在也会存在着盘根错节的依赖和被依赖关系，这就会带来一个世界性难题，我的项目部署的时候须要运维来手动配制服务之间通信的协定和地址，稍有不慎就会导致服务异样，同时如果服务器因为坏道或者其余起因导致更换物理机，重新部署新环境的老本也会十分之高。因而，咱们就会寄希望于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。

第一次打包编译的时候，可能工夫会长一点，急躁等一会就能够了，如果中途遇到网络谬误导致的失败，重复执行打包命令即可，此时运行命令：

docker images

能够看到编译好的镜像大略有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镜像。

随后进入我的项目的根目录，执行打包命令：

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.

零碎会主动依据脚本进行装置依赖，第一次也须要期待一段时间。

打包实现后，执行：

docker images

能够看到前端镜像的体积要小一点：

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/... https://gitee.com/QiHanXiBei/myvue

原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_179