How to use Docker to build a development environment (Windows and Mac)

# Set up a domestic mirror station, which is used to speed up the domestic operation. It is optional. $ sudo pacman-mirrors -i -c China -m rank

# Install Docker using Pacman
$ sudo pacman -S docker

# Create a docker user group. By default, the docker command uses a Unix socket to communicate with the Docker engine. Only the root user and users in the docker group can access the Unix socket of the Docker engine. For security reasons, the root user is generally not used directly on Linux systems. Therefore, a better approach is to add users who need to use docker to the docker user group.
$ sudo groupadd docker

# Add the current user to the docker group. The changes will take effect after you log out of the current terminal and log in again. $ sudo usermod -aG docker $USER

# Test whether the installation is successful $ docker run --rm hello-world

$ winget install Docker.DockerDesktop

$ brew install --cask docker

$ docker --version

$ vi /etc/docker/deamon.json

# Input mirror source {
  # It is also possible to change only one source, and use a string directly instead of an array.
  "registry-mirrors": [
    "https://registry.docker-cn.com",
    "http://hub-mirror.c.163.com",
    "https://docker.mirrors.ustc.edu.cn"
  ],
}

# :wq Save and exit and restart docker
$ systemctl restart docker

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

# In front-end development, shell commands are often needed, and a relatively complete environment is more important, so Ubuntu is chosen as the basis. If you care about the size of the container, you can choose the appropriate basic image FROM ubuntu
LABEL org.opencontainers.image.authors="[email protected]"

# Set the environment variable ENV DEBIAN_FRONTEND noninteractive

# Set time zone ARG TZ=Asia/Shanghai
ENV TZ ${TZ}

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

# Use root user to operate USER root

# Change the Alibaba Cloud source to speed up the process in China 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

# Update the source and install the corresponding tools RUN apt-get update && apt-get install -y \
    zsh \
    vim \
    wget \
    curl \
    python \
    git-core

# Install zsh so that you can use the shell more conveniently when you enter the container later
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

# Create me user RUN useradd --create-home --no-log-init --shell /bin/zsh -G sudo me && \
    adduser me sudo && \
    echo 'me:password' | chpasswd

# Install omz for me
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

# Install nvm and 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

# Install 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

# Delete apt/lists to reduce the final image size RUN rm -rf /var/lib/apt/lists/*

WORKDIR /var/www
After writing the Dockerfile, build it:

docker build -t frontend/react:v1 .
After building, you can run directly:

# Run as me, recommended method: docker run --user=me -it frontend/react:v1 /bin/zsh

# Run as root 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

#Put the containers in the same networks and access the networks directly through the container name:
    frontend:
    driver: bridge

# Enter the directory where docker-compose.yml is located $ cd frontend

# Start all containers in docker-compose.yml in the background. If the container is not built, it will be built first. $ docker-compose up -d

# Enter the react container for command line interaction $ 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' } ]