Azure Static Web Apps で Vue アプリをデプロイする

この記事では、Azure portal を使用して、Vue アプリを Azure Static Web Apps にデプロイする方法について説明します。

前提条件

リソース	メモ
Azure サブスクリプション	Azure サブスクリプションを持っていない場合は、無料試用版アカウントを作成できます。
GitHub アカウント	GitHub アカウントがない場合は、無料で作成できます。

リソース	メモ
Azure サブスクリプション	Azure サブスクリプションを持っていない場合は、無料試用版アカウントを作成できます。
Azure DevOps アカウント	GitHub アカウントがない場合は、作成できます。

リポジトリを作成する

この記事では、簡単に作業を開始できるように、GitHub テンプレート リポジトリを使用します。 テンプレートには、Azure Static Web Apps にデプロイするスターター アプリが含まれます。

1. 次の場所に移動して、新しいリポジトリを作成します。

   https://github.com/staticwebdev/vue-basic/generate

2. リポジトリの名前を my-first-static-web-app に設定します

3. [Create repository from template](テンプレートからリポジトリを作成する) を選択します。

   

この記事では、簡単に作業を開始できるように、Azure DevOps リポジトリを使用します。 このリポジトリには、Azure Static Web Apps を使用してデプロイするために使用されるスターター アプリが含まれています。

1. Azure DevOps にサインインします。

2. [新しいリポジトリ] を選択します。

3. [新しいプロジェクトの作成] ウィンドウで、[詳細設定] メニューを展開し、次の選択を行います。

   設定	値
   Project	「my-first-web-static-app」と入力します。
   表示	[プライベート] を選択します。
   バージョン コントロール	[Git] を選択します。
   作業項目プロセス	開発方法に最適なオプションを選択します。

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

5. [リポジトリ] メニュー項目を選択します。

6. [ファイル] メニュー項目を選択します。

7. [リポジトリのインポート] カードで、[インポート] を選択します。

8. 任意のフレームワークのリポジトリ URL をコピーして、[クローン URL] ボックスに貼り付けます。

   https://github.com/staticwebdev/vue-basic.git

9. [インポート] を選択し、インポート プロセスが完了するまで待ちます。

静的 Web アプリを作成する

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

1. Azure ポータルにアクセスします。
2. [リソースの作成] を選択します。
3. 「Static Web App」で検索します。
4. [Static Web App](静的 Web アプリ) を選択します。
5. ［作成］ を選択します

[基本] セクションで、新しいアプリを構成し、それを GitHub リポジトリにリンクすることから始めます。

設定	値
サブスクリプション	Azure サブスクリプションを選択します。
リソース グループ	[新規作成] リンクを選択し、テキスト ボックスに「static-web-apps-test」と入力します。
名前	テキスト ボックスに、「my-first-static-web-app」と入力します。
プランの種類	[無料] を選択します。
ソース	必要に応じて、GitHub を選択して GitHub にサインインします。

GitHub にサインインしたら、リポジトリ情報を入力します。

設定	値
Organization	自分の組織を選択します。
リポジトリ	[my-first-web-static-app] を選択します。
[Branch]\(ブランチ)	[main](メイン) を選択します。

Note

リポジトリが表示されない場合、次の手順を実行します。

• GitHub で Azure Static Web Apps を承認する必要がある場合があります。 GitHub リポジトリを参照し、[設定] > [アプリケーション] > [認可された OAuth アプリ] の順に移動して、[Azure Static Web Apps]、[許可] の順に選択します。
• Azure DevOps 組織で Azure Static Web Apps を承認する必要がある場合があります。 アクセス許可を付与する組織の所有者である必要があります。 OAuth を使用してサード パーティ アプリケーションのアクセスを要求します。 詳細については、OAuth 2.0 を使用した REST API へのアクセスの承認に関する記事を参照してください。

[基本] セクションで、新しいアプリを構成し、それを Azure DevOps リポジトリにリンクすることから始めます。

設定	値
サブスクリプション	Azure サブスクリプションを選択します。
リソース グループ	[新規作成] リンクを選択し、テキスト ボックスに「static-web-apps-test」と入力します。
名前	テキスト ボックスに、「my-first-static-web-app」と入力します。
プランの種類	[無料] を選択します。
ソース	[DevOps] を選択します。
Organization	自分の組織を選択します。
Project	プロジェクトを選択します。
リポジトリ	[my-first-web-static-app] を選択します。
[Branch]\(ブランチ)	[main](メイン) を選択します。

Note

使用しているブランチが保護されていないこと、および push コマンドを発行するための十分なアクセス許可があることを確認します。 確認するには、DevOps リポジトリを参照し、[リポジトリ] ->[ブランチ] に移動し、[その他のオプション] を選択します。 次に、ブランチを選択し、その後 [ブランチ ポリシー] を選択して、必要なポリシーが有効になっていないことを確認します。

[ビルドの詳細] セクションで、使用するフロントエンド フレームワークに固有の構成の詳細を追加します。

1. [ビルドのプリセット] ドロップダウンから [Vue.js] を選択します。

2. [App location](アプリの場所) ボックスは既定値のままにします。

3. [Api location](API の場所) ボックスは空のままにします。

4. [出力場所] ボックスは既定値のままにします。

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

Note

アプリを作成した後にこれらの値を変更するには、ワークフロー ファイルを編集します。

［作成］ を選択します

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

Web サイトを表示する

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

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

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

1. [概要] で [GitHub アクションの実行] を選択すると、リポジトリに対して実行されている GitHub Actions に移動します。 続行する前に、デプロイ アクションが完了していることを確認します。

2. GitHub Actions ワークフローが完了したら、URL リンクを選択して、新しいタブで Web サイトを開くことができます。

ワークフローが完了したら、[URL] リンクを選択して、新しいタブで Web サイトを開くことができます。

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

このアプリケーションを引き続き使用しない場合は、次の手順を使用して Azure Static Web Apps インスタンスを削除することができます。

1. Azure portal を開きます。
2. 上部の検索バーから my-first-web-static-app を検索します。
3. アプリの名前を選択します。
4. [削除] を選択します。
5. [はい] を選択して削除アクションを確定します (このアクションが完了するまでにしばらく時間がかかる場合があります)。

次のステップ

アプリケーションに API を追加する