Docker的简介

1.docker定义:docker是一个用来装应用的容器，就像杯子可以装水，笔筒可以装笔，书包可以放书一样。你可以把“Hello World！”放到docker中，也可以把网站放到docker中，你可以把任何你想到的程序放到docker中。

2.docker思想：

（1）集装箱

（2）标准化 （运输方式、存储方式、API接口）

运输方式（docker鲸鱼负责运输）

存储方式（不用关心存在哪，存在哪个盘）

API接口的标准化：Docker提供了一系列的RESTFUL API接口，包含了对Docker也就是对应用的控制，其中包括停止 查看 删除等等

（3）隔离：最底层的技术实际上是一种linux的一种内核的限制机制，叫做LXC，LXC是一种轻量级的容器虚拟化技术，最大效率的隔离了进程和资源，通过cgroup namespace等限制隔离进程组所使用的物理资源，如CPU I/O Memory等等

3、docker解决的问题

（1）docker解决了运行环境不一致带来的问题

（2）docker隔离性，每台服务器相互隔离，互不影响，可以保证自己运行的程序不受其他程序的影响。

（3）一键化部署服务器（例如双11，服务器数量。。。），docker的标准化让快速扩展，弹性伸缩变得简单。

本次我们将在Win10环境下利用Docker容器技术来对前后端分离项目Django+Vue.js进行打包，分别定制化对应的项目镜像，应对快速部署以及高扩展的需求

Dockerfile部署Web项目

Django项目配置

先在宿主机上安装gunicorn,容器内采用异步的方式来启动Django

1
pip3 install gunicorn gevent

settings.py对应的应用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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', # 外部支持webscoket
    'gunicorn'
]

然后在项目的根目录下编写gunicorn的配置文件.py

1
2
3
4
import multiprocessing

bind = "0.0.0.0:8000"   #绑定的ip与端口
workers = 1                #进程数

接下来导入项目依赖的包

在项目部署到服务器上的时候，我们有时候不得不面临需要将项目依赖的包一个个再安装的窘境。

在项目的根目录中使用终端执行命令

1
pip freeze > requirements.txt 	#requirements.txt只是个名字可以随便起，一般默认为requirements.txt

会在项目的根目录中得到一个requirements.text文件记录着所有的依赖包。

在这里插入图片描述

编写Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
FROM python:3.7					   # 拉取python基础镜像
WORKDIR /Project/mydjango			# 当前工作的项目

COPY ./nltk_data  /root/nltk_data    # copy需要两个参数 中间需要两个空格

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"]			#容器启动时所要执行的命令

编译docker镜像

1
2
# 在docker中mydjango根目录下执行命令
docker build -t 'mydjango' .

开始打包;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
86153@steven MINGW64 /d/shixun1/wpro/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.

 > 第一次打包编译的时候，可能中途遇到网络错误导致的失败，反复执行打包命令即可;

打包完成之后，运行命令：

1
docker images

可以看到

1
2
3
4
5
6
7
8
86153@steven MINGW64 /d/shixun1/wpro/mydjango (master)

$ docker images

REPOSITORY                 TAG                 IMAGE ID            CREATED             SIZE

mydjango                   latest              3aa7fca13b2a        14 hours ago        2.87GB

运行容器

1
docker run -it --rm -p 8081:8000 3aa7f		# 3aa7f为mydjango的容器id

这里我们用端口映射技术将宿主机的8001端口映射到容器内的8000端口，

访问

访问http://容器ip:8001

在这里插入图片描述

vue相关配置

首先打开vue项目的打包配置文件config/index.js: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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：

hash利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。 

1
2
3
4
export default new Router({
  routes:routes,
  //mode:'history'   /*hash*/
})

编写Dockerfile

在项目的根目录下编写Dockerfile文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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" ]

编译docker镜像

进入项目的根目录，执行打包命令:

1
2
# 在docker中myvue根目录下执行命令
docker build -t myvue .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
86153@steven MINGW64 /d/shixun1/wpro/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.

系统会自动根据脚本进行安装依赖，第一次也需要等待一段时间。

打包完成后，执行：

1
docker images

可以看到前端镜像的体积要小一点:

1
2
3
4
86153@steven MINGW64 /d/shixun1/wpro/myvue (master)
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
myvue               latest              917d1c69f10f        23 hours ago        539MB

运行容器

1
docker run -it --rm -p 8082:8080 myvue

访问

访问http://容器ip:8082即可