[PYTHON] [Januar 2020] Beginnen wir den explosiven "Entwicklungscontainer" ernsthaft mit dem Remote Container von VS Code.

Starten Sie mit Remote Conainer von VSCode den Dash von "Entwicklungsumgebung + Container mit allen Projekten"! ??

Verwenden Sie den Remote Conainer von VS Code für die Entwicklung? Wenn Sie nur einen vorhandenen Container eingeben möchten, können Sie Remote-SSH verwenden. Verwenden Sie Remote-Container jedoch als "Teil der lokalen Entwicklungsumgebung" oder vielmehr als ** lokale Entwicklungsumgebung = Remote-Container **. Es ist Reiwa! ~~ (Es ist schon 2 Jahre her ...?) ~~

Insbesondere bei Verwendung eines Mac sind Python, PHP, Ruby usw. von Anfang an enthalten, sodass es eine ** Entwicklungsumgebung ** gibt, die jedoch relativ in das macOS-Ökosystem integriert ist und daher nicht erforderlich ist. Sie können keine Pakete hinzufügen oder entfernen. Es bricht leicht wie "brauen" ... Besonders ** zusätzlich zum Upgrade **. Überhaupt wird es mit einem Rand verrückt sein. Wenn Sie mit Python oder Ruby auf Ihrem Mac programmieren, geraten Sie daher in eine Situation, in der Sie nicht zurückkehren können **. Um dies zu verhindern, beginnen wir mit "Entwicklung mit Remote Container" ~!

Einführung der Funktion "Dev Container"

Wussten Sie, dass es auf der ursprünglichen Site von Remote Container und dem ursprünglichen Github ein Element und ein Repository mit dem Namen "Try a dev container" gibt?

"dev container" ist ein Beispiel für ein Projekt, das mit einem Container mit einer Entwicklungsumgebung geliefert wird. Für jede der folgenden Sprachen wird ein Beispiel für dev-container erstellt.

Das Beispiel für node.js und Javascript hat beispielsweise den folgenden Baum.

% git clone https://github.com/Microsoft/vscode-remote-try-node nodejs-dev-sample
% cd nodejs-dev-sample
% tree -a -I ".git"
.
├── .devcontainer
│   ├── Dockerfile
│   └── devcontainer.json
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .vscode
│   └── launch.json
├── LICENSE
├── README.md
├── package.json
├── server.js
└── yarn.lock

Wenn Sie nur ".git" mit dem Befehl "tree" ausschließen und alle anzeigen, ist dies wie oben. Was hier besorgniserregend ist, ist ... ".devcontainer", nicht wahr? !! Der Inhalt von Dockerfile und devcontainer.json lautet wie folgt.

#-------------------------------------------------------------------------------------------------------------
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#-------------------------------------------------------------------------------------------------------------

FROM node:10

# The node image includes a non-root user with sudo access. Use the "remoteUser"
# property in devcontainer.json to use it. On Linux, the container user's GID/UIDs
# will be updated to match your local UID/GID (when using the dockerFile property).
# See https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=node
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Avoid warnings by switching to noninteractive
ENV DEBIAN_FRONTEND=noninteractive

# Configure apt and install packages
RUN apt-get update \
    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \ 
    #
    # Verify git and needed tools are installed
    && apt-get -y install git iproute2 procps \
    #
    # Remove outdated yarn from /opt and install via package 
    # so it can be easily updated via apt-get upgrade yarn
    && rm -rf /opt/yarn-* \
    && rm -f /usr/local/bin/yarn \
    && rm -f /usr/local/bin/yarnpkg \
    && apt-get install -y curl apt-transport-https lsb-release \
    && curl -sS https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/pubkey.gpg | apt-key add - 2>/dev/null \
    && echo "deb https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update \
    && apt-get -y install --no-install-recommends yarn \
    #
    # Install eslint globally
    && npm install -g eslint \
    #
    # [Optional] Update a non-root user to UID/GID if needed.
    && if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
        groupmod --gid $USER_GID $USERNAME \
        && usermod --uid $USER_UID --gid $USER_GID $USERNAME \
        && chown -R $USER_UID:$USER_GID /home/$USERNAME; \
    fi \
    # [Optional] Add add sudo support for non-root user
    && apt-get install -y sudo \
    && echo node ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
    && chmod 0440 /etc/sudoers.d/$USERNAME \
    #
    # Clean up
    && apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

