私はユーザーがシカゴの音楽コンサートを見つけられるようにするための個人プロジェクトに取り組んでいます。アーキテクチャの観点から見たこのプロジェクトの注目すべき点の 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 セントも払っていません。

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

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