フォーム読み込み中
Azure Static Web AppsおよびGithubを使って静的サイトジェネレータ「Astro 3.x」をデプロイしてみる
Batch/OLAP Software Engineer, CRE（Customer Reliability Engineer）
大原 陽宣
多様多種で複雑なデータを明確化し、テクノロジーでイノベーションを起こすことで、昨日までは不可能だったものを、明日は可能になるようなデータエンジニアを目指しています。Apache HBaseやRaftアーキテクチャなどの分散技術を得意としつつ分散データベースやデータ分析基盤、Kubernetesを担当。Apache Incubator等OSS活動中。Alibaba Cloud Expert、Google Cloud Expert。
2024年12月12日掲載
Azureのサーバーレス製品 Azure Static Web Apps を使って「Astro 3.x」をデプロイする手順を紹介します。
はじめに
Astroは、JavaScriptとTypeScriptに対応したオールインワンのWebフレームワークです。コンテンツ中心のウェブサイトを素早く構築するためによく使われます。
Astroの設計思想として、可能な限りクライアントレンダリングではなくサーバーレンダリングを使用することです。そのため、Astroに基づいて開発されたWebサイトは、Astroツールの build 出力を使ってサーバーレスでデプロイすることができます。この戦略は、一般的なサーバーサイド開発フレームワークと一致しています。
＜参考＞ Astro
このAstroが最近Astro 3.0をリリースしました。内容もかなり簡易化されてるので、この際サーバレスWebサイトとしてAWS上でデプロイする方法をご紹介します。
1. 全体構成図
Astroは、Webサイトを作る際に役立つプロジェクトのテンプレートやテーマがたくさんあり、開発者はAstroが提供する対話型インストールウィザードを使って、その中から好きなテーマを選んで開発することができます。今回は、Astroベースで構築済みブログサイトを使用しながら説明します。
構築の流れとして、Astroでbuildし生成した静的WebサイトをAzure Static Web Appsへデプロイしながら静的コンテンツ配信をします。またAzure Static Web Appsからgithubへ連携させることで、サービス開発のCI/CDプロセスを簡単かつ迅速に行うことができます。なおAstro 3.xにはNodejsのバージョンが必要なので、v18.14.1以上を使用する必要があります。
2. 静的ウェブサイトのローカル生成
AstroによるBlogのWebサイトをデプロイするには、まずローカルにプロジェクト環境を構築する必要があります。ローカル開発環境にNodejs v18.14.1以上がインストールされていることを確認します。
Astroは統合インストールウィザードを提供します。Astroプロジェクトは、プロジェクトのルート・ディレクトリから`npm create astro@latest`コマンドを実行することで、自動設定のうえ素早くインストールできます。もちろん、手動設定でインストールすることもできますが、その分複雑になります。
＜参考＞ Astroの手動インストール
Astroのインストール設定で、インストール先のパス、プロジェクトテンプレート、開発言語などを選択します。
Astroはインストールに成功すると、プロジェクトパスの配下に関連ファイルを生成します。
＜参考＞ プロジェクトの構成
生成されたプロジェクトのルートディレクトリに入ったら、`npm run dev`コマンドを使ってアプリケーションを開発モードで起動します。ローカルからブラウザでプロジェクトページを見るには、http://localhost:4321/ にアクセスします。
次の画像は、ブログプロジェクトテンプレートで作られたアプリケーションのインデックスページです。
開発モードとして起動が成功したら、今度は `npm run build` コマンドを使って、アプリケーションをデプロイします。
コマンドが成功すると、プロジェクトのルートディレクトリに `dist` フォルダーが生成されます。フォルダ内のファイルは、以降デプロイメント手順にて使用されます。これでローカル環境にてAstroが無事デプロイできたと思います。次のステップとして、ローカル環境にデプロイしたAstroや関連フォルダをAzure側へ反映する作業になります。
3. 静的ウェブサイトのAWSへのデプロイ
3-1. GitHubコードリポジトリへのコードのアップロード
Azure Static Web AppsはGitHubと統合されており、Git Workflowを使用したビルドとデプロイが簡単になります。このサービスは、プロジェクトのコードリポジトリへのアクセス権を得ることで動作します。リポジトリ内で特定のブランチが更新されると、プロジェクトのビルドとデプロイが自動的に開始され、ウェブサイトが更新されます。 まず、Astroで開発したウェブプロジェクト用に新しいコードリポジトリを作成します。その後の設定ステップで、Azure Static Web Appsがそのリポジトリへのアクセスを許可します。リポジトリはプライベート設定が可能です。
Gitコマンドやツールを使って、ページの指示に従ってローカルのコードをGitHubのコードリポジトリにアップロードします。
3-2. Azure Static Web Appsサービスの設定
Azure Static Web Apps コンソールで新しいプロジェクトを作成します。
Azure Static Web Appsでは、無料のホスティングプランを含む2種類のホスティングプランを提供しています。今回サンプルプロジェクトとして無料のホスティングプランを選択します。次に「Deployment Details」でGitHubを選び、「Sign in with GitHub」ボタンをクリックして、表示されるポップアップウィンドウからGitHubアカウントにログインします。これにより、Azure Static Web Appsがプロジェクトのコードとワークフローにアクセスすることが可能になります。
ログイン認証に成功すると、ドロップダウンボックスから対応するプロジェクトとブランチを選択できます。Azure Static Web Apps には、フロントエンドフレームワークと静的サイトジェネレータのための多くの組み込み設定項目がありますが、「Build Presets」のドロップダウンリストにはAstroのオプションはありません。なので、次のステップで説明するように「Custom」で設定する必要があります。設定方法についてはドキュメントで確認できます。
「Custom」のデプロイメント方法で構成するよう選択します。アプリケーションのルートディレクトリ（通常は「/」）と build ファイルの場所（通常は「dist」）を指定します。
作成に成功すると、Azure Static Web Apps プロジェクトは自動的に Git Workflow をトリガーしてコードの build とデプロイを行います。
リソース管理ページにアクセスし、プロジェクトのアクセスアドレスやその他の関連情報を確認します。このURLにアクセスすると、ローカルのデプロイメントと同じように、プロジェクトのホームページに直接アクセスできます。
4. 補足事項
4-1. npm runシリーズコマンドを使用する際に表示される「astro not recognized」というエラーメッセージを修正する方法
Astroインストールウィザードを使用してAstroプロジェクトをインストールおよび設定する際、インストール依存パッケージのステップでタイムアウトエラーが発生した場合、その後のステップでnpm runコマンドを使用すると、高い確率で「astro not recognized」エラーメッセージが表示されます。
Astroが認識されない理由は、Astroが正しくインストールされていないためです。プロジェクトのルートディレクトリにある `npm install` コマンドを使って依存関係を再インストールするだけで、問題は解決します。
4-2. npm run buildコマンド使用時の[vite]関連エラーメッセージの修正方法
npmコマンドを使用して静的サイトを構築する際に、`[vite]: Rollup failed to resolve import "xxx" from xxx` のようなエラーメッセージが表示されることがあります。
ブログプロジェクトテンプレートに基づいて作成されたAstroプロジェクトを build すると、`[vite]: Rollup failed to resolve import "sharp" from ...`というエラーメッセージが表示されます。
Rollupは、Viteが本番環境用にコードをパッケージ化し最適化するために使用するモジュールパッケージャーです。デフォルトでは、Rollupという複数のファイルに書かれたJavaScriptはすべての依存関係がローカルに配置されるため、バンドルに含まれるべきであると仮定しています。しかし、バンドルに大きな依存関係を含めると、アプリケーションのサイズが大きくなり、総じてユーザーのロード時間が遅くなる可能性があります。
これを避けるために、Rollupは特定のモジュールを外部依存としてインクルードする機能を提供しています。これは、Rollupがこれらのモジュールをバンドルに含めず、実行時に利用可能になることを期待することを意味します。これにより、バンドルサイズを小さくし、アプリケーションのパフォーマンスを向上させることができます。
エラーメッセージによると、Rollupがファイル中の「sharp」モジュールのimport文を解析できないことがわかる。そこで、コンフィギュレーションファイルで外部依存として「sharp」を指定する必要があります。
＜参考＞ build のカスタマイズ
プロジェクトのルートディレクトリに設定ファイル `vite.config.js` を作成します。
// vite.config.js
export default({
build: {
rollupOptions: {
// https://rollupjs.org/configuration-options/
external: ['sharp'],
},
},
})
コンフィギュレーション・ファイルで、「sharp」モジュールを外部依存として宣言します。実際の問題を解決する際には、エラーメッセージで促された特定のモジュール名で対応するモジュールを交換します。 build コマンドを再実行すれば、対応する問題は解決します。
4-3. Azure Static Web Appsが長い間デプロイ待機状態にある場合の解決策
Azure Static Web Apps の管理ページに表示されるアプリケーションのステータスが長期間「Waiting for deployment」になっている場合、Git Workflow の実行に失敗したことが原因である可能性が高いです。
プロジェクトの関連ワークフローのステータスは、Git プロジェクトの 「Actions」ページで見ることができます。
長いデプロイ待機状態であれば、Gitワークフローの実行に失敗する原因を特定する必要があります。Astro 3.xで開発されたプロジェクトでは、Nodejsのバージョンの不一致が原因で、Gitワークフローに既知の問題が発生しやすいです。
デフォルトでは、GitHub ActionのYAML設定のNodejsのバージョンはv14.0です。Astro 3.xにはNodejs v18.14.1以降が必要です。
これを回避するには、プロジェクトの `package.json` 設定ファイルで、プロジェクトが依存する Nodejs のバージョンを明示的に宣言する必要があります。更新されたファイルをGithubにプッシュすると、 build ステップが自動的に起動します。
"engines": {
"node": ">=18.0.0"
},
5. さいごに
Azure Static Web AppsとGithubを使うことで、Webアプリケーションを素早く構築・デプロイすることを紹介しました。このAzure Static Web Appsは、実はプログレッシブウェブアプリケーションの開発をサポートしています。これにより、一度の開発でデスクトップ、モバイル、タブレットなど、複数のプラットフォームで動作するアプリを構築できます。なので、GitHubを介してのCI/CDを利用することで、アプリの更新をスムーズにデプロイできますので、継続的かつ安定的にサービス配信をしたい場合は本記事を参考に頂ければ幸いです。
関連サービス
ビジネスの用途にあわせて柔軟にリソースを利用することができるMicrosoft Azure。さまざまなサービスも組み合わせることができるため、コストを節約しよりビジネスを向上させることができます。
MSP（Managed Service Provider）サービスは、お客さまのパブリッククラウドの導入から運用までをトータルでご提供するマネージドサービスです。
＼ 業務課題をデジタルで支援 ／
デジタルツールの選定から導入の手引きまで、中小規模のお客さまへわかりやすくお伝えします。
メールマガジン登録（無料）
ビジネスに役立つ記事やウェビナー情報をお届けします。
おすすめの記事
条件に該当するページがございません