# Switch back to dialog for any ad-hoc use of apt-get
ENV DEBIAN_FRONTEND=dialog

Ich werde die obige Erklärung später veröffentlichen, und dann ist der Inhalt von devcontainer.json ...

devcontainer.json


{
    "name": "Node.js Sample",
    "dockerFile": "Dockerfile",

    // Use 'appPort' to create a container with published ports. If the port isn't working, be sure
    // your server accepts connections from all interfaces (0.0.0.0 or '*'), not just localhost.
    "appPort": [3000],

    // Comment out the next line to run as root instead.
    "remoteUser": "node",

    // Use 'settings' to set *default* container specific settings.json values on container create. 
    // You can edit these settings after create using File > Preferences > Settings > Remote.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },

    // Specifies a command that should be run after the container has been created.
    "postCreateCommand": "yarn install",

    // Add the IDs of extensions you want installed when the container is created in the array below.
    "extensions": [
        "dbaeumer.vscode-eslint"
    ]
}

Und es ist eine Datei in einem Format, das eine Mischung aus Containereinstellungen und vscode settings.json ist. Sie können sich wahrscheinlich vorstellen, wie diese Einstellung lautet, aber was passiert, wenn Sie diesen Ordner mit VS-Code öffnen ... versuchen wir es! Wenn der Docker-Dämon zuvor nicht gestartet wurde, starten Sie den Docker-Dämon vorher. Starten Sie für Windows und Mac Docker for Desktop.

Wenn Docker gestartet wird, starten Sie VSCode und öffnen Sie "nodejs-dev-sample". Dann ... スクリーンショット 2020-01-03 14.10.20.png

dev container configuration gefunden, im container geöffnet? Ich habe eine Anfrage mit der Aufschrift ! Und wenn Sie auf "In Container erneut öffnen" klicken ... スクリーンショット 2020-01-03 14.22.25.png Nach einer Weile ... öffnete es sich! Die Statusleiste unten links wird grün und Sie sind mit Remote verbunden. Die Worte "Dev Container: Node.js Sample" sind blendend! Korrekt. Wenn Sie den Ordner ".devcontainer", die Einstellungen "devcontainer.json" und die entsprechende "Docker-Datei" haben, wird automatisch ein Container generiert, der die gesamte Datei im Projektordner bereitstellt und das Projekt mit VS-Code öffnet. !!

Der bemerkenswerte Punkt der Docker-Datei hier ist auch, dass sie das fragliche "Root" -Benutzerproblem löst. "Entwickeln in einem Container" klingt gut, aber die meisten Bilder werden vom Benutzer häufig als "root" belassen, sodass der Eigentümer der im Container zu aktualisierenden Datei "root" ist. Es gab ein nerviges Problem mit dem Werden ". Wenn Sie eine Docker-Datei selbst schreiben, können Sie alles tun, aber Sie können sie nicht einzeln schreiben, und wenn Sie eine Docker-Datei einzeln schreiben, ist es in Ordnung, wenn die Entwicklungsumgebung schmutzig wird ** Es ist ein Firmen-PC **, nicht wahr? ?? Diese Docker-Datei unterstützt dies höflich, sodass das Root-Benutzerproblem erfolgreich gelöst wurde.

Übrigens können Sie auch Container von VSCode aus verwalten ... スクリーンショット 2020-01-03 14.23.29.png Auf diese Weise können Sie über VS Code verwalten, welcher Container in welchem Projekt verwendet wird. Insbesondere weiß ** Docker nicht, in welchem Ordner die Docker-Datei zum Starten des Containers verwendet wurde ** (oder vielmehr, es erstellt ein Image und startet den Container, sodass es nicht wirklich wichtig ist, in welchem Ordner die Docker-Datei das Image erstellt hat). Das ist nützlich.

Wie benutzt man es?

Lassen Sie uns zunächst das ursprüngliche Repository vorstellen. Anhand des Repository-Namens können Sie erkennen, für welche Sprache das Beispielprojekt bestimmt ist.

