GitHub Codespaces を使用してビルドとデバッグを行う

[アーティクル]
08/09/2023

GitHub チームまたは GitHub Enterprise Cloud サブスクリプションがある場合は、 GitHub Codespaces を使用して、GitHub によってホストされているコンテナー内にビルドされるようにプロジェクトを設定できます。 Visual Studio Code のリモート機能を使用すると、デスクトップ上の Visual Studio Code を Codespace に接続し、Codespace から直接編集、ビルド、デプロイ、デバッグを行うことができます。

このトピックでは、GitHub Codespaces を使用して Azure Sphere アプリをリモートで編集、ビルド、デプロイ、デバッグする方法について説明します。 Visual Studio Code でのビルドとデバッグにコンテナーを使用する: Visual Studio Code を使用して、コンテナー内の Azure Sphere アプリをローカルで編集、ビルド、デプロイ、デバッグする方法について説明します。

Codespaces を使用するには、プロジェクトを GitHub リポジトリとして構成し、コンテナーで使用するように構成する必要があります。このトピックでは、適切な構成で新しい Blink プロジェクトを作成します。

プロジェクトの GitHub リポジトリを作成する

次のように空の GitHub リポジトリを作成します。

github.com にログインします。
GitHub ホームページで、[リポジトリ] という単語の横にある [新規] ボタンを選択します。
リポジトリに Blink などの名前を付け、[ リポジトリの作成] を選択します。
[ クイックセットアップ] で、この種のことを行ったことがある場合は、リポジトリの HTTPS URL をコピーします。
コマンドプロンプトで、次のように新しいリポジトリをローカルデスクトップに複製します。
```
git clone <repository-url>
```
空のリポジトリを複製したことを示す警告が表示されます。

複製で新しい Blink プロジェクトを作成する

Visual Studio Code を開き、次のように新しいプロジェクトを作成します。

[コマンドパレット>の表示>][Azure Sphere: 新しいプロジェクトの生成] を選択します。
[ テンプレートの選択] で、[点滅] を選択 します。
[ フォルダーの選択 ] ダイアログで、新しいプロジェクトを作成するフォルダーを指定します。 (これは任意の場所にできます。このフォルダーの内容を、以前に作成した GitHub リポジトリにコピーします)。
Blink などの GitHub リポジトリの名前と一致するプロジェクト名を指定し、Enter キーを押します。
Azure Sphere プロジェクトファイル (.vscode や HardwareDefinitions などのすべてのサブフォルダーを含む) をローカルクローンにコピーし、コミットし、変更をプッシュします。このセクションで作成したプロジェクトフォルダーは、すべて GitHub リポジトリに格納されるため、削除できます。

.devcontainer フォルダーを設定する

GitHub リポジトリの最上位ディレクトリで、.devcontainer という名前のフォルダーを作成します。このフォルダーで、devcontainer.json という名前のファイルを次の内容で作成します。

{
    "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"
    ]
}

次に、次の内容を含む Dockerfile という名前のファイルを .devcontainer フォルダーに作成します。

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" ]

最初 FROM の行では、基本開発コンテナーとして標準の Azure Sphere Docker イメージを指定し、2 番目の行では、その基本コンテナーをビルド環境として使用することを示します。行は COPY 、リポジトリの内容をコンテナーの /src/ ディレクトリにコピーします。は WORKDIR 、ビルドディレクトリを指定します。このコマンドは RUN 、ビルドファイルを生成する CMake コマンドを提供します。最後に、は ENTRYPOINT 、実際にアプリケーションをビルドするために ninja を呼び出す必要があることを指定します。

GitHub プロジェクトに変更をコミットし、変更をプッシュします。

GitHub Codespaces 拡張機能をインストールする

GitHub Codespaces 拡張機能をインストールするには:

Visual Studio Code で GitHub リポジトリフォルダーを開きます (まだ開いていない場合)。
Visual Studio Code アクティビティバーから [拡張機能 ] を開きます。
"GitHub Codespaces" を検索し、GitHub Codespaces 拡張機能をインストールします。

codespace を作成する

[コマンドパレット>の表示>] [Codespaces: Create New Codespace]\(新しい Codespace の作成\) を選択します。
リポジトリのドロップダウンリストから、[Blink]\( 点滅\) を選択します。リポジトリがドロップダウンリストに表示されない場合は、リストの上のテキストボックスにその名前を入力できます。
ブランチのドロップダウンリストから、適切なものを選択します。

Visual Studio Code のタイトルバーが変更され、Codespaces で編集中であることを示します。左側のナビゲーションバーで [拡張機能] タブを開くと、ローカルにインストールされている拡張機能と、リモートコンテナーにインストールされている拡張機能の両方が表示されます。

プロジェクトをビルドしてデバッグする

F5 キーを押すか、[デバッグの開始の実行>] を選択してプロジェクトをビルドし、デバッグを開始します。アプリケーションがビルドされ、通常どおりデバイスにサイドロードされます。コードにブレークポイントを設定した場合、ブレークポイントに到達するまでアプリが実行されます。通常のデバッグコマンドを使用して、コードを確認できます。詳細については、Visual Studio Code ドキュメントの「デバッグ」トピックを参照してください。

デバッグが完了したら、 Shift キーを押しながら F5 キーを押すか 、停止 アイコンを押します。 codespace を閉じるには、[コマンドパレット>の表示>] [Codespaces: 現在の Codespace の停止] の順に選択します。

次の方法で共有