次の方法で共有

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

  • [アーティクル]

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

  • 構築する Python Web フレームワーク、Azure データベース プラットフォーム、Azure Web ホスティング プラットフォームに基づいて、Azure Developer CLI (azd) テンプレートを選択します。
  • 選択したテンプレートから生成されたコードを含む新しい GitHub Codespace を azd 作成します。
  • 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 テンプレートの詳細については、以下を参照してください。

前提条件

重要

GitHub Codespaces と Azure の両方が有料サブスクリプション ベースのサービスです。 一部の無料割り当ての後、これらのサービスの使用に対して課金される場合があります。 このクイック スタートに従って、これらの割り当てまたは課金に影響を与える可能性があります。 可能であれば、テンプレートは azd 最も安価なレベルのオプションを使用して構築されましたが、一部は無料ではない可能性があります。 コストをより 深く理解するには、Azure 料金計算ツール を使用します。 詳細については、 GitHub Codespaces の価格 に関するページを参照してください。

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

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

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

    Template Web Framework データベース ホスティング プラットフォーム 新しい Codespace
    azure-django-postgres-flexible-aca Django PostgreSQL フレキシブル サーバー Azure Container Apps 新しい Codespace
    azure-django-postgres-flexible-appservice Django PostgreSQL フレキシブル サーバー Azure App Service 新しい Codespace
    azure-django-cosmos-postgres-aca Django Cosmos DB (PostgreSQL アダプター) Azure Container Apps 新しい Codespace
    azure-django-cosmos-postgres-appservice Django Cosmos DB (PostgreSQL アダプター) Azure App Service 新しい Codespace
    azure-django-postgres-addon-aca Django Azure Container Apps PostgreSQL アドオン Azure Container Apps 新しい Codespace

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

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

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

Azure に対する認証と azd テンプレートのデプロイ

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

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

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

    azd auth login

    azd auth login は、Codespace を Azure アカウントに対して認証するプロセスを開始します。

    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 の場所を選択します:[矢印を使用して移動し、フィルターに入力]

    これらの質問に答えると、デプロイが進行中であることが出力 azd されます。

    重要

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

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

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

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

    (✓) 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 分待って問題が解決するかどうかを確認してください。

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

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

編集と再デプロイ

次の手順では、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 に保持される方法を示します。 引き続きコードの作業を行う場合は、新しいリポジトリにコードを発行する必要があります。

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

  2. Web ブラウザーと新しいタブを開き、次の場所に移動します。 https://github.com/codespaces

  3. 下部の近くに、最近使用した Codespace の一覧が表示されます。 "Owned by Azure-Samples" というタイトルのセクションで作成したファイルを探します。

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

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

この時点で、Codespace は、テンプレートから azd 生成された新しいコードを使用して Visual Studio Code 開発環境を実行する GitHub によってホストされるコンテナーです。 ただし、コードは GitHub リポジトリに格納されません。 引き続きコードに取り組む予定がある場合は、その優先順位を設定する必要があります。

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

トラブルシューティング

エラーが発生した azd up場合は、次の手順を試してください。

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

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

関連するコンテンツ