フロントエンド アーキテクチャ: Web アプリを無料でホストする方法

私はユーザーがシカゴの音楽コンサートを見つけられるようにすることを目的とした個人プロジェクトに取り組んでいます。アーキテクチャの観点から見たこのプロジェクトの注目すべき点の 1 つは、Web アプリケーション全体が完全に無料でホストされているということです。

以下の画像は、アーキテクチャ コンポーネントを示しています。

免責事項: 私は、ここで言及するサービスのスポンサーではありません。私がこれらを強調しているのは、単に役立つと思ったからです。

プロジェクトのコードベース リポジトリ

GitHub は、コードベースを無料でホストするための最も人気のあるプラットフォームです。 Bitbucket や GitLab などの代替手段も試しましたが、どちらも同様に機能します。正直なところ、これらのオプションのいずれでも機能します。考えすぎずに 1 つを選択して先に進んでください。

フロントエンドワークフローオーケストレーション

専門的な環境では、通常、AWS または他のクラウド サービス プロバイダーと直接連携して、展開、通知、監視を完全に制御できます。ただし、このアプローチにはより多くの時間と労力が必要です。幸いなことに、Netlify や Vercel などのサービスは、多くの手間を省くことでこのプロセスを簡素化します。迅速な導入が可能ですが、エコシステムへの依存性が伴います。サイトが大量のトラフィック (数千の訪問) を受信し始めたら、予期せぬコストが発生しないように無料利用枠の制限を確認することをお勧めします。個人的なプロジェクトでは、これまで問題なくこれらのサービスを複数回使用してきました。

とはいえ、Netlify はすぐに使える機能をいくつか提供します。アーキテクチャ イメージでは、次の 3 つのコンポーネントが Netlify によって自動的に提供されます。

• GUI 統合:

Netlify の GUI を使用すると、コードベース リポジトリ (私の場合は GitHub) を統合できます。 Netlify は Next.js アプリケーションのデフォルト設定を理解し、それを使用してコードをシームレスにデプロイします。

• 静的サイトホスティング:

chicagomusiccompass.com は静的 Web アプリケーションです。つまり、サーバーは関与しません。デプロイメントがトリガーされると、アプリは静的アセット (HTML、JS、および CSS) を生成し、S3 バケットに保存されます。 Netlify は CloudFront で構成を処理し、すぐに使用できる URL を提供します。

• ラムダ関数:

静的サイトでは、多くの場合、他のドメインからデータをフェッチする必要があります。これには通常、「フロント エンドのバック エンド」(BFF) として知られるプロキシが必要です。デフォルトでは、サーバーが CORS 経由で明示的に許可しない限り、クライアント アプリケーションは他のドメインにアクセスできませんが、これは必ずしも一般的ではありません。このプロジェクトでは、プロキシを使用して、別のドメインから JSON ファイル をプルしています。

Netlify はすべての展開オーケストレーションを管理し、ユーザーフレンドリーな URL としてドメインにリンクできる URL (サブドメイン) を提供します。

たとえば、これは私のプロジェクトの Netlify URL です:

https://clinquant-chebakia-f64a5b.netlify.app/

次に、www が Netlify URL を指すように CNAME レコードを使用してドメインを構成しました。

ユーザーが https://www.chicagomusiccompass.com/ にアクセスすると、DNS はドメインを最終宛先 (Netlify URL ?) に解決します。

ここでは多くのことが行われていますが、そのほとんどはダッシュボード (GUI) を通じて設定されます。重要なのは、すべてがどのようにつながっているかを理解することです。残りは UI を操作するだけです。

自動スケジュールされたタスク (Cron ジョブ)

cron-job.org は、cron ジョブを無料で実行できるサービスです。この設定での動作は次のとおりです:

a) Netlify デプロイフック:
Netlify は、トリガーされるとサイトを再デプロイする構成可能な Webhook (URL エンドポイント) を提供します。これにより、chigomusiccompass.com が必要なときにいつでも自動的に更新されるようになります。

b) cron-job.org 統合:
cron-job.org を使用すると、cron ジョブをスケジュールできます。この場合は、毎日実行するように設定します。このジョブは単に Netlify デプロイ フックをトリガーし、Netlify にサイトを毎日再デプロイ (更新) するよう促します。

注: Chicagomusiccompass.com にもバックエンド コンポーネントがありますが、この投稿ではフロントエンド アーキテクチャのみに焦点を当てます。

まとめ

chicagomusiccompass.com は、構築時にいくつかの Lambda 関数とともに静的サイト (サーバーなし) を生成する Next.js アプリケーションです。 GitHub リポジトリは Netlify と統合されているため、リポジトリへのプッシュごとに新しいデプロイメントがトリガーされます。このプロセスでは、新しいバージョンの静的サイトが生成され、Lambda 関数が更新されます。 Netlify はこれらのファイルの展開を処理し、必要なネットワーク インフラストラクチャを自動的にプロビジョニングして、サブドメイン経由で Web アプリケーションにアクセスできるようにします。さらに、カスタム ドメイン Chicagomusiccompass.com が Netlify を指すように構成しました。サイトは、Netlify デプロイ フックをトリガーする毎日の cron ジョブによって最新の状態に保たれます。

このサイトは数か月間運営されており、現在はトラフィックがそれほど多くありませんが、インフラストラクチャコストの観点からは 1 セントも払っていません。

専門的な環境では、プロジェクトの要件に応じて、特に初期段階では同様のソリューションを選択することがあります。その後、ビジネスの成長とニーズの進化に応じて、特定のコンポーネントを移行できます。

最近のフロントエンド アーキテクチャは、特に無料サービスを利用できるようになり、非常にエキサイティングなものになっています。ただし、サービスが無料であれば、あなたが製品になる可能性があります。

以上がフロントエンド アーキテクチャ: Web アプリを無料でホストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。