クイック スタート: Azure Developer CLI テンプレートを使用して、GitHub Codespaces からAzureにPython Web アプリを作成してデプロイする

このクイック スタートでは、Python Web およびデータベース ソリューションを作成してAzureにデプロイする最も簡単で最速の方法について説明します。 このクイック スタートの手順に従うと、次の操作を行うことができます。

• Azure Developer CLI (azd) テンプレートを、構築するPython Web フレームワーク、Azure データベース プラットフォーム、Azure Web ホスティング プラットフォームに基づいて選択します。
• 選択した azd テンプレートから生成されたコードを含む新しいGitHub Codespace を作成します。
• GitHub Codespaces とオンライン Visual Studio Codeの bash ターミナルを使用します。 ターミナルを使用すると、Azure Developer CLI コマンドを使用して、azd テンプレートを実行してサンプル Web アプリとデータベースを作成し、必要なAzure リソースを作成して構成し、サンプル Web アプリをAzureにデプロイできます。
• GitHub Codespace で Web アプリを編集し、azd コマンドを使用して再デプロイします。
• azd コマンドを使用して、Azureリソースをクリーンアップします。
• GitHub Codespace を閉じてから再度開きます。
• GitHub リポジトリに新しいコードを発行します。

このチュートリアルを完了するには、25 分未満が必要です。 完了したら、カスタム コードを使用して新しいプロジェクトの変更を開始できます。

Python Web アプリ開発用のこれらの azd テンプレートの詳細については、次を参照してください。

• これらのテンプレートは何ですか?
• テンプレートのしくみ
• なぜ私はこれを使用したいのですか?
• その他のオプションは何ですか?

[前提条件]

• Azure サブスクリプション - 無料で作成します
• GitHubアカウント - 無料で作成

テンプレートを選択してコードスペースを作成する

Python Web フレームワーク、Azure Web ホスティング プラットフォーム、および構築するAzure データベース プラットフォームに基づいて、azd テンプレートを選択します。

1. 次のテンプレートの一覧から、新しい Web アプリケーションで使用するテクノロジを使用するテンプレートを選択します。

   • Django
   • FastAPI
   • フラスコ

   テンプレート	ウェブフレームワーク	データベース	ホスティング プラットフォーム	新しい Codespace
   Azure-Django-Postgres フレキシブル ACA	Django	PostgreSQL フレキシブル サーバー	Azure Container Apps	New Codespace
   azure-django-postgres-flexible-appservice	Django	PostgreSQL フレキシブル サーバー	Azure App Service	New Codespace
   azure-django-cosmos-postgres-aca	Django	Cosmos DB (PostgreSQL アダプター)	Azure Container Apps (アジュール コンテナー アプリ)	New Codespace
   azure-django-cosmos-postgres-appservice	Django	Cosmos DB (PostgreSQL アダプター)	Azure App Service	New Codespace
   azure-django-postgres-addon-aca	Django	Azure Container Apps PostgreSQL アドオン	Azure コンテナー アプリケーション (Azure Container Apps)	New Codespace

2. 便宜上、各テーブルの最後の列には、新しい Codespace を作成し、GitHub アカウントで azd テンプレートを初期化するリンクが含まれています。 選択したテンプレート名の横にある [新しいコードスペース ] リンクを右クリックし、[ 新しいタブで開く] を選択してセットアップ プロセスを開始します。

   このプロセス中に、GitHub アカウントにサインインするように求められる場合があります。 また、Codespace を作成することを確認するように求められます。 [ コードスペースの作成 ] ボタンを選択すると、[ コードスペースの設定 ] ページが表示されます。

3. 数分後、Web ベースのバージョンのVisual Studio Codeが新しいブラウザー タブに読み込まれ、Python Web テンプレートがエクスプローラー ビューのワークスペースとして読み込まれます。

azd テンプレートをAzureしてデプロイするための認証

新しく生成されたコードを含む GitHub Codespace が作成できたので、Codespace 内から azd ユーティリティを使用して、コードをAzureに発行します。

1. Web ベースのVisual Studio Codeでは、ターミナルは既定で開かれています。 そうでない場合は、チルダ キーを使用してターミナルを開きます。 既定では、ターミナルは bash ターミナルです。 そうでない場合は、ターミナル ウィンドウの右上の領域で bash に変更します。

