事前準備

演習に入る前に準備しておく開発環境の構築や、演習用のプロジェクトの入手について紹介します。

1. アカウント

この演習では以下のアカウントが必要です。

お持ちでない場合は以下のリンク先で作成するか、主催者より提供された場合は、提供元からの情報に従いアカウントを作成/確認してください。

  • Microsoft Azure 👈 アカウント作成用リンク
    • Azure 上にリソースを作成するために必要になります。
    • 本ハンズオンで使用するサブスクリプションの状態が下記のように アクティブ であることを、Azure ポータルより確認してください。
      操作画面イメージ

    • ご利用のサブスクリプションの [アクセス制御 (IAM)] を開いて、所有者 ロールもしくは 共同作成者 ロールとしてご利用のアカウントに割り当てられていることも併せて確認してください。
      操作画面イメージ

  • GitHub 👈 アカウント作成用リンク
    • 演習用リポジトリを作成、および、GitHub Actions を使用するために必要になります。

2. ローカル開発環境のツールセットアップ

この演習で使用する開発環境に必要となるツールとランタイム類は以下のとおりです。

ローカル開発環境を構築せず、GitHub Codespaces を使用して作業する予定の場合は、
こちらの ステップ 2 はスキップして、ステップ 3 へ進んでください。

リンク先のドキュメントに従いインストールを行い、正常に動作するようあらかじめセットアップしてください。

  • Visual Studio Code
    操作画面イメージ


    Visual Studio Code 拡張

    操作画面イメージ

  • Node.js
    操作画面イメージ

    Automatically install the necessary tools.・・・ のチェックボックスをチェック入れて、必要な関連ツールもインストールしてください。

  • Git
    操作画面イメージ

    Git インストール後、以下コマンドよりユーザー情報の登録を行なってください。

     git config --global user.name "your name"

     git config --global user.email "you@example.com"
  • (任意)Azure CLI
    操作画面イメージ

    なお Azure CLI のバージョンが古いと動作しないコマンドもありますので、既にインストールされている場合は、以下のドキュメントを参考に更新を行ってください。

    何らかの事情でローカル環境で Azure CLI が使用できない場合は、Azure ポータルから Azure Cloud Shell を使用することができます。

    使い方については以下を参考にしてください。

  • (任意)Docker デスクトップ
    操作画面イメージ

    演習でローカルでのコンテナ アプリの実行を確認する手順を選択しない場合は必要ありません

3. 演習で使用するプロジェクトの入手

このハンズオンでは、ミュージック ストアを模したサービスを使用します。同サービスは以下 2 つのシンプルな Node.js プロジェクトで構成されています。

名称 URL 役割
API アプリ containerapps-albumapi-javascript バックエンド サービスとして API を提供する
UI アプリ containerapps-albumui フロントエンド サービスとして Web UI を提供する

この 2 つのプロジェクトは GitHub に Template リポジトリとして公開されているので、リポジトリのページにある [Use this template] ボタンを使用してコピーを行います。

具体的な手順は以下のとおりです。

リポジトリのコピー

  • API アプリ

    1. 以下の URL にアクセスし、画面内のボタン [Use this template] をクリックします

        https://github.com/dev-lab-io/containerapps-albumapi-javascript

    2. Create a new project from containerapps-albumapi-javascript 画面の各項目を以下のように設定します

      項目 値
      Owner * 自身のアカウント
      Repository name * containerapps-albumapi-javascript
      Description (Optional) 任意の説明
      Public or Private Public にチェック
      Include all branches チェックしない

    3. 同ページの [Create repository from template] ボタンをクリックしてご自身の GitHub アカウントに containerapps-albumapi-javascript リポジトリが作成されたことを確認します

  • UI アプリ

    • 同様の作業を以下のリポジトリに対しても行います

       https://github.com/dev-lab-io/containerapps-albumui

    1. Create a new project from containerapps-album 画面の各項目を以下のように設定します

      項目 値
      Owner * 自身のアカウント
      Repository name * containerapps-album
      Description (Optional) 任意の説明
      Public or Private Public にチェック
      Include all branches チェックしない

    2. 同ページの [Create repository from template] ボタンをクリックしてご自身の GitHub アカウントに containerapps-album リポジトリが作成されたことを確認します

4. ローカル環境へのリポジトリのクローン

  • API アプリ

    開発環境で作業を行うために、ご自身の GitHub アカウントに作成した演習用アプリケーション containerapps-albumapi-javascript をローカルにクローンします。

    手順は以下のとおりです。

    1. Web ブラウザーでご自身の GitHub アカウントに作成したcontainerapps-albumapi-javascript のリポジトリにアクセスします

    2. [Code] ボタンをクリックします。[HTTPS] タブをアクティブにし、表示されている URL をコピーボタンをクリックしてクリップボードにコピーします
      操作画面イメージ

    3. ローカルの任意のフォルダ(ディレクトリ) にターミナル(コマンド プロンプト)からアクセスし、以下のコマンドを実行します

      git clone %前の手順でコピーしたリポジトリの URL%

    4. コマンドの実行が終了したら ls コマンドで containerapps-albumapi-javascript フォルダが作成されていることを確認し、cd コマンドで作業ディレクトリを containerapps-albumapi-javascript に切り替えます。cd コマンドの具体的な書式は以下です

      cd containerapps-albumapi-javascript

    5. npm install コマンドを実行してプロジェクトと依存関係のあるモジュールをインストールします。コマンドの具体的な書式は以下です。

      npm install

  • UI アプリ

    プロジェクト containerapps-albumui に対しても上記と同様の処理を行います。