Azure Static Web Apps でのデプロイ

Nuxt アプリケーションを Azure Static Web Apps でどうやってデプロイするのか？

静的サイトを Azure static web apps を使用して Azure にデプロイできます。Azure static web apps は GitHub アクションを利用して、git push ごとに静的サイトを再構築できるため、アプリを GitHub に置いておく必要があります。

Azure static web apps にアプリケーションをデプロイするには順番に 2 つの設定をする必要があります。最初に Azure が package.json から build コマンドを読み込んでいるので、build コマンドを修正し、また静的サイトでは generate コマンドを使用する必要があります。

package.json

build: "nuxt generate"

2 つ目はカスタム 404 ページと spa フォールバックページを取得するのに重要な routes.json ファイルの追加です。

static/routes.json

{
 "routes": [],
 "platformErrorOverrides": [
   {
    "errorType": "NotFound",
    "serve": "/200.html",
    "statusCode": 200
   }
 ]
}

Azure static web apps へのデプロイを実際試してみたい人のために、全ての構成・設定をした小さなデモ・アプリケーションを作成しました。使用する場合そのアプリケーションをクローンし、GitHub リポジトリに追加してください。次に「Azure Static Web Apps でアプリケーションをデプロイする」のステップに従ってください。

デモ・アプリケーションをクローンしてください

Azure Static Web Apps でアプリケーションをデプロイする

ステップ 1: Azure static web apps を作成する

Azure Portal に移動してください。
Create a Resource をクリックし、Static App を検索して選択してください。
Subscription ドロップダウンリストの中からサブスクリプションを選択するか、デフォルトのものを使用してください。
Resource group ドロップダウンの下の New リンクをクリックしてください。New resource group name 内に nuxt と入力し OK をクリックしてください。
Name テキストボックスにアプリケーションのグローバルで一意な名前を入力してください。有効な文字は a-z、A-Z、0-9、そして - です。アプリケーション名はリソースのリストでアプリを識別するために使用されます。したがってリポジトリの名前を使用してアプリケーションを命名するのをおすすめします。
Region ドロップダウン内から、最も近い地域を選択してください。

Azure Portalのリソースとアプリのセットアップ

ステップ 2: GitHub リポジトリの追加

Azure App Service の Static App は Nuxt アプリケーションが格納されているリポジトリへのアクセスを必要とし、自動でコミットをデプロイすることができます：

Sign in with GitHub button をクリックしてください
Nuxt プロジェクトのために作成したリポジトリの Organization を選択してください。また GitHub のユーザー名でも良いです。
先ほど作成したリポジトリの名前を探して選択してください。
Branch ドロップダウンからブランチとして master を選択してください。

github への追加の仕方

ステップ 3: ビルド・プロセスの設定

Azure App Service の Static App が想定できることはいくつかあります。それは npm の自動インストールや、npm run build の実行です。またビルド後にどのフォルダに静的アプリをコピーして、そこから静的サイトを提供するかなど、明確にしなければならないこともあります。