ジェイコブ・パリス

2024-04-04ソース英語記事

2024年、Remixアプリはどこでホスティングされる？

Remixをホストする場所

Remixはさまざまなホスティングオプションをサポートしています。このガイドは、あなたのアプリに適したものを選ぶのに役立ちます。

最終更新日：2024年3月2日。情報が古くなっているものはありますか？Twitterで私に教えて下さい。修正します。または、記事にPRを提出してください。データソースへのリンクもいただけるとありがたいです。

サーバーレス関数
- Vercel
- Fastly
- Netlify
- Cloudflare Pages
- SST
長寿命サーバー
- Fly
- Render
- Railway
- DigitalOcean
その他のホスト
- GitHub Pages
- PartyKit

サーバーレス関数

サーバーレス関数は、アプリケーションコードがリクエスト時に要求されるたびに起動および停止される形式の管理されたホスティングです。時には、アプリケーション全体が単一の関数に適合することもあり、またはアプリケーションが多数に分散され、各エンドポイントが独自の関数であることもあります。

リクエストの数、関数の実行時間、関数のメモリ使用量によって請求されることがよくあります
大量のトラフィックを処理するためにスケーリングでき、トラフィックが通常レベルに戻るとスケールダウンできます
通常、通常のデータセンターで実行されますが、他のものはエッジネットワークで実行され、これは世界中のエンドユーザーに近いデータセンターで実行されることを意味します
通常、Node.jsで実行されますが、「エッジ」関数は非常に高速ですが、サポートが少ないV8ランタイムで実行されます

これらの関数の一時的な性質のため、関数への最初のリクエストはコールドスタートを引き起こす場合があり、数秒かかることがあります。

これらのプラットフォームはすべて、RemixSPAモードなどの静的ホスティングもサポートしています。

	Vercel	Fastly	Netlify	Cloudflare	SST
ランタイム	Node/V8 (ルートごと)	WASM	Node/V8	V8	Node
Remix Vite	はい	はい	はい	はい	はい
Gitベースのデプロイ	はい	いいえ	はい	はい	Seedを使用しています
デプロイプレビュー	はい	いいえ	はい	はい	Seedを使用しています
Websockets	いいえ	はい	いいえ	はい	はい
バンドルサイズ	50MB	100MB	50MB	25MB	50MB
リクエストボディサイズ	4.5MB	制限なし	3MB (エッジ ♾️)	100MB	6MB
画像CDN	はい	はい	はい	はい	はい
共有データベース	Postgres、KV、Blob	KV	Blob	SQL、KV、Blob	AWSが提供するすべて
SPAモード	はい	はい	はい	はい	はい

長寿命サーバー

アプリケーションホスティングのより伝統的なアプローチは、長寿命サーバーでアプリケーションを実行することです。サーバー（または複数のサーバー）は常に稼働しており、リクエストを受け取ると処理します。

コールドスタート時間がないため、最初のリクエストは他のリクエストと同じくらい速い
低トラフィック時にはサーバーレスよりも高価になる可能性がある
同じサーバー上でデータベースを実行できるため、ネットワークの遅延を気にする必要がありません
これらのプラットフォームのほとんどは、管理されたRedisおよびPostgresデータベースのデプロイもサポートしています
ファイルシステムへの完全なアクセス、子プロセスの生成、ストリーミングレスポンス、遅延データ、サーバーからのイベントの送信、アプリと並行してWebSocketサーバーの実行などが可能

	Fly	Render	Railway	DigitalOcean
Gitベースのデプロイ	FlyCDで	はい	はい	はい
プレビュー環境	FlyCDで	はい	いいえ	いいえ
ステージング環境	はい	いいえ	はい	いいえ
静的アセットCDN	はい	いいえ	いいえ	はい
マルチリージョンデプロイ	はい	いいえ	いいえ	いいえ

Vercel

Vercel は、Webアプリケーション向けのサーバーレスホスティングプラットフォームです。

彼らはGitベースのデプロイをサポートし、各ブランチやプルリクエストに対するデプロイプレビュー、さらに上に構築されたいくつかの素敵なコラボレーションツールも提供しています。

Vercelでは、ページごとにNodeランタイムまたはV8 Edgeランタイムを使用するかどうかを指定できるため、一部のページにはNode関数を使用し、他のページにはV8関数を使用できます。デフォルトではエッジ関数を使用し、必要に応じてNode関数を使用することをお勧めします。

Vercelは各エンドポイントを独自の関数に分割するため、各関数バンドルの50MB制限を超えるのは非常に困難です。

VercelはWebsocketsをサポートしておらず、ストリーミングをサポートしているものの、接続は30秒間しか開かれないため、Server-Sent Eventsは実用的ではありません。
stale-while-revalidateおよびstale-if-errorを含む完全なキャッシュ制御サポート、およびs-maxageプロパティをサポートしています。s-maxageプロパティはCDNキャッシュを制御し、max-ageプロパティはクライアントのブラウザキャッシュを制御します。
Vercelの最大リクエストボディサイズは4.5MBであり、直接ファイルのアップロードには問題が発生する可能性があります。

