前言:

没有什么是非得用 xx 技术才行的,只是 能用好用 的区别
有些习惯了老旧的工作方式,不愿去学习,不愿意去改变,追求 “能用就行”
有些不单追求能用,还有提升的空间,追去好用
It's up to you!

为什么需要 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 同步,指向同一个数据库,修改代码立即见效,F*CK FTP

单页面应用

前后端分离的情况下,单页面渲染一般使用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

首先你得安装DockerDocker 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.yml

version: "3"
services:
  web:
    image: node:8-alpine
    user: node
    working_dir: /home/node/app
    environment:
      - PORT=3000
    volumes:
      - ./:/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_modulespackage.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.yml

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: ./Dockerfile
    user: node
    working_dir: /home/node/app
    environment:
      - PORT=3000
    volumes:
      - ./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那个容器的IP
		server 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-alpine
    restart: always
    working_dir: /home/static
    volumes:
       - ./index.html:/usr/share/nginx/html/index.html
       - ./nginx.conf:/etc/nginx/nginx.conf # 映射 ginx 配置文件
    ports:
      - 3000:80 # 绑定容器的80端口到本的1080端口
    links:
      - web:koaserver # 给它取个别名,叫做 koaserver
  web:
    build:
      context: .
      dockerfile: ./Dockerfile
    user: node
    working_dir: /home/node/app
    environment:
      - PORT=3000
    volumes:
      - ./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>Documenttitle>
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
  • 易部署。一键安装是种怎样的体验?
  • 集群分布式解决方案。前端页面仔需要知道这个?