次の方法で共有

チュートリアル: Azure Static Web Apps での GitLab リポジトリのデプロイ

  • [アーティクル]

Azure Static Web Apps には、さまざまなプロバイダーと連携できる柔軟なデプロイ オプションがあります。 この記事では、GitLab でホストされる Web アプリケーションを Azure Static Web Apps にデプロイします。

このチュートリアルで学習する内容は次のとおりです。

  • リポジトリを GitLab にインポートする
  • 静的 Web アプリを作成する
  • GitLab リポジトリを構成して Azure Static Web Apps にデプロイする

前提条件

リポジトリを作成する

この記事では、ソースとして GitHub リポジトリを使用して、GitLab リポジトリにコードをインポートします。

  1. GitLab アカウントにサインインし、https://gitlab.com/projects/new#import_project に移動します

  2. [Repo by URL] (URL 別のリポジトリ) を選びます。

  3. [Git リポジトリ URL] ボックスに、選択したフレームワークのリポジトリ URL を入力します。

  4. [プロジェクト スラグ] ボックスに「my-first-static-web-app」と入力します。

  5. [Create project] (プロジェクトの作成) を選び、リポジトリが設定されるまでしばらく待ちます。

静的 Web アプリを作成する

リポジトリが作成されたので、Azure portal から静的 Web アプリを作成できます。

  1. Azure ポータルにアクセスします。

  2. [リソースの作成] を選択します。

  3. Static Web Apps を検索します。

  4. Static Web Apps を選択します。

  5. ［作成］ を選択します

  6. [基本] セクションで、新しいアプリを構成することから始めます。

    設定 値
    Azure サブスクリプション Azure サブスクリプションを選択します。
    リソース グループ [新規作成] リンクを選択し、「static-web-apps-gitlab」と入力します。
    名前 my-first-static-web-app を入力します。
    プランの種類 [無料] を選択します。
    ソース [その他] を選択します。

  7. [Review + create](レビュー + 作成) を選択します。

  8. ［作成］ を選択します

  9. [リソースに移動] を選択します。

  10. [Manage deployment token](デプロイトークンの管理) を選択します。

  11. デプロイ トークンの値をコピーし、後で使用できるようにエディターで保存します。

  12. [Manage deployment token] (デプロイ トークンの管理) ウィンドウの [閉じる] を選びます。

GitLab でパイプライン タスクを作成する

デプロイ トークンを取得したら、変更を行う際にサイトのビルドとデプロイを担当するワークフロー タスクを追加します。

デプロイ トークンを追加する

以下の手順を実行するときは、環境セクションの * を選択するようにしてください。 既定値は all のように見えるかもしれませんが、ドロップダウンを選択して手動で * を選択する必要があります。

  1. GitLab のリポジトリに移動します。

  2. [設定] を選択します。

  3. [CI/CD] を選択します。

  4. [変数] セクションの横にある [展開] ボタンを選びます。

  5. [変数の追加] を選びます。

  6. [キー] ボックスに、「DEPLOYMENT_TOKEN」と入力します。

  7. [値] ボックスに、前の手順で設定したデプロイ トークンの値を貼り付けます。

  8. [変数の追加] を選びます。

ファイルの追加

  1. GitLab でリポジトリのメイン画面に戻ります。

  2. [編集] ボタンを選択し、[Web IDE] を選択します。

  3. 分岐ドロップダウンで [メイン] ブランチが選択されていることを確認します。

  4. リポジトリのルートに .gitlab-ci.yml という名前の新しいファイルを作成します。 (ファイル拡張子が .yml であることを確認してください)。

  5. 次の YAML をファイルに入力します。

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    .gitlab-ci.yml ファイルでは、次の構成プロパティを使用して、静的な Web アプリを構成します。

    $CI_PROJECT_DIR 変数は、ビルド処理中にリポジトリのルート フォルダーの場所にマップされます。

    プロパティ 説明 例 必須
    APP_PATH アプリケーション コードの場所です。 アプリケーションのソース コードがリポジトリのルートにある場合は「$CI_PROJECT_DIR/」を入力し、アプリケーション コードが app という名前のフォルダーにある場合は「$CI_PROJECT_DIR/app」を入力します。 はい
    API_PATH Azure Functions コードの場所です。 アプリ コードが api という名前のフォルダーにある場合は、「$CI_PROJECT_DIR/api」を入力します。 No
    OUTPUT_PATH APP_PATH を基準としたビルド出力フォルダーの場所です。 アプリケーションのソース コードが $CI_PROJECT_DIR/app にあり、ビルド スクリプトによってファイルが $CI_PROJECT_DIR/app/build フォルダーに出力される場合、$CI_PROJECT_DIR/app/build を値 OUTPUT_PATH として設定します。 いいえ
    API_TOKEN デプロイ用の API トークン。 API_TOKEN: $DEPLOYMENT_TOKEN はい

  6. メイン ブランチに変更をコミットし、Web IDE を閉じます。

  7. サイトに戻り、[設定]>[CI/CD]>[汎用パイプライン] メニュー項目を選択して、デプロイの進行状況を確認します。

デプロイが完了したら、Web サイトを表示できます。

Web サイトを表示する

静的アプリのデプロイには 2 つの側面があります。 最初の手順で、アプリを構成する基になる Azure リソースを作成します。 2 つ目は、アプリケーションをビルドして発行する GitLab ワークフローです。

新しい静的サイトに移動する前にまず、デプロイ ビルドの実行が完了している必要があります。

Static Web Apps の概要ウィンドウには、Web アプリとの対話に役立つ一連のリンクが表示されます。

  1. Azure portal で静的 Web アプリに戻ります。

  2. [概要] ウィンドウに移動します。

  3. [URL] ラベルの下のリンクを選択します。 Web サイトが新しいタブに読み込まれます。

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

このアプリケーションを引き続き使用しない場合は、リソース グループを削除することで、Azure Static Web Apps インスタンスと関連付けられているすべてのサービスを削除できます。

  1. [概要] セクションで、static-web-apps-gitlab リソース グループを選択します。

  2. リソース グループの [概要] の上部で [リソース グループの削除] を選びます。

  3. ["static-web-apps-gitlab" を削除しますか?] 確認ダイアログにリソース グループ名「static-web-apps-gitlab」を入力します。

  4. [削除] を選択します。

リソース グループを削除するプロセスが完了するまでに数分かかる場合があります。

次のステップ

API を追加する