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

╰半夏微凉° 2023-07-01 07:25 2阅读 0赞

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

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

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

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

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

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

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

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

## 总结 ##

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

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