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

  • 1 分

ここまでは、React、GraphQL、プラグインを使用して Gatsby アプリを作成することに注目してきました。 作成後の次の手順は、アプリケーションをビルドすることです。 その後、静的ファイルを提供できる任意の Web サーバーまたはホスティング サービスにデプロイできます。

アプリの構築

Gatsby のコマンドライン ツールでは、プロジェクトを "ビルド" して、好きな場所にデプロイできるものを作成するためのコマンドが提供されています。 "ビルド" は、HTML、JavaScript、CSS、および組み込んだその他の資産で構成されます。

ビルドを作成する

Gatsby の下で React コンパイラが実行されるため、ビルドの生成時に多くのことが行われます。 JSX を JavaScript と HTML に変換することによって、React のコードがコンパイルされます。 また、すべての JavaScript コードが抽出されて、バンドルのセットに配置されます。 その後、各バンドルは "最適化" されます。これは、空白が削除され、変数の名前が変更されて、式が速度に合わせて最適化されることを意味します。 スタイルについても同様のプロセスが行われます。 CSS に対して LESS、SCSS、Stylus などのライブラリを選択した場合は、高レベル言語が CSS にコンパイルされる事前ステップがあります。 この時点でファイルをデプロイするためにさらに行う必要があることはありません。 ファイルを提供できる任意の Web サーバーからホストできるのは静的ファイルのセットだけです。

ビルドをデプロイする

静的アプリをホストできるテクノロジやサービスは多数あります。 結局のところ、それは HTML、CSS、JavaScript でしかなく、ほとんどの Web サービスでホストできます。 このチュートリアルでは、Gatsby でビルドされるもののような静的アプリのホスティング専用の Azure サービスである Static Web Apps にデプロイします。

Azure Static Web Apps

Azure サービスの Static Web Apps では、いくつかの静的ファイルを取得して、クラウドからそれらを提供できます。 デプロイするものは展開パッケージではなく、静的ファイルのセットです。 Gatsby でビルドから最終的に生成されるのは静的ファイルであるため、これは Gatsby に適しています。

ビルドについては、実際のビルド手順はサービスによって自動的に行われるため、事前に何もビルドしておく必要はありません。 これは、Gatsby プロジェクトの package.json で build コマンドを見つけることによって行われます。 開発者が行う必要があるのは、プロジェクトを GitHub リポジトリに配置することだけです。

現在、コードはお使いのコンピューター上のディレクトリに配置されるため、Azure をデプロイするにはいくつかの作業を行う必要があります。

  • GitHub リポジトリを作成してそれにプッシュする: Gatsby によって Git リポジトリが作成されます。それを GitHub にプッシュする必要があります。

  • Azure Static Web Apps インスタンスを作成する: Azure portal を使用して Azure Static Web Apps インスタンスを作成するときに、GitHub リポジトリの URL と、プロジェクト内で静的ファイルが存在するサブディレクトリの名前を指定します。 Gatsby の場合、このディレクトリの名前は public/ です。