Wenn Sie den Ordner ".devcontainer", die Einstellungen "devcontainer.json" und die zu verwendende "Docker-Datei" haben, wird dies automatisch ausgeführt. Erstellen Sie daher nur diese Dateien aus dem ursprünglichen Repository, indem Sie sie kopieren. Ist auch eine Ameise. Das Kopieren und Einfügen ist jedoch jedes Mal mühsam. Ordnen Sie die Vorgehensweise wie folgt an.

1. Als Vorlage klonen

Klonen Sie das obige Repository mit dem "Projektnamen" wie unten gezeigt.

$ git clone https://github.com/microsoft/vscode-remote-try-php my-first-php

Das erste Miso besteht darin, mit einem anderen Namen zu klonen. Dies ist der Ordnername, in dem das Argument nach dem Repository-Namen erstellt wird.

2. Löschen Sie den Verlauf und erstellen Sie ihn neu

Wenn Sie es gerade geklont haben, enthält es natürlich den gesamten Commit-Verlauf des ursprünglichen Repositorys. Es ist in Ordnung, es so wie es ist wiederzuverwenden, aber in den meisten Fällen werden Sie sich Sorgen machen. Löschen Sie daher grob das folgende ".git".

$ rm -rf .git

Damit habe ich die vergangene Commit-Geschichte völlig vergessen. Übrigens, lassen Sie uns unnötige Dateien löschen. Sie brauchen nichts anderes als ".devcontainer". .Vscode liegt bei Ihnen.

Wenn die Reinigung abgeschlossen ist, initialisieren Sie sie als neues Repository.

$ git init
...

Dies ist der erste Schritt als neues Entwicklungscontainerprojekt!

3. Passen Sie Dockerfile an

In einem tatsächlichen Projekt müssen DB, Angular, Aws, Firebase, CLI für Azure usw. enthalten sein, sodass es fast unmöglich ist, die Docker-Datei so zu verwenden, wie sie ist. Geben Sie daher den Befehl ein, um die erforderlichen Tools im Voraus in der Docker-Datei zu installieren.

Ich werde die Beschreibung der Docker-Datei hier weglassen. .. ..

4. Passen Sie devcontainer.json an

devcontainer.json ist eine sehr wichtige Datei, in der Sie den Projektnamen, den Übertragungsport, das erforderliche VSCode-Plug-In usw. festlegen können. Eine Liste der Einstellungen finden Sie unter:

Lassen Sie uns einige der im Beispiel-Repository verwendeten Einstellungen extrahieren ...

--settings… Dies ist der Einstellungswert von VSCode settings.json, der im Container verwendet wird. --appPort… Der zu übertragende Port --postCreateCommand… Befehl, der nach der Containererstellung ausgeführt wird --extensions… VSCode-Plug-In auf der Remote-Seite installiert

Ist es ein wichtiger Anpassungspunkt?

Laut der Referenz scheint auch "docker-compose.yml" verfügbar zu sein.

Nachdem Sie diese festgelegt haben, öffnen Sie den Ordner von VSCode und Sie starten sofort das Projekt einschließlich der Entwicklungsumgebung!

Zusammenfassung

Als ich den einleitenden Teil der Funktion des VScode Remote-Containers schrieb, überprüfte ich das offizielle Dokument ... Der Band ist nicht perfekt. Ich war besorgt darüber, wie tief das sein sollte, aber da es sich um eine Einführungsausgabe handelte, habe ich versucht, sie nicht zu berühren (lacht). Die Links sind über den gesamten Text verteilt, aber die offizielle Hilfe für Remote Container ist eine verblüffende Seite.

Dies ist der Band, in dem ich dieses Buch schreiben kann ...

Übrigens, dieses Mal werden wir hier enden!

Recommended Posts

[Januar 2020] Beginnen wir den explosiven "Entwicklungscontainer" ernsthaft mit dem Remote Container von VS Code.
Starten Sie mehrere Container im Remote-Container von VS Code, um zwischen Aufgaben zu wechseln
Erstellen Sie eine Go-Entwicklungsumgebung mit den Remote-Containern von VS Code
Melden Sie sich mit SSH bei einem Remote-Server an
Verwenden Sie den Docker-Entwicklungscontainer bequem mit VS Code
Bearbeiten und debuggen Sie den Code in Raspberry Pi mit der SSH-Verbindungsfunktion von VSCode
[Venv nicht erforderlich] Die stärkste Python-Entwicklungsumgebung, die mit Remote Containern erstellt wurde [VS Code / Docker]