Vercelは、Vercel Postgres、Vercel KV、およびVercel Blobを含む複数の共有データベースをサポートしています。

Fastly

Fastlyは、強力なCDNおよびホスティングプラットフォームであり、Remix + React Routerドキュメントのホスティングプロバイダーとして選ばれています。

Fastlyは、Compute@Edgeプラットフォームを使用してRemixをサポートしています。これは、WebAssemblyにTypeScriptをコンパイルしてエッジで実行されるサーバーレスプラットフォームです。ほとんどのエッジ関数がV8や他のすべてのNodeと異なり、FastlyはV8ではなくWebAssemblyにコンパイルします。

Fastlyは、stale-while-revalidateやstale-if-errorを含む完全なキャッシュ制御ヘッダーサポートを提供しています。さらなる制御のために、CDN固有の設定を行うためのSurrogate-Controlヘッダーも提供しています。

彼らはまた、キャッシュをプログラム的に削除するためのAPIを提供しており、これは一般的ではありません。

Fastlyは、サーバーレスプラットフォームには一般的でないWebsocketsをサポートしています。

Nodeを実行しないため、多くのNodeモジュールがFastly上のRemixと互換性がありません。その代わりに、最速の実行時が得られます。
Fastlyは、コンパイル後のWASMおよびすべてのコンパイラ最適化が適用された後に測定される、100MBのコンパイルされたバンドルサイズ制限をサポートしています。
gitベースのデプロイメントはありませんが、GitHub Actionsで簡単に展開できます。

Fastlyは、アプリケーションと共に展開される共有KVストレージをサポートしています。

Netlify

Netlifyは、シンプルな静的サイトホストからフル機能のサーバーレスプラットフォームに成長したオリジナルのJAMStackホスティングプラットフォームです。

組み込みのgitベースのデプロイメントを備え、gitリポジトリにプッシュするたびに、Netlifyはアプリをビルドして展開します。プルリクエストをマージする前にアプリをテストするためにデプロイプレビューを使用することもできます。

Netlifyは、Node（Netlify functions）およびV8（Netlify Edge Functions）ランタイムを別々のターゲットとしてサポートしているため、アプリ全体がどちらかで実行されます。

Node.jsでは、関数を展開するリージョンを選択することができますが、複数のリージョンに同時に展開することはできません。エッジ関数は常にマルチリージョンです。

エッジ関数はまた、Netlifyでのサーバー送信イベントを可能にします。

Netlifyはいくつかの方法で強力な細かいキャッシュ制御をサポートしています。

特定のページやアセットを無効にするために使用できるCache-Tagヘッダー
特定のヘッダー（デバイスタイプなど）や特定のクッキー値（ユーザーセッションやA/Bテストなど）に基づいてキャッシュポリシーを変更できるNetlify-Varyヘッダー

Netlifyは、共有ファイルストレージとしてBlob Storageもサポートしています。

Cloudflare

Cloudflare Pagesは、NetlifyやVercelのようなホスティングサービスですが、Cloudflareのネットワーク上に構築されています。Gitベースのデプロイワークフローと、異なるブランチ用のプレビューデプロイメントが利用できます。

静的コンテンツはCloudflareのCDNからホストされ、残りのRemixアプリはエッジに単一のCloudflareワーカーにコンパイルされます。Vercelのエッジ関数はCloudflareワーカーをベースに構築されており、V8ランタイムを使用しているため、多くのNodeモジュールと互換性がありません。

Cloudflareは、CDN固有のキャッシュ設定を行うための追加のCDN-Cache-Controlヘッダーもサポートしています。

Cloudflareは、ほとんどのアプリケーションに対して100MBのリクエストボディサイズをサポートしていますが、必要に応じて制限を増やすこともできます。これは他のサーバーレスプラットフォームよりも高いです。

WebsocketsもCloudflareで動作しますが、これはサーバーレスプラットフォームでは一般的ではありません。

Pagesは25MBのバンドルサイズをサポートしています
デプロイメントには400msの起動時間制限があり、アプリケーションが成長するにつれて問題が発生する可能性があります。ビルドとアップロードが成功した後にNo deployment availableエラーが発生した場合、これが原因である可能性があります。

SST

SSTは、AWS上でサーバーレスアプリケーションを構築するためのフレームワークです。AWS CDKの上に構築されており、これはクラウドインフラストラクチャを構築するためのフレームワークです。

RemixSite constructを介してRemixをサポートしており、これによりアプリケーションをAWS LambdaまたはAWS Lambda@Edgeにデプロイできます。これはエッジ関数とは異なり、AWSリージョン間でプロキシを行う通常のノードのLambda関数であり、ユーザーは単にデプロイされたリージョンだけでなく、最も近いAWSリージョンに接続します。

