关于docker:海纳百川无所不容Win10环境下使用Docker容器式部署前后端分离项目DjangoVuejs

57次阅读

共计 5591 个字符，预计需要花费 14 分钟才能阅读完成。

原文转载自「刘悦的技术博客」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

正文完
docker
发表至： docker
2020-11-17
 0
关于docker:ubuntu1804在docker容器中编译opencv320
关于docker:Docker-registry-GC-原理分析
关于docker:第四篇Windows-Docker-安装之直播商城-b2b2c电子商务技术总结
关于docker:docker使用系列之6docker常用命令