使用 Docker 打造超溜的前端环境

为什么需要 Docker?

操作系统是自由的，你想用 Windows/Linux/Mac, 只要你用的习惯，能够高效率工作，无所谓什么系统。

然而问题就来了，大家的环境不一样。Unix 系系统基本无太大差别，Windows 就不一样了。

环境的差异会导致踩很多很多坑, 印象比较深刻的就是 sass 编译，在哪个还需要依赖 ruby 的年代，安装 gem 是不顺畅的，windows 格式编码格式不是 utf-8, 导致 sass 文件中有中文编译报错等等。

还有一些诸如文件监听，在 Windows 下需要 fallback，靠轮循监听变化。

在经过一系列的折腾之后，我们就尝试使用 Docker 来解决开发环境统一的问题。

构建一个通用的 Linux 镜像，里面包含了前端开发的基本环境，包括 python，nodejs 等等... 前端只要给定源码文件就行了。就这样暂时统一了开发环境，虽然最后我们统一使用 Unix 系统。

Docker 还有哪些场景

前后端不分离的项目

你作为一个前端，你是如何与 PHP 后端参与开发的？你需要搭建 PHP 环境吗？

我不搭建 PHP 开发环境，FTP 直接上传，就是这么简单粗暴，Docker 什么的，能吃吗 ∂？

如果你是这种开发模式，不是说 low，而是说效率低下。每次修改都要上传，盲人改代码。

所以你需要 Docker，配置好环境，一键启动，一键关闭，各开发人员相互独立，代码通过 git 同步，指向同一个数据库，修改代码立即见效，

单页面应用

前后端分离的情况下，单页面渲染一般使用nginx, Docker 同样配置 nginx，做静态页渲染和去除难看的#号(通过 404 重定向只 index.html, 把 404 的控制权，交还给前端)

这样你的路由http://example.com/#/home变成了http://example.com/home

甚至你可以作反向代理，消除跨域

http://example.com/api > http://api.server.com

服务端渲染

那么你更需要 Docker, 因为你需要 Node 环境，你需要负载均衡，你需要反向代理等等...

Node 后端

既然是后端，数据库你要吧？nginx 你要吧，Node 你要安装吧？

A 同事项目依赖了 postgres@9.6, 结果你项目依赖 postgres@10.1. 难道你叫他卸载了重新装一个?

如何应用 Docker

首先你得安装Docker 和 Docker Compose, 使用 Docker Compose来配置镜像.

配置最简单的 Node 环境

一个简单的项目结构如下

├── docker-compose.yml
└── index.js

// index.js
const http = require('http');const server = http.createServer((req, res) => {res.setHeader('Content-Type', 'text/html');res.setHeader('X-Foo', 'bar');res.writeHead(200, { 'Content-Type': 'text/plain' });res.end('ok');
});server.listen(3000);

# docker-compose.ymlversion: "3"
services:web:image: node:8-alpineuser: nodeworking_dir: /home/node/appenvironment:- PORT=3000volumes:- ./:/home/node/app # 将本地目录映射到容器内command: ["node", "index.js"] # 运行命令ports:- 3000:3000 # 本地端口:容器端口

运行命令启动

$ docker-compose up
Starting example_web_1 ... done
Attaching to example_web_1

现在 NodeJs 应用已经跑起来了，试着访问 http://localhost:3000

Node 的依赖包怎么办?

现在我们给项目添加依赖Koa，用 Koa 来搭建服务器.

这我们需要把node_modules和package.json打包进镜像

而官方的 node 镜像node:8-alpine是不安装依赖的，需要我们自定义一个镜像

创建一个 Dockerfile

# Dockerfile
FROM node:8-alpine# 设置工作目录
WORKDIR /home/node/app# 把package.json复制进镜像中
COPY ./package.json /home/node/app/package.json# 在镜像中安装依赖
RUN yarn --production

修改 docker-compose.yml

# docker-compose.ymlversion: "3"
services:web:build:context: .dockerfile: ./Dockerfileuser: nodeworking_dir: /home/node/appenvironment:- PORT=3000volumes:- ./index.js:/home/node/app/index.js # 将本地目录映射到容器内command: ["node", "index.js"] # 运行命令ports:- 3000:3000 # 本地端口:容器端口

此时项目目录

├── Dockerfile
├── docker-compose.yml
├── index.js
├── package.json
└── yarn.lock