Gitベースのデプロイは含まれていませんが、SSTチームによって構築されたデプロイインフラストラクチャツールSeedを使用するか、Github Actionを使用して独自に設定できます。
プレビューおよびステージング環境は、SST CLIを使用して作成され、これはGithub Actionで行うことができます。

Fly.io

Fly.ioは、エッジ上で実行される管理されたコンテナプラットフォームです。サーバーレス関数ではなく、サーバーレス仮想マシンです。

Flyの最大の利点の1つは、マルチリージョンのサポートです。Flyの20以上のリージョンのいずれかにアプリケーションをデプロイでき、Flyはデプロイしたすべてのリージョンにアプリケーションを自動的にレプリケートします。これにより、アプリケーションはユーザーにより近く、障害に対してより強靭になります。

アプリケーションに割り当てられるRAMとCPUの量を簡単なCLIコマンドでスケーリングできます。Flyはデフォルトで256MBのRAMを提供しますが、これはRemixアプリケーションにはかなり少ないため、ほとんどのアプリケーションには512MBが合理的な最小値としてお勧めします。

アプリケーションを提供するための利用可能なマシンの数も構成でき、Flyに範囲内で自動スケーリングするよう指示できます。これは、低トラフィックのアプリケーションに対してゼロへの自動スケーリングが有用です。

Flyは、アプリケーションと共にデプロイおよびデプロイしたすべてのリージョンにレプリケートできるPostgresおよびRedisデータベースもサポートしています。

Flyは静的アセットを提供するためのCDNを提供していますが、キャッシュをプログラム的にクリアするAPIは提供していません。stale-while-revalidateおよびstale-if-errorを含むCache-Controlヘッダーがサポートされています。

Gitベースのデプロイメント機能は組み込まれていませんが、GitHub Actionsで簡単に設定できます
プレビュー環境はありません。FlyCDを使用して、Fly.io上で自動プレビュー環境を構築できます
Flyには8GBの非圧縮Dockerイメージ制限があります
Flyには10MBのリクエストボディバッファがありますが、ストリーミングを使用して大きなボディを処理できます

Render

Render は、Dockerを必要とせずにRemixをサポートするマネージドホスティングプラットフォームですが、特別な依存関係をインストールしたい場合はアプリをDockerイメージとしてパッケージ化することもできます。

Renderはgitベースのデプロイメントをサポートしており、コードをgitリポジトリにプッシュするだけでRenderがデプロイします。Teamプランではプレビュー環境もサポートされています。

組み込みデータベースはPostgresとRedisですが、他の何かを実行する新しいコンテナを立ち上げることもできます。

Flyのようなマルチリージョンサポートはありません
Renderにはリクエストボディサイズ制限がありません
バンドル/イメージの制限については公開されていないようです

Railway

Railway は、マネージドコンテナホスティングプラットフォームです。独自のDockerfileを提供しない場合、Railwayはそれなしでデプロイできます。

Railwayはgitベースのデプロイメントをサポートしており、コードをgitリポジトリにプッシュするだけでRailwayがデプロイします。Teamプランではプレビュー環境もサポートされています。

データベースに関して、RailwayはPostgres、MySQL、Redis、MongoDBを組み込みサポートしており、それらを管理するためのWeb UIも提供しています。

Flyのようなマルチリージョンサポートはありません
自動プレビュー環境はありませんが、ステージング環境の設定は簡単です

DigitalOcean App Platform

DigitalOcean App Platform は、マネージドコンテナホスティングプラットフォームです。独自のDockerfileを提供しない場合、DigitalOceanはそれなしでデプロイできます。

DigitalOceanはgitベースのデプロイメントをサポートし、より高度なデプロイワークフローのためのGithubアクションも提供しています。

Postgres、MySQL、Redis、MongoDBデータベースは、アプリケーションと一緒にDigitalOceanのWebコンソールからデプロイできます。

ステージング環境やビルトインステージング環境は使用しない

GitHub Pages

Remix v2.5 introduces SPA modeは、アプリをHTML、CSS、JSファイルの静的バンドルとしてエクスポートできるようにします。これらは通常、プレビュー環境などの他の利点を得られるサーバーレスプラットフォームのいずれかでホストできます。必要に応じてサーバーに簡単にアップグレードすることもできます。

GitHub Pagesは、GitHubの公式機能で、GitHubリポジトリのためのパブリックウェブサイトを設定できます。

サイトをローカルでビルドしてホストしたい静的アセットのバンドルをコミットするか、GitHubアクションを使用してアプリをビルドし、静的アセットをgh-pagesブランチにプッシュすることができます。

PartyKit

PartyKitは、Cloudflareインフラストラクチャ上で共同作業アプリを構築するためのフレームワークです。PartyKit's Remix starterは、RemixアプリとWebsocketサーバーを一緒にCloudflareにデプロイできるカスタムサーバーを使用しています。