2. bash ターミナルで、次のコマンドを入力します。

   azd auth login
   

   azd auth login は、Azure アカウントへの Codespace の認証を開始します。

   Start by copying the next code: XXXXXXXXX
   Then press enter and continue to log in from your browser...
   
   Waiting for you to complete authentication in the browser...
   

3. 次のような手順に従います。

   • 生成されたコードのコピー
   • Enter キーを押して新しいブラウザー タブを開き、テキスト ボックスにコードを貼り付ける
   • 一覧からAzure アカウントを選択する
   • Microsoft Azure CLI にサインインしようとしていることを確認する

4. 成功すると、ターミナルの Codespaces タブに次のメッセージが表示されます。

   Device code authentication completed.
   Logged in to Azure.
   

5. 次のコマンドを入力して、新しいアプリケーションをAzureにデプロイします。

   azd up
   

   このプロセスでは、次の操作を行うように求められます。

   • Enter a new environment name (新しい環境の名前を入力してください)
   • 使用するAzureサブスクリプションを選択します[矢印を使用して移動し、フィルターに入力]
   • 使用するAzureの場所を選択します:[矢印を使用して移動し、フィルターに入力]

   これらの質問に答えると、 からの出力はデプロイが進行中であることを示します。

   Von Bedeutung

   azd upが正常に完了すると、サンプル Web アプリがパブリック インターネットで使用できるようになり、Azure サブスクリプションで作成されたすべてのリソースに対する料金の発生が開始されます。 テンプレートの作成者は、意図的に安価なレベルを選択しましたが、Free レベルでは可用性が制限されることが多いため、必ずしも Free レベルを選択したわけではありません。 サンプル Web アプリの操作が完了したら、 を使用して、作成されたすべてのサービス 削除します。

   支払いに使用するサブスクリプションAzure選択するように求められたら、指示に従って、使用するAzureの場所を選択します。 地理的に近いリージョンを選択します。

   azd up の実行は、複数のAzure サービスをプロビジョニングしてデプロイするため、数分かかる場合があります。 進行状況が表示されたら、エラーを監視します。 エラーが表示される場合は、このドキュメントの下部にある 「トラブルシューティング 」セクションを参照してください。

6. が正常に完了すると、同様の出力が表示されます。

   (✓) Done: Deploying service web
   - Endpoint: https://xxxxx-xxxxxxxxxxxxx-ca.example-xxxxxxxx.westus.azurecontainerapps.io/
   
   SUCCESS: Your application was provisioned and deployed to Azure in 11 minutes 44 seconds.
   You can view the resources created under the resource group xxxxx-rg in Azure portal:
   https://portal.azure.com/#@/resource/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/xxxxx-rg/overview
   

   既定の画面またはエラー画面が表示された場合は、アプリが起動している可能性があります。 トラブルシューティングを行う前に、5 ~ 10 分待って問題が解決するかどうかを確認します。

   1. Ctrl キーを押しながら、- Endpoint: という単語の後の最初の URL をクリックすると、Azureで実行中のサンプル Web アプリ プロジェクトが表示されます。

7. Ctrl キーを押しながら前の手順の 2 番目の URL をクリックすると、Azure ポータルにプロビジョニングされたリソースが表示されます。

編集と再デプロイ

次に、Web アプリに小さな変更を加えてから、再デプロイします。

1. Visual Studio Codeが含まれているブラウザー タブに戻ります。 Visual Studio Codeのエクスプローラー ビューを使用して、src/templates フォルダーに移動します。 index.html ファイルを開きます。 次のコード行を見つけます。

   <h1 id="page-title">Welcome to ReleCloud</h1>
   

   H1 内のテキストを変更します。

   <h1 id="page-title">Welcome to ReleCloud - UPDATED</h1>
   

   コードは入力時に保存されます。

2. 変更を加えてアプリを再デプロイするには、ターミナルで次のコマンドを実行します。

   azd deploy
   

3. コマンドが完了したら、ReleCloud Web サイトでブラウザー タブを更新して更新を確認します。 使用している Web ホスティング プラットフォームによっては、変更が表示されるまでに数分かかる場合があります。

   これで、テンプレート内のファイルを編集および削除する準備ができました。 詳細については、「テンプレートで何を編集または削除できるか」を参照してください。

