Gatsby サイトを Azure Static Web Apps にデプロイする

[アーティクル]
01/10/2024

この記事では、Gatsby Web アプリケーションを作成して Azure Static Web Apps にデプロイする方法を説明します。最終結果として、アプリの構築と発行の方法を制御できる新しい Static Web Apps サイト (および関連する GitHub Actions) が得られます。

このチュートリアルでは、以下の内容を学習します。

Gatsby アプリの作成
Azure Static Web Apps サイトのセットアップ
Gatsby アプリの Azure へのデプロイ

Azure サブスクリプションをお持ちでない場合は、開始する前に Azure 無料アカウントを作成してください。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。アカウントがない場合は、無料でアカウントを作成することができます。
GitHub アカウント。アカウントがない場合は、無料でアカウントを作成することができます。
Git のセットアップがインストールされていること。まだの場合は、こちらから Git をインストールできます。
Node.js がインストールされていること。

Gatsby アプリの作成

Gatsby コマンドラインインターフェイス (CLI) を使用して Gatsby アプリを作成します。

ターミナルを開きます。
Gatsby CLI を使用して新しいアプリを作成するには、npx ツールを使用します。これには数分かかることがあります。
```
npx gatsby new static-web-app
```
新しく作成されたアプリに移動します
```
cd static-web-app
```

Git リポジトリを初期化します

git init
git add -A
git commit -m "initial commit"

Note

最新バージョンの Gatsby を使っている場合は、必要に応じて "engines": { "node": ">=18.0.0" }, を含むように package.json を変更します。

アプリケーションの GitHub へのプッシュ

新しい Azure Static Web Apps リソースを作成するには、GitHub のリポジトリが必要です。

https://github.com/new で gatsby-static-web-app という名前で空の GitHub リポジトリを作成します (README は作成しないでください)。
次に、先ほど作成した GitHub リポジトリをリモートとしてローカルリポジトリに追加します。次のコマンドの <YOUR_USER_NAME> プレースホルダーの代わりに、GitHub のユーザー名を追加してください。
```
git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
```
ローカルリポジトリを GitHub にプッシュします。
```
git push --set-upstream origin main
```

Web アプリのデプロイ

次の手順では、新しい静的サイトアプリを作成し、運用環境にデプロイする方法について説明します。

アプリケーションを作成する

Azure portal に移動します
[リソースの作成] を選択します
[Static Web Apps] を探します
[Static Web Apps] を選択します。
[作成]

[基本] タブで、次の値を入力します。

プロパティ	値
サブスクリプション	Azure サブスクリプション名。
リソースグループ	my-gatsby-group
名前	my-gatsby-app
[プランの種類]	Free
Azure Functions API のリージョンとステージング環境	最も近いリージョンを選択します。
ソース	GitHub

[GitHub でサインイン] を選択し、GitHub で認証します。

次の GitHub 値を入力します。

プロパティ	値
組織	ご自分の希望する GitHub 組織を選択します。
リポジトリ	gatsby-static-web-app を選択します。
ブランチ	[main](メイン) を選択します。

Note

リポジトリが表示されない場合、GitHub で Azure Static Web Apps を認可する必要がある可能性があります。 GitHub リポジトリを参照し、[設定] > [アプリケーション] > [認可された OAuth アプリ] の順に移動して、[Azure Static Web Apps]、[許可] の順に選択します。組織リポジトリの場合は、アクセス許可を付与する組織の所有者である必要があります。

[Build Details](ビルドの詳細) セクションで、 [Build Presets](ビルドのプリセット) ドロップダウンから [Gatsby] を選択し、既定値をそのままにします。

[Review and create] (確認および作成)

[確認および作成] を選択して、詳細がすべて正しいことを確認します。
[作成] を選択して、App Service Static Web App の作成を開始し、デプロイのための GitHub Actions をプロビジョニングします。
デプロイが完了したら、[リソースに移動] を選択します。
リソース画面で、[URL] リンクを選択して、デプロイしたアプリケーションを開きます。 GitHub Actions が完了するまで 1、2 分かかることがあります。

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

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

Azure portal を開きます。
上部の検索バーで、前に指定した名前でアプリケーションを検索します。
アプリをクリックします。
[削除] ボタンをクリックします
[はい] をクリックして削除操作を確定します

次のステップ

カスタムドメインの追加