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

原创

ITCJF 2021-07-08 13:59:11 ©著作权

文章标签 使用 Docker 打造超溜的前端环境 Docker docker 文章分类 Docker 云计算

©著作权归作者所有：来自51CTO博客作者ITCJF的原创作品，请联系作者获取转载授权，否则将追究法律责任

为什么需要 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.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_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.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>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
字段获取