So verwenden Sie Docker zum Erstellen einer Entwicklungsumgebung (Windows und Mac)

# Richten Sie eine inländische Spiegelstation ein, die den inländischen Betrieb beschleunigt. Dies ist optional. $ sudo pacman-mirrors -i -c China -m rank

# Installieren Sie Docker mit Pacman
$ sudo pacman -S Docker

# Erstellen Sie eine Docker-Benutzergruppe. Standardmäßig verwendet der Docker-Befehl einen Unix-Socket, um mit der Docker-Engine zu kommunizieren. Nur der Root-Benutzer und Benutzer in der Docker-Gruppe können auf den Unix-Socket der Docker-Engine zugreifen. Aus Sicherheitsgründen wird der Root-Benutzer auf Linux-Systemen grundsätzlich nicht direkt verwendet. Daher besteht ein besserer Ansatz darin, Benutzer, die Docker verwenden müssen, zur Docker-Benutzergruppe hinzuzufügen.
$ sudo groupadd docker

# Fügen Sie den aktuellen Benutzer zur Docker-Gruppe hinzu. Die Änderungen werden wirksam, nachdem Sie sich vom aktuellen Terminal abgemeldet und erneut angemeldet haben. $ sudo usermod -aG docker $USER

# Testen Sie, ob die Installation erfolgreich ist $ docker run --rm hello-world

$ winget installiere Docker.DockerDesktop

$ brew install --cask Docker

$ docker --version

$ vi /etc/docker/deamon.json

# Eingabespiegelquelle {
  # Es ist auch möglich, nur eine Quelle zu ändern und anstelle eines Arrays direkt eine Zeichenfolge zu verwenden.
  "Registrierungsspiegel": [
    „https://registry.docker-cn.com“,
    "http://hub-mirror.c.163.com",
    „https://docker.mirrors.ustc.edu.cn“
  ],
}

# :wq Speichern, beenden und Docker neu starten
$ systemctl Neustart Docker

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

# In der Front-End-Entwicklung werden häufig Shell-Befehle benötigt, und eine relativ vollständige Umgebung ist wichtiger. Daher wird Ubuntu als Basis gewählt. Wenn Ihnen die Größe des Containers wichtig ist, können Sie das entsprechende Basisimage von Ubuntu auswählen
ETIKETT org.opencontainers.image.authors="[email protected]"

# Setzen Sie die Umgebungsvariable ENV DEBIAN_FRONTEND noninteractive

# Zeitzone ARG TZ=Asia/Shanghai einstellen
ENV TZ ${TZ}

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

# Verwenden Sie den Root-Benutzer, um den USER-Root zu bedienen

# Ändern Sie die Alibaba Cloud-Quelle, um den Prozess in China zu beschleunigen. 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
Führen Sie apt-get clean aus.

# Aktualisieren Sie die Quelle und installieren Sie die entsprechenden Tools. RUN apt-get update && apt-get install -y \
    zsh \
    vim \
    wget \
    Locke \
    Python \
    Git-Kern

# Installieren Sie zsh, damit Sie die Shell später bequemer verwenden können, wenn Sie den Container betreten
Führen Sie git clone https://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh && \ aus.
    cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc && \
    git-Klon https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions && \
    git-Klon 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

# Erstellen Sie meinen Benutzer RUN useradd --create-home --no-log-init --shell /bin/zsh -G sudo me && \
    füge Benutzer hinzu, sudo && \
    echo 'me:Passwort' | chpasswd

# Installiere omz für mich
BENUTZER ich
Führen Sie git clone https://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh && \ aus.
    cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc && \
    git-Klon https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions && \
    git-Klon 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-Syntaxhervorhebung z /' ~/.zshrc

# Installieren Sie nvm und 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 installiere ${NODE_VERSION} && \
    keine Sorge, verwenden Sie ${NODE_VERSION} && \
    nvm-Alias ​​${NODE_VERSION} && \
    ln -s `npm bin --global` /home/me/.node-bin && \
    npm install --global nrm && \
    nrm verwenden taobao && \
    echo '' >> ~/.zshrc && \
    echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc && \
    echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # Dies lädt nvm' >> ~/.zshrc

# Garn installieren
RUN curl -o- -L https://yarnpkg.com/install.sh | bash; \
    echo '' >> ~/.zshrc && \
    echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.zshrc

# Fügen Sie NVM-Binärdateien zu Roots .bashrc hinzu
BENUTZER root

RUN echo '' >> ~/.zshrc && \
    echo 'export NVM_DIR="/home/me/.nvm"' >> ~/.zshrc && \
    echo '[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # Dies lädt nvm' >> ~/.zshrc && \
    echo '' >> ~/.zshrc && \
    echo 'export YARN_DIR="/home/me/.yarn"' >> ~/.zshrc && \
    echo 'export PATH="$YARN_DIR/bin:$PATH"' >> ~/.zshrc

# PATH für Knoten und YARN hinzufügen
ENV-PFAD $PATH:/home/me/.node-bin:/home/me/.yarn/bin

# Löschen Sie apt/lists, um die endgültige Bildgröße zu reduzieren. RUN rm -rf /var/lib/apt/lists/*

ARBEITSVERZEICHNIS /var/www
Nachdem Sie das Dockerfile geschrieben haben, erstellen Sie es:

Docker-Build -t Frontend/React:v1.
Nach dem Erstellen können Sie direkt ausführen:

# Als ich ausführen, empfohlene Methode: docker run --user=me -it frontend/react:v1 /bin/zsh

# Als Root ausführen docker run -it frontend/react:v1 /bin/zsh

Version: '2'
Leistungen:
    reagieren:
    bauen:
        Kontext: .
        Docker-Datei: reagieren/Docker-Datei
    tty: wahr
    Häfen:
        30000: 3000
    Bände:
        - ./reagieren/www:/var/www
    Netzwerke:
        -Frontend
    MySQL:
    Bild:mysql:5.7
    Häfen:
        - 33060:3306
    Bände:
        - ./mysql/data:/var/lib/mysql
        - ./mysql/docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d
    Umfeld:
        -MYSQL_ROOT_PASSWORD=Passwort
    Netzwerke:
        -Frontend

#Legen Sie die Container in dieselben Netzwerke und greifen Sie direkt über den Containernamen auf die Netzwerke zu:
    Frontend:
    Treiber: Brücke

# Geben Sie das Verzeichnis ein, in dem sich docker-compose.yml befindet $ cd frontend

# Starten Sie alle Container in docker-compose.yml im Hintergrund. Wenn der Container noch nicht erstellt ist, wird er zuerst erstellt. $ docker-compose up -d

# Geben Sie den React-Container für die Befehlszeileninteraktion ein $ docker-compose exec --user=me react /bin/zsh

// index.js
const mysql = erfordern('mysql')
const-Verbindung = mysql.createConnection({
    Host: "mysql",
    Benutzer: 'root',
    Passwort: „Passwort“,
    Datenbank: 'Test',
})

Verbindung.verbinden();

connection.query(`SELECT * FROM users`, Funktion (Fehler, Ergebnisse, Felder) {
    wenn (Fehler) Fehler auslösen;
    console.log(Ergebnisse)
})

Verbindung.Ende();

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