作者：josiahchen，騰訊TEG魯班工作室前端工程師

前言

大多數人可能都遇到過這樣一個問題，在本地開發好功能后，部署到服務器，或者其他人拉到本地接著開發時，會出現功能用不了的情況。

大多數時候是由于系統不同，依賴出現差異而導致的。因此，為了解決這個問題，基于 Docker 構建統一開發環境的需求便產生了。

使用 Docker 的好處

• 部署方便：平常要搭建環境常常需要耗費幾個小時，而且，對于團隊協作時來說，每有新人進來，都需要浪費這可以避免的時間，而且搭建環境時，也常常會產生的各種問題，導致項目代碼運行異常。如果使用了 Docker 的話，只需最開始的人寫好開發容器，其他人只需要 pull 下來，即可完成項目環境的搭建，能有效避免無意義的時間浪費。
• 隔離性：我們時常會在一臺電腦部署多個項目環境，若是直接安裝的話，彼此間有可能會造成干擾，比如一個項目需要 Node.js 14，有的又需要 Node.js 12，若是直接在本機部署的話，總是不能共存的，而是用 Docker 的話，則可以避免該問題。Docker 還能確保每個應用程序只使用分配給它的資源（包括 CPU、內存和磁盤空間）。一個特殊的軟件將不會使用你全部的可用資源，要不然這將導致性能降低，甚至讓其他應用程序完全停止工作。

實現

安裝 Docker

Linux

我是用的是 Arch Linux，所以以下安裝方法是以 Arch Linux 為基礎，其他發行版也大同小異，只是換成其包管理工具而已。

# 設置國內鏡像站，國內提速用的，可選操作$ sudo Pacman-mirrors -i -c China -m rank# 使用 Pacman 安裝 Docker$ sudo pacman -S docker# 建立 docker 用戶組。默認情況下，docker 命令會使用 Unix socket 與 Docker 引擎通訊。而只有 root 用戶和 docker 組的用戶才可以訪問 Docker 引擎的 Unix socket。出于安全考慮，一般 Linux 系統上不會直接使用 root 用戶。因此，更好地做法是將需要使用 docker 的用戶加入 docker 用戶組。$ sudo groupadd docker# 將當前用戶加入 docker 組，退出當前終端并重新登錄后生效$ sudo usermod -aG docker $USER# 測試是否安裝成功$ docker run --rm hello-world

Windows 10

Windows 10 下安裝 docker 比較簡單，有如下幾種方式：

手動下載安裝

點擊以下 鏈接 下載 Docker Desktop for Windows。

下載好之后雙擊 Docker Desktop Installer.exe 開始安裝。

使用winget安裝

$ winget install Docker.DockerDesktop

運行

在 Windows 搜索欄輸入 Docker 點擊 Docker Desktop 開始運行。

Docker 啟動之后會在 Windows 任務欄出現鯨魚圖標。

等待片刻，當鯨魚圖標靜止時，說明 Docker 啟動成功，之后你可以打開 PowerShell/CMD/Windows Terminal 使用 Docker。

macOS

使用 Homebrew 安裝

Homebrew 的 Cask 已經支持 Docker Desktop for Mac，因此可以很方便的使用 Homebrew Cask 來進行安裝：

$ brew install --cask docker

手動下載安裝

如果需要手動下載，請點擊以下 鏈接 下載 Docker Desktop for Mac。

請注意下載對應芯片類型的軟件，M1 和 Intel 芯片所對應的版本不通用。

如同 macOS 其它軟件一樣，安裝也非常簡單，雙擊下載的 .dmg 文件，然后將那只叫 Moby 的鯨魚圖標拖拽到 Application 文件夾即可（其間需要輸入用戶密碼）。

運行

從應用中找到 Docker 圖標并點擊運行。

運行之后，會在右上角菜單欄看到多了一個鯨魚圖標，這個圖標表明了 Docker 的運行狀態。

每次點擊鯨魚圖標會彈出操作菜單。

之后，你可以在終端通過命令檢查安裝后的 Docker 版本。

$ docker --version

Docker 換源

docker 默認的源是國外的，國內訪問的話速度比較慢，因此可以換為國內源，提高鏡像拉去速度。

Linux

Linux 下的比較簡單，創建個 deamon.json 文件寫下配置就好：

$ vi /etc/docker/deamon.json# 輸入鏡像源{ # 只換一個源也是可以的，可以直接用字符串，而不是數組。 "registry-mirrors": [ "https://registry.docker-cn.com", "http://hub-mirror.c.163.com", "https://docker.mirrors.ustc.edu.cn" ],}# :wq 保存退出后重啟 docker$ systemctl restart docker

Windows 和 Mac

Windows 和 Mac 都是使用的 Docker Desktop，所以直接在 GUI 中配置即可。

打開 Docker 界面，點擊 Docker Engine

在右邊輸出框中，輸入鏡像源：

{ "registry-mirrors": [ "https://registry.docker-cn.com", "http://hub-mirror.c.163.com", "https://docker.mirrors.ustc.edu.cn" ],}

輸入后結果如下：

檢驗

在更新完鏡像源且重啟了 docker 之后，即可運行一下命令查看是否生效：

$ docker info# Registry Mirrors:# https://registry.docker-cn.com/# http://hub-mirror.c.163.com/# https://docker.mirrors.ustc.edu.cn/

編寫 Dockerfile

安裝完 Docker 之后，接下來我們便可以來編寫我們自己的項目開發環境了。本文將以前端開發環境為例，構建 Dockerfile。

