写点什么

海纳百川无所不容,Win10 环境下使用 Docker 容器式部署前后端分离项目 Django+Vue.js

发布于: 2020 年 12 月 28 日
海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js

随着现代化产品研发的不断推进,我们会发现,几乎每个产品线都会包含功能各异的服务,而且服务与服务之间存在也会存在着错综复杂的依赖和被依赖关系,这就会带来一个世界性难题,项目部署的时候需要运维来手动配制服务之间通信的协议和地址,稍有不慎就会导致服务异常,同时如果服务器因为坏道或者其他原因导致更换物理机,重新部署新环境的成本也会非常之高。因此,我们就会寄希望于 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/mydjango https://gitee.com/QiHanXiBei/myvue


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


发布于: 2020 年 12 月 28 日阅读数: 28
用户头像

专注技术,凝聚意志,解决问题 v3u.cn 2020.12.21 加入

还未添加个人简介

评论

发布
暂无评论
海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js