タスク 4 - Azure Container Apps の作成とコンテナーアプリのデプロイ

タスク 4

タスク 3 で、Azure コンテナー レジストリに Push した Docker イメージをホストするための Azure Container Apps のリソースを作成します。

タスク 4-1 : Azure Container Apps のデプロイ

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

手順

  1. Azure ポータルにログインし、画面左上端のハンバーガーメニューをクリックし、リソースの作成 メニューを選択します。

  2. 遷移した [リソースの作成] 画面の左側のメニューで、[コンテナー] をクリックすると、コンテナー関連の Azure のサービスの一覧が表示されるので [コンテナー アプリ] をクリックします。
    操作画面イメージ

  3. コンテナー アプリの作成 画面に遷移するので、各項目を以下のように設定して [次へ : コンテナー >] ボタンをクリックします。

    プロジェクトの詳細

    項目 値
    サブスクリプション* (この演習に使用する任意のサブスクリプション)
    リソース グループ* Handson01-XXX (タスク 3で作成したリソース グループを使用)
    コンテナー アプリ名 handson01api
    地域* Japan East
    Container Apps 環境* 新規作成
    操作画面イメージ

    Container Apps 環境 [新規作成] ボタンをクリックし、各項目を以下のように設定て、[作成] ボタンをクリックします。

    項目 値
    環境名* Handson01-XXX-env
    環境の種類* 従量課金のみ
    ゾーン冗長* 無効
    操作画面イメージ

  4. [コンテナー] のタブがアクティブになるので、同画面の [クイックスタート イメージを使用する] チェックボックスのチェックを外すと、コンテナーの詳細内の項目が変わるので、各項目を以下のように設定します。

    コンテナーの詳細

    項目 値
    名前 albumapi
    イメージのリソース Azure Container Registry にチェック
    サブスクリプション* (この演習に使用する任意のサブスクリプション)
    レジストリ* ドロップダウンリストから Handson01Repo%任意の情報を付加したもの% を選択
    イメージ* ドロップダウンリストから containerapps-albumapi-javascript (もしくはacabackendjavascript)を選択
    イメージタグ* 任意のもの

    コンテナー リソースの割り当て

    このセクションの設定は既定のまま [イングレス] タブボタンをクリックします。

    操作画面イメージ

  5. [イングレス] のタブがアクティブになるので、各項目を以下のように設定します。

    項目 [イングレス] の設定に 無効 と書かれた空のチェックボックスが表示されていますが、クリックすると [有効] に表示が変わり、追加の設定項目が表示されますので以下のように設定します。

    項目 値
    イングレス トラフィック どこからでもトラフィックを受け入れます にチェック
    セキュリティで保護されていない接続 チェックしない
    ターゲット ポート* 3500

    その他の設定は既定のまま [確認と作成] ボタンをクリックします。

    操作画面イメージ

  6. [確認と作成] タブがアクティブになり、画面下の [作成] ボタンが有効になるのを待ってクリックします。

    デプロイが開始され、完了すると デプロイが完了しました というメッセージと [リソースに移動] というボタンが表示されるのでクリックして作成したコンテナ アプリの構成画面に遷移します。

  7. [概要] 画面が表示されているので、項目 [アプリケーション URL] の URL と [Container Apps 環境] の URL をコピーしてメモ帳などに保持します。この 2 つの URL はこの後の作業で containerapps-albumui をデプロイする際に使用します。

    項目 [アプリケーション URL] の URL を Web ブラウザーのアドレスバーに入力し、Web ブラウザーの画面に以下の内容が表示されればサービスは正常に動作しています。

     {"message":"Call the /albums route to retrieve a list of albums"}

    さらに Web ブラウザーのアドレスバーの URL の末尾に /albums を追加して JSON が返ることを確認してください。

上記の手順で、API 側のコンテナのデプロイは完了です。

UI 側のコンテナのデプロイは Azure ポータルから、前の手順で作成した Container Apps 環境の [アプリ] メニュー内の [+ 作成] メニューからもできますが、ここでは Azure CLI を使用した方法を紹介します。