运行命令

$ docker-compose up
Building web
Step 1/5 : FROM node:8-alpine---> 86b71ddd55fa
Step 2/5 : WORKDIR /home/node/app---> Using cache---> 2347fe6d8f3c
Step 3/5 : COPY ./package.json /home/node/app/package.json---> Using cache---> 1e0026f493f5
Step 4/5 : RUN yarn --production---> Using cache---> 549284f78c1c
Step 5/5 : RUN ls ./node_modules---> Using cache---> 350adf90cfa8
Successfully built 350adf90cfa8
Successfully tagged example_web:latest
Recreating example_web_1 ... done
Attaching to example_web_1

服务已运行起来了，访问 3000 试试看吧

如何用 Nginx 反向代理，消除跨域问题

首先得有一个 nginx.conf 配置

# nginx.conf
user nginx;
worker_processes 1;error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;events {worker_connections 1024;
}http {include /etc/nginx/mime.types;default_type application/octet-stream;log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;gzip on;# 定义上游服务器upstream api {ip_hash;# 这里服务器使用 koaserver# 其实原理是Docker改写了host, koaserver指向nodejs那个容器的IPserver koaserver:3000 weight=1;keepalive 300;}server {listen 80;server_name localhost;charset utf-8;root   /usr/share/nginx/html;# 代理以 api 为前缀的请求location ~^/api {proxy_pass http://api;proxy_set_header X-Forwarded-Proto $scheme;proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}}}

version: "3"
services:nginx_proxy:image: nginx:1.13.8-alpinerestart: alwaysworking_dir: /home/staticvolumes:- ./index.html:/usr/share/nginx/html/index.html- ./nginx.conf:/etc/nginx/nginx.conf # 映射 ginx 配置文件ports:- 3000:80 # 绑定容器的80端口到本的1080端口links:- web:koaserver # 给它取个别名，叫做 koaserverweb:build:context: .dockerfile: ./Dockerfileuser: nodeworking_dir: /home/node/appenvironment:- PORT=3000volumes:- ./index.js:/home/node/app/index.js # 将本地目录映射到容器内command: ["node", "index.js"] # 运行命令

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body>hello html
</body>
</html>

此时项目目录

├── Dockerfile
├── docker-compose.yml
├── index.html
├── index.js
├── nginx.conf
├── package.json
└── yarn.lock

运行命令

$ docker-compose up
Creating network "example_default" with the default driver
Pulling nginx_proxy (nginx:1.13.8-alpine)...
1.13.8-alpine: Pulling from library/nginx
550fe1bea624: Already exists
d421ba34525b: Already exists
fdcbcb327323: Already exists
bfbcec2fc4d5: Already exists
Digest: sha256:c8ff0187cc75e1f5002c7ca9841cb191d33c4080f38140b9d6f07902ababbe66
Status: Downloaded newer image for nginx:1.13.8-alpine
Creating example_web_1 ... done
Creating example_nginx_proxy_1 ... done
Attaching to example_web_1, example_nginx_proxy_1

访问 localhost:3000，返回 hello html
访问 localhost:3000/api，返回 hello koa

解决了跨域，但同时也存在问题，代理之后，应用程序无法获取 IP，需要从 header 的X-Real-IP
字段获取

最佳部署姿势是怎么样的?

其他还有很多案例需要使用 Docker，特别是开发后端的应用。后端应用依赖数据库(MySQL, Postgres, Redis...)、服务器(Nginx/Apache)，开发语言(如 PHP)。

如果我是一名开发者，接手别人的项目，项目需要安装 PHP, 需要安装 MySQL, Apache, redis, mongo... 最好能提供一个docker-compose.yml，否则我不保证我打不死你

回到 Node 部署，最佳的姿势：

把编译过后的代码(例如 Typescript>JS)+依赖+配置打包进镜像

然后 push 镜像，最后在服务端部署。其余的配置，尽量都通过docker-compose.yml的环境变量去设置

做到只需要一个配置文件，就能把完整的项目搭建起来

总结

Docker 到底解决了我们哪些问题？

容器化作隔离.。无论你怎么作，都是和宿主环境隔离的
统一环境。不会再出现 "为什么我的电脑上就可以，在你的电脑上就不行" 的玄学 BUG
易部署。一键安装是种怎样的体验？
集群分布式解决方案。前端页面仔需要知道这个？