# 設(shè)置國(guó)內(nèi)鏡像站，國(guó)內(nèi)提速用的，可選操作
$ sudo pacman-mirrors -i -c China -m rank

# 使用 Pacman 安裝 Docker
$ sudo pacman -S docker

# 建立 docker 用戶組。默認(rèn)情況下，docker 命令會(huì)使用 Unix socket 與 Docker 引擎通訊。而只有 root 用戶和 docker 組的用戶才可以訪問(wèn) Docker 引擎的 Unix socket。出于安全考慮，一般 Linux 系統(tǒng)上不會(huì)直接使用 root 用戶。因此，更好地做法是將需要使用 docker 的用戶加入 docker 用戶組。
$ sudo groupadd docker

# 將當(dāng)前用戶加入 docker 組，退出當(dāng)前終端并重新登錄后生效
$ sudo usermod -aG docker $USER

# 測(cè)試是否安裝成功
$ docker run --rm hello-world

$ winget install Docker.DockerDesktop

$ brew install --cask docker

$ docker --version

$ vi /etc/docker/deamon.json

# 輸入鏡像源
{
  # 只換一個(gè)源也是可以的，可以直接用字符串，而不是數(shù)組。
  "registry-mirrors": [
    "https://registry.docker-cn.com",
    "http://hub-mirror.c.163.com",
    "https://docker.mirrors.ustc.edu.cn"
  ],
}

# :wq 保存退出后重啟 docker
$ systemctl restart docker

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

# 前端開發(fā)中，時(shí)常需要使用 shell 命令，而有一個(gè)較為完整的環(huán)境比較重要，因此選擇了使用 ubuntu 作為基礎(chǔ)，若在意容器大小的話，可自行選擇適用的基礎(chǔ)鏡像
FROM ubuntu
LABEL org.opencontainers.image.authors="codebaokur@codebaoku.com"

# 設(shè)置環(huán)境變量 
ENV DEBIAN_FRONTEND noninteractive

# 設(shè)置時(shí)區(qū)
ARG TZ=Asia/Shanghai
ENV TZ ${TZ}

RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

# 用 root 用戶操作
USER root

# 更換阿里云源，在國(guó)內(nèi)可以加快速度
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

# 更新源，安裝相應(yīng)工具
RUN apt-get update && apt-get install -y \
    zsh \
    vim \
    wget \
    curl \
    python \
    git-core

#  安裝 zsh，以后進(jìn)入容器中時(shí)，更加方便地使用 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

# 創(chuàng)建 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，可以減少最終鏡像大小
RUN rm -rf /var/lib/apt/lists/*

WORKDIR /var/www
編寫完 Dockerfile 后，構(gòu)建即可：

docker build -t frontend/react:v1 .
構(gòu)建完之后可以直接運(yùn)行：

# 以 me 身份運(yùn)行，推薦方式
docker run --user=me -it frontend/react:v1 /bin/zsh

# 以 root 角色運(yùn)行
docker run -it frontend/react:v1 /bin/zsh

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 即可直接通過(guò)容器名訪問(wèn)
networks:
    frontend:
    driver: bridge

# 進(jìn)入 docker-compose.yml 所在目錄
$ cd frontend

# 后臺(tái)啟動(dòng) docker-compose.yml 中所有容器，若容器沒(méi)有構(gòu)建則會(huì)先構(gòu)建
$ docker-compose up -d

# 進(jìn)入 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' } ]