Verwenden von GitHub Codespaces zum Erstellen und Debuggen

Artikel
08/09/2023

Wenn Sie über ein GitHub Team- oder GitHub Enterprise Cloud-Abonnement verfügen, können Sie GitHub Codespaces verwenden, um Ihr Projekt so einzurichten, dass es in einem von GitHub gehosteten Container erstellt wird. Mithilfe des Remotefeatures von Visual Studio Code können Sie visual Studio Code auf Ihrem Desktop mit dem Codespace verbinden und direkt über den Codespace bearbeiten, erstellen, bereitstellen und debuggen.

In diesem Thema wird die Verwendung von GitHub Codespaces zum Remotebearbeitung, Erstellen, Bereitstellen und Debuggen Ihrer Azure Sphere-Apps erläutert. Verwenden von Containern zum Erstellen und Debuggen mit Visual Studio Code beschreibt die Verwendung von Visual Studio Code zum lokalen Bearbeiten, Erstellen, Bereitstellen und Debuggen Ihrer Azure Sphere-Apps in einem Container.

Um Codespaces verwenden zu können, muss Ihr Projekt als GitHub-Repository konfiguriert und auch für die Verwendung in einem Container konfiguriert werden. In diesem Thema erstellen Sie ein neues Blink-Projekt mit der entsprechenden Konfiguration.

Erstellen eines GitHub-Repositorys für Ihr Projekt

Erstellen Sie wie folgt ein leeres GitHub-Repository:

Melden Sie sich bei github.com an.
Wählen Sie auf Ihrer GitHub-Startseite die Schaltfläche Neu neben dem Wort Repositorys aus.
Geben Sie Ihrem Repository einen Namen, z. B. Blink, und wählen Sie Repository erstellen aus.
Wenn Sie dies bereits getan haben, kopieren Sie unter Schnelleinrichtung die HTTPS-URL für Ihr Repository.
Klonen Sie ihr neues Repository an einer Eingabeaufforderung wie folgt auf Ihrem lokalen Desktop:
```
git clone <repository-url>
```
Es sollte eine Warnung angezeigt werden, dass Sie ein leeres Repository geklont haben.

Erstellen eines neuen Blink-Projekts in Ihrem Klon

Öffnen Sie Visual Studio Code, und erstellen Sie wie folgt ein neues Projekt:

Wählen SieBefehlspalette>anzeigen>Azure Sphere: Neues Projekt generieren aus.
Wählen Sie unter Vorlage auswählen die Option Blinken aus.
Geben Sie im Dialogfeld Ordner auswählen einen Ordner an, in dem das neue Projekt erstellt werden soll. (Dies kann überall sein. Sie kopieren den Inhalt dieses Ordners in das zuvor erstellte GitHub-Repository.)
Geben Sie einen Projektnamen an, der mit dem Namen Ihres GitHub-Repositorys übereinstimmt, z. B. Blink, und drücken Sie die EINGABETASTE.
Kopieren Sie Ihre Azure Sphere-Projektdateien (einschließlich aller Unterordner wie .vscode und HardwareDefinitions ) in Ihren lokalen Klon, committen Und pushen Sie die Änderungen. Anschließend können Sie den in diesem Abschnitt erstellten Projektordner löschen, da sich alles im GitHub-Repository befindet.

Einrichten des Ordners ".devcontainer"

Erstellen Sie im Verzeichnis der obersten Ebene Ihres GitHub-Repositorys einen Ordner mit dem Namen .devcontainer. Erstellen Sie in diesem Ordner eine Datei namens devcontainer.json mit folgendem Inhalt:

{
    "name": "Azure Sphere Blink",
    "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined"],
    "build": {
        "dockerfile": "Dockerfile",
        "target": "dev"
    },

    // 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"
    },

    // 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": [],

    // Uncomment the next line to run commands after the container is created.
    // "postCreateCommand": "gcc -v",

    // Comment out the next line if you want to run as root instead
    "remoteUser": "vscode",

    // Add the IDs of extensions you want installed when the container is created in the array below.
    "extensions": [
        "ms-vscode.azure-sphere-tools",
        "ms-vscode.azure-sphere-tools-ui"
    ]
}

Erstellen Sie als Nächstes im Ordner .devcontainer eine Datei mit dem Namen Dockerfile mit folgendem Inhalt:

FROM mcr.microsoft.com/azurespheresdk:latest AS dev

FROM dev AS build
COPY ./ /src/
WORKDIR /out
RUN cmake -G "Ninja" -DCMAKE_TOOLCHAIN_FILE="/opt/azurespheresdk/CMakeFiles/AzureSphereToolchain.cmake" \
    -DAZURE_SPHERE_TARGET_API_SET="latest-lts" -DCMAKE_BUILD_TYPE="Release" "/src"
ENTRYPOINT [ "ninja" ]

Die erste FROM Zeile gibt das Azure Sphere-Standard-Docker-Image als Basisentwicklungscontainer an, und die zweite besagt, dass dieser Basiscontainer als Buildumgebung verwendet werden soll. Die COPY Zeile kopiert den Inhalt des Repositorys in das Verzeichnis /src/ des Containers. Gibt WORKDIR das Buildverzeichnis an. Der RUN Befehl stellt den CMake-Befehl bereit, um die Builddateien zu generieren. Schließlich gibt an ENTRYPOINT , dass Ninja aufgerufen werden soll, um die Anwendung tatsächlich zu erstellen.

Committen Sie die Änderungen an Ihr GitHub-Projekt, und pushen Sie die Änderungen.

Installieren der GitHub Codespaces-Erweiterung

So installieren Sie die GitHub Codespaces-Erweiterung:

Öffnen Sie den GitHub-Repositoryordner in Visual Studio Code, falls noch nicht geschehen.
Öffnen Sie Erweiterungen über die Aktivitätsleiste von Visual Studio Code.
Suchen Sie nach "GitHub Codespaces", und installieren Sie die GitHub Codespaces-Erweiterung.

Erstellen eines Codespaces

Wählen Sie Ansicht>Befehlspalette>Codespaces: Neuen Codespace erstellen aus.
Wählen Sie in der Dropdownliste der Repositorys Blink aus. Wenn Ihr Repository nicht in der Dropdownliste angezeigt wird, können Sie seinen Namen in das Textfeld oberhalb der Liste eingeben.
Wählen Sie in der Dropdownliste der Branches die entsprechende aus.

Die Titelleiste in Visual Studio Code ändert sich, um anzuzeigen, dass Sie in Codespaces bearbeiten. Wenn Sie die Registerkarte Erweiterungen in der linken Navigationsleiste öffnen, werden sowohl die lokal installierten als auch die im Remotecontainer installierten Erweiterungen angezeigt.

Erstellen und Debuggen des Projekts

Drücken Sie F5, oder wählen Sie Ausführen>Debuggen starten aus, um Ihr Projekt zu erstellen und mit dem Debuggen zu beginnen. Ihre Anwendung wird wie gewohnt erstellt und auf Ihr Gerät querladen. Wenn Sie einen Haltepunkt in Ihrem Code festgelegt haben, wird die App ausgeführt, bis der Haltepunkt erreicht ist. Sie können die üblichen Debugbefehle verwenden, um Ihren Code zu durchlaufen. Weitere Informationen finden Sie im Thema Debuggen in der Visual Studio Code-Dokumentation.

Wenn Sie mit dem Debuggen fertig sind, drücken Sie UMSCHALT+F5 oder das Symbol Beenden . Um den Codespace zu schließen, wählen Sie Befehlspalette>>anzeigen Codespaces: Aktuellen Codespace beenden aus.

Share via