チュートリアル: 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 を入力します。
    プランの種類 [無料] を選択します。
    Azure Functions API のリージョンとステージング環境 最も近いリージョンを選択します。
    source [その他] を選択します。

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

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

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

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

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

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

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

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

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

以下の手順に従うときは、必ず環境セクションで * を選択してください。 既定値がすべてのように見えることがありますが、ドロップダウンをクリックして、手動で * を選択する必要があります。

  1. GitLab のリポジトリに移動します。
  2. [設定] を選択します。
  3. [CI/CD] を選択します。
  4. [変数] セクションの横にある [展開] ボタンを選びます。
  5. [変数の追加] を選びます。
  6. [キー] ボックスに、「DEPLOYMENT_TOKEN」と入力します。
  7. [値] ボックスに、前の手順で設定したデプロイ トークンの値を貼り付けます。
  8. [変数の追加] を選びます。

ファイルの追加

  1. [リポジトリ] メニュー オプションを選択します。

  2. [ファイル] を選択します。

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

  4. プラス記号のドロップダウンを押し、[新規ファイル] を選択します。

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

  6. 次の 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 はい

  7. [Commit changes] (変更をコミットする) を選びます。

  8. [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 を追加する