タスク 4-2 : Azure CLI を使用した Azure コンテナー アプリ環境への Docker イメージのデプロイ

この演習では Azure CLI を使用します。

ターミナル ウィンドウで az とタイプして、キーボードの Enter キーを押下しコマンドの一覧が返らない場合は Azure CLI がインストールされていませんので、以下のドキュメントの内容に従い Azure CLI をインストールしてください。

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

手順

ローカル環境のターミナル ウインドウから Azure CLI を使用して containerapps-albumui のコンテナーアプリをデプロイします。

コマンドの書式は以下のとおりですが、引数として与える情報を Azure ポータルで確認します。

az containerapp create ^
    -n %作成するアプリ名% ^
    -g %タスク 3 で作成したリソースグループ名%  ^
    --environment %Container Apps 環境名%  ^
    --image %レジストリ ホスト/Docker イメージ名:タグ%  ^
    --registry-server %レジストリ ホスト%  ^
    --env-vars "%環境変数名=値%"  ^
    --ingress external --target-port %使用するポート番号%

今回のコマンドを実行するにおいて、リソースグループ名や Container Apps 環境名、環境変数については、これまでの手順で分かっているので、あらためて確認が必要な以下のコマンドライン引数に設定する値について確認します。

–image, –registry-server

  1. Azure ポータルにログインし、ここまでの演習で作成したコンテナーレジストリ handson01repo%付加した一意の情報% の構成画面を開きます。

  2. コンテナーレジストリ の [概要] の画面が表示されるので、 画面内の [ログイン サーバー] の URL をコピーします。

    この URL をコマンドライン引数の –registry-server に指定します。

  3. 画面左のメニューより [リポジトリ] をクリックします。

  4. Docker イメージの一覧が表示されるので、一覧から containerapps-albumui (もしくはacafrontend) をクリックします。

  5. 画面が遷移し、[タグ] の一覧が表示されるので、最新のタグのリンクをクリックします

  6. 遷移した画面では [マニフェスト] タブがアクティブなっているので、同タブ内の [Docker pull コマンド] に表示されているコマンドラインの “docker pull” から後ろの URL の部分だけをコピーします。 この URL をコマンドライン引数の –image に指定します。

確認の手順はここまでです。

ここまでの手順を踏まえ、ターミナル画面で az コマンドを実行します。 具体的な方法は以下のとおりです。

  1. 以下のコマンドを実行して Azure CLI から Azure にログインします。

     az login

  2. 以下のコマンドをここまでの手順で確認した内容で更新し、実行します。

     az containerapp create ^
     -n handson01ui  ^
     -g Handson01-XXX  ^
     --environment %以前の手順でメモしておいた Container Apps 環境名%  ^
     --image %前の手順で確認したもの%  ^
     --registry-server %前の手順で確認したもの%  ^
     --env-vars "API_BASE_URL=%以前の手順でメモしておいた containerapps-albumapi-javascript の URL%"  ^
     --ingress external  ^
     --target-port 3000

    【Tips:】 Visual Studio Code のターミナルにコマンドを貼り付ける際に、以下の警告を表示された場合は、Paste as one lineボタンをクリックします。

    操作画面イメージ

    コマンドの終了を待ち、Azure ポータルから各自のリソースグループ Handson01-XXX 内に handson01ui が作成されていることを確認します。

  3. handson01ui アイコンをクリックしての構成画面を開き、画面左側のメニューより [コンテナー] をクリックします。

  4. 表示された画面で [環境変数] タブをアクティブにし、環境変数 API_BASE_URL が設定されていることを確認します。
    操作画面イメージ

  5. 画面左側のメニューより [概要] をクリックし、表示された画面内の[アプリケーション URL]のリンクをクリックし、Web ブラウザーの画面にアプリケーションの画面が表示されていれば完了です。
    操作画面イメージ

ここまでの手順て、Node.js アプリケーションのコンテナー化と手動での Azure Container Apps へのデプロイの演習は完了です。