演習 - ビルドして Azure Static Web Apps にデプロイする - Training

5 分

Azure Static Web Apps では、アプリケーションの静的資産をビルドしてクラウドにデプロイすることによって、Gatsby で作成されるもののような静的アプリケーションがホストされます。

ここでは、アプリの静的資産をビルドして、それらがどのようなものかを確認し、ローカル環境でホストして試してみます。次に、コードを GitHub にプッシュし、Web 上でアプリをホストするための Azure Static Web Apps インスタンスを作成します。

サイトをビルドする

サイトをビルドしてデプロイできる状態にするときの面倒な作業は、Gatsby によって自動的に行われます。

プロジェクトディレクトリから次のコマンドを実行します。

gatsby build

このコマンドでは、"運用ビルド" が作成されます。すべてのファイルは、public/ サブディレクトリに作成されます。

ビルドが完了したら、public/ ディレクトリに移動して、ブラウザーでファイルを開くことができます。ブラウザーで表示できるように HTTP でローカルファイルを提供するコマンドラインツールである http-server を使用して、Web でホストされる状態のビルドを調べることができます。

このようにすると、ローカル Web サーバーからアプリケーション全体がホストされるようになります。ターミナルで cd を使用して public/ ディレクトリに移動し、次のコマンドを入力します。

npx http-server -p 5000

http://localhost:5000 を参照します。

次のような内容がレンダリングされるはずです。

Screenshot showing your built app.

サイトをビルドし、Gatsby アプリから HTML、CSS、JavaScript だけが含まれる静的ページのセットを作成しました。

VS Code から public/ ディレクトリに移動し、public/about/index.html でレンダリングされた about コンポーネントを見つけます。最適化プロセスにより、すべての空白は削除されており、ページは 1 つの長い行として表されます。ただし、レンダリングされたタイトルと説明を見つけることができ、次のようになっているはずです。

// excerpt from about/index.html

<h2>Gatsby Default Starter</h2><div>Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.</div>

コードを GitHub にプッシュする

アプリをデプロイ用に準備するには、次の手順を実行する必要があります。

Git リポジトリを初期化します。
GitHub リポジトリを作成し、ローカル Git リポジトリをそこにプッシュします。

概要ページを追加する

ターミナルでプロジェクトのルートに移動してから、リポジトリインデックスにコードを追加してコミットします。

git add .
git commit -m "adding About page to site"

GitHub リポジトリを作成してコードをプッシュする

GitHub にアクセスしてログインします。
リポジトリページに移動します。
次に示すように [新規] ボタンをクリックします。
リポジトリに gatsby-app という名前を付け、次に示すように [リポジトリの作成] をクリックします。
最後に、GitHub リポジトリをリモートとして追加し、プッシュします。これを実行するには、次のコマンドを入力します (<user> の部分を、お使いの GitHub ユーザー名に置き換えます)。
```
git remote add origin https://github.com/<user>/gatsby-app.git
git push -u origin master
```

これで、Azure Static Web Apps にデプロイする準備ができました。

静的 Web アプリを作成する

GitHub リポジトリを作成したので、Azure portal から Static Web Apps インスタンスを作成できるようになりました。

このチュートリアルでは、Azure サンドボックスを使用して、演習を完了するために使用できる無料の一時的な Azure サブスクリプションを提供しています。続行する前に、このページの上部にあるサンドボックスがアクティブになっていることを確認します。

Azure portal にサインインします。サンドボックスをアクティブにしたときと同じアカウントを使用してサインインします。
上部のバーで、Static Web Apps を検索します。
Static Web Apps を選択します。
［作成］ を選択します

基本

次に、新しいアプリを構成し、GitHub リポジトリにリンクします。

[プロジェクトの詳細] を入力します

設定値

サブスクリプション "コンシェルジェサブスクリプション"

リソースグループ [サンドボックスリソースグループ名]

設定	値
サブスクリプション	"コンシェルジェサブスクリプション"
リソースグループ	[サンドボックスリソースグループ名]

Static Web Apps の詳細を入力します

設定	値
名前	アプリの名前を指定します。有効な文字は `a-z` (大文字と小文字は区別されません)、`0-9`、および `_` です
リージョン	最も近いリージョンを選択します
SKU	Free

プロンプトが表示されたら、[Sign-in with GitHub](GitHub でサインイン) ボタンをクリックし、GitHub の認証を受けます
デプロイの詳細を入力する

設定値

組織リポジトリを作成した組織を選択します

リポジトリ gatsby-app

ブランチ main または master

Note

リポジトリが表示されない場合、GitHub で Azure Static Web Apps を承認する必要がある可能性があります。次に、GitHub リポジトリを参照し、[設定] > [アプリケーション] > [認可された OAuth アプリ] の順に移動して、[Azure Static Web Apps]、[許可] の順に選択します。組織リポジトリの場合は、アクセス許可を付与する組織の所有者である必要があります。
[ビルドの詳細] ドロップダウンリストを使用して [Gatsby] を選択し、ビルド情報を入力します。

設定値

App location (アプリの場所) 既定値のままにする

Api location (API の場所) 既定値のままにする

Output location (出力場所) public
[確認および作成] ボタンをクリックします

設定	値
組織	リポジトリを作成した組織を選択します
リポジトリ	gatsby-app
ブランチ	main または master

設定	値
App location (アプリの場所)	既定値のままにする
Api location (API の場所)	既定値のままにする
Output location (出力場所)	public

[確認および作成]

アプリケーションの作成を続行します。

[作成] ボタンをクリックします
デプロイが完了したら、[リソースに移動] ボタンをクリックします。

GitHub アクションを確認する

この段階では、Static Web Apps インスタンスが Azure に作成されていますが、アプリはまだデプロイされていません。 Azure によってリポジトリに作成される GitHub アクションは自動的に実行され、アプリの最初のビルドとデプロイが実行されますが、完了するまでに数分かかります。

下に示されているリンクをクリックして、ビルドとデプロイアクションの状態を確認できます。

Web サイトを表示する

GitHub アクションによって Web アプリのビルドと発行が完了すると、実行中のアプリを参照して確認できるようになります。

Azure portal の [URL] リンクをクリックして、ブラウザーでアプリにアクセスします。

Note

アプリがまだビルドおよびデプロイされていないことを示す Web ページが表示されても心配しないでください。しばらくしてからブラウザーを再更新してみてください。 Azure Static Web アプリが作成されると、GitHub アクションによって自動的に実行されます。そのため、スプラッシュページが表示されても、アプリはデプロイ中です。

おめでとうございます。 Azure Static Web Apps を使用して、最初の Gatsby アプリをクラウドにデプロイしました。

続行

演習 - ビルドして Azure Static Web Apps にデプロイする