版權聲明：本文為CSDN博主「我是太陽男神」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/a792396951/article/details/80230946
作者：josiahchen，騰訊TEG魯班工作室前端工程師
大多數人可能都遇到過這樣一個問題，在本地開發好功能后，部署到服務器，或者其他人拉到本地接著開發時，會出現功能用不了的情況。
大多數時候是由于系統不同，依賴出現差異而導致的。因此，為了解決這個問題，基于 Docker 構建統一開發環境的需求便產生了。
我是用的是 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 下安裝 docker 比較簡單，有如下幾種方式：
點擊以下 鏈接 下載 Docker Desktop for Windows。
下載好之后雙擊 Docker Desktop Installer.exe 開始安裝。
$ winget install Docker.DockerDesktop
在 Windows 搜索欄輸入 Docker 點擊 Docker Desktop 開始運行。
Docker 啟動之后會在 Windows 任務欄出現鯨魚圖標。
等待片刻，當鯨魚圖標靜止時，說明 Docker 啟動成功，之后你可以打開 PowerShell/CMD/Windows Terminal 使用 Docker。
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 默認的源是國外的，國內訪問的話速度比較慢，因此可以換為國內源，提高鏡像拉去速度。
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 都是使用的 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/
安裝完 Docker 之后，接下來我們便可以來編寫我們自己的項目開發環境了。本文將以前端開發環境為例，構建 Dockerfile。
包含環境：
# 前端開發中，時常需要使用 shell 命令，而有一個較為完整的環境比較重要，因此選擇了使用 ubuntu 作為基礎，若在意容器大小的話，可自行選擇適用的基礎鏡像
FROM ubuntu
LABEL org.opencontainers.image.authors="moecasts.caster@gmail.com"
# 設置環境變量
ENV DEBIAN_FRONTEND noninteractive
# 設置時區
ARG TZ=Asia/Shanghai
ENV 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.list
RUN apt-get clean
# 更新源，安裝相應工具
RUN apt-get update && apt-get install -y \
zsh \
vim \
wget \
curl \
python \
git-core
# 安裝 zsh，以后進入容器中時，更加方便地使用 shell
RUN 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 安裝 omz
USER me
RUN 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 和 node
ENV NVM_DIR=/home/me/.nvm \
NODE_VERSION=v14
RUN 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
# 安裝 yarn
RUN 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 .bashrc
USER root
RUN 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 & YARN
ENV 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-recommendations
RUN 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
在開發時，我們尋常需要多個容器配合使用，比如需要配合 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.js
const 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 導出即可。