包含環境：

• node.js 14.17
• npm 6.14
• yarn 1.22

# 前端開發中，時常需要使用 shell 命令，而有一個較為完整的環境比較重要，因此選擇了使用 ubuntu 作為基礎，若在意容器大小的話，可自行選擇適用的基礎鏡像FROM ubuntuLABEL org.opencontainers.image.authors="moecasts.caster@gmail.com"# 設置環境變量 ENV DEBIAN_FRONTEND noninteractive# 設置時區ARG TZ=Asia/ShanghaiENV TZ ${TZ}RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone# 用 root 用戶操作USER root# 更換阿里云源，在國內可以加快速度RUN sed -i "s/security.ubuntu.com/mirrors.aliyun.com/" /etc/apt/sources.list && sed -i "s/archive.ubuntu.com/mirrors.aliyun.com/" /etc/apt/sources.list && sed -i "s/security-cdn.ubuntu.com/mirrors.aliyun.com/" /etc/apt/sources.listRUN apt-get clean# 更新源，安裝相應工具RUN apt-get update && apt-get install -y zsh vim wget curl python git-core# 安裝 zsh，以后進入容器中時，更加方便地使用 shellRUN git clone https://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh && cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc && git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions && git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting && sed -i 's/^plugins=(/plugins=(zsh-autosuggestions zsh-syntax-highlighting z /' ~/.zshrc && chsh -s /bin/zsh# 創建 me 用戶RUN useradd --create-home --no-log-init --shell /bin/zsh -G sudo me && adduser me sudo && echo 'me:password' | chpasswd# 為 me 安裝 omzUSER meRUN git clone https://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh && cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc && git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions && git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting && sed -i 's/^plugins=(/plugins=(zsh-autosuggestions zsh-syntax-highlighting z /' ~/.zshrc# 安裝 nvm 和 nodeENV NVM_DIR=/home/me/.nvm NODE_VERSION=v14RUN mkdir -p $NVM_DIR && curl -o- https://gitee.com/mirrors/nvm/raw/master/install.sh | bash && . $NVM_DIR/nvm.sh && nvm install ${NODE_VERSION} && nvm use ${NODE_VERSION} && nvm alias ${NODE_VERSION} && ln -s `npm bin --global` /home/me/.node-bin && npm install --global nrm && nrm use taobao && echo '' >> ~/.zshrc && echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc && echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm' >> ~/.zshrc# 安裝 yarnRUN curl -o- -L https://yarnpkg.com/install.sh | bash; echo '' >> ~/.zshrc && echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.zshrc# Add NVM binaries to root's .bashrcUSER rootRUN echo '' >> ~/.zshrc && echo 'export NVM_DIR="/home/me/.nvm"' >> ~/.zshrc && echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm' >> ~/.zshrc && echo '' >> ~/.zshrc && echo 'export YARN_DIR="/home/me/.yarn"' >> ~/.zshrc && echo 'export PATH="$YARN_DIR/bin:$PATH"' >> ~/.zshrc# Add PATH for node & YARNENV PATH $PATH:/home/me/.node-bin:/home/me/.yarn/bin# 刪除 apt/lists，可以減少最終鏡像大小，詳情見：https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#general-guidelines-and-recommendationsRUN rm -rf /var/lib/apt/lists/*WORKDIR /var/www

編寫完 Dockerfile 后，構建即可：

docker build -t frontend/react:v1 .

構建完之后可以直接運行：

# 以 me 身份運行，推薦方式docker run --user=me -it frontend/react:v1 /bin/zsh# 以 root 角色運行docker run -it frontend/react:v1 /bin/zsh

編寫 docker-compose.yml

在開發時，我們尋常需要多個容器配合使用，比如需要配合 mysql 或其他容器使用時，使用 docker-compose.yml 可以更好的組織他們。

version: '2'services: react: build: context: . dockerfile: react/Dockerfile tty: true ports: - 30000:3000 volumes: - ./react/www:/var/www networks: - frontend mysql: image: mysql:5.7 ports: - 33060:3306 volumes: - ./mysql/data:/var/lib/mysql - ./mysql/docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d environment: - MYSQL_ROOT_PASSWORD=password networks: - frontend# 將容器置于同一 networks 即可直接通過容器名訪問networks: frontend: driver: bridge

啟動容器

編寫完上述 Dockerfile 和 docker-compose.yml 后，即可愉快的開始開發了！

# 進入 docker-compose.yml 所在目錄$ cd frontend# 后臺啟動 docker-compose.yml 中所有容器，若容器沒有構建則會先構建$ docker compose up -d# 進入 react 容器中，以便命令行交互$ docker compose exec --user=me react /bin/zsh

為了測試容器間是否能相互訪問，可以使用編寫如下文件，數據庫需自行創建：

// index.jsconst mysql = require('mysql')const connection = mysql.createConnection({ host: 'mysql', user: 'root', password: 'password', database: 'test',})connection.connect();connection.query(`SELECT * FROM users`, function (error, results, fields) { if (error) throw error; console.log(results)})connection.end();

之后運行，即可看到結果：

$ node index.js[ RowDataPacket { id: 1, name: 'Caster' } ]

總結

使用 Docker 來搭建開發環境十分方便，一次搭建，即可在許多機器上多次使用，即使是要重裝系統，也不必在重復配置。

如不喜歡寫 Dockerfile 的話，也可以直接開啟一個容器，然后進入容器配置完后，使用 docker save/export 導出即可。