リソースをクリーンアップする

azd down コマンドを実行して、テンプレートによって作成されたリソースをクリーンアップします。

azd down

azd down コマンドは、Azure リソースとGitHub Actions ワークフローを削除します。 メッセージが表示されたら、リソース グループに関連付けられているすべてのリソースを削除することに同意します。

オプション: codespace を検索

このセクションでは、Codespace でコードが一時的に実行され、短期的に永続化される方法について説明します。 引き続きコードの作業を行う場合は、コードを新しいリポジトリに発行します。

1. このクイック スタート記事に関連するすべてのタブを閉じるか、Web ブラウザーを完全にシャットダウンします。

2. Web ブラウザーと新しいタブを開き、 に移動します。

3. 下部の近くに、最近使用したコードスペースの一覧が表示されます。 「Owned by Azure-Samples」というタイトルのセクションであなたが作成したものを探してください。

4. コンテキスト メニューを表示するには、この Codespace の右側にある省略記号を選択します。 ここから、コードスペースの名前変更、新しいリポジトリへの発行、マシンの種類の変更、コードスペースの停止などを行うことができます。

省略可能: Codespaces からGitHub リポジトリを発行する

この時点で、Codespace は GitHub によってホストされているコンテナで、新たに azd テンプレートから生成されたコードを使用して Visual Studio Code 開発環境を実行しています。 ただし、コードはGitHub リポジトリに格納されません。 引き続きコードの作業を行う場合は、リポジトリへの格納に優先順位を付けます。

1. コードスペースのコンテキスト メニューから、[ 新しいリポジトリに発行] を選択します。
2. [ 新しいリポジトリへの発行 ] ダイアログで、新しいリポジトリの名前を変更し、パブリック リポジトリとプライベート リポジトリのどちらを使用するかを選択します。 [Create repository] (リポジトリの作成) を選択します。
3. しばらくすると、リポジトリが作成され、このクイック スタートで前に生成したコードが新しいリポジトリにプッシュされます。 [ リポジトリの表示 ] ボタンを選択して、新しいリポジトリに移動します。
4. 再度開いてコードの編集を続けるには、緑色の [ Code] ドロップダウンを選択し、[ Codespaces ] タブに切り替えて、前に作業していた Codespace の名前を選択します。 Codespace Visual Studio Code開発環境に戻ります。
5. [ソース管理] ウィンドウを使用して、新しいブランチとステージを作成し、コードに新しい変更をコミットします。

トラブルシューティング

中にエラーが表示される場合は、次の手順を試してください。

• を実行して、コマンドによって作成されたすべてのリソースを削除します。 または、Azure ポータルで作成したリソース グループを削除することもできます。
• GitHub アカウントの Codespaces ページに移動し、このクイック スタートで作成した Codespace を見つけ、右側にある省略記号を選択し、コンテキスト メニューから Delete を選択します。
• Azure ポータルで、Key Vault を検索します。 [ 削除されたコンテナーの管理] を選択し、サブスクリプションを選択し、 azdtest という名前または環境に名前を付けたものを含むすべてのキー コンテナーを選択して、[ 消去] を選択します。
• このクイック スタートの手順を再試行してください。 今回は、プロンプトが表示されたら、環境の単純な名前を選択します。 短い名前、小文字、数字、大文字、特殊文字を使用しないようにしてください。
• クイック スタートの手順を再試行するときは、別の場所を選択します。

考えられる問題と解決策のより包括的な一覧については、 FAQ を参照してください。

関連コンテンツ

• Python Web azd テンプレートの詳細を確認する
• コマンドの詳細を確認します。
• プロジェクト内の各フォルダーとファイルの内容と、 編集または削除できる内容について説明します。
• GitHub Codespaces
• Bicep テンプレートを更新して、Azure サービスを追加または削除します。 Bicepをご存知ですか？ このラーニング パス「Bicep の基礎」を試してください
• azd を使用して、メイン ブランチへのマージ時に再デプロイする GitHub Actions CI/CD パイプラインを設定します
• Azure Developer CLI監視できるように監視を設定します>