NEWS & EVENT
お知らせ・イベント情報
フロントエンドプロジェクトで使える静的Webホスティングサイト18選
2022年10月12日
Vue.jsやReact、Angularといったフロントエンド開発時には、従来のサーバーサイドを備えたアプリケーションサーバーではなく、もっとシンプルな静的ホスティングサービスが利用されます。
この記事では、昨今急激に増えている静的Webホスティングサイトをまとめて紹介します。
Azure Static Web Apps
Microsoft Azureのサービスです。静的なコンテンツ配信に加えて、Azure Functionsによるサーバーサイドスクリプトも利用できます。GitHubやAzure DevOpsと組み合わせたCI/CDも利用可能です。
無料でも100GBまで利用できます。ストレージは0.5GBまでとなっています。その後は1,301円（1アプリあたり）になります。
Azure Static Web Apps – App Service | Microsoft Azure
Gatsby Cloud
静的WebサイトジェネレーターであるGatsbyのクラウドホスティングサービスです。無料でも利用できますが、画像のCDNやサーバーサイドスクリプト、1TBまでの帯域が42.5ドル/月にて提供されています。
インクリメンタルビルドという機能によって、デプロイが高速に行われるのが特徴となっています。
Gatsby Cloud | The Best Way To Experience Gatsby | Gatsby
Surge
Surgeは静的なWebサイトをコマンド1つでデプロイできるソフトウェアです。1プロジェクトは無料で利用できます。月30ドル支払うと、プロジェクト数が無制限になります。
サーバーサイドスクリプト的な機能は用意されていないようです。フロントエンドフレームワークにはこだわないので、広く利用できそうです。
Render
Renderは特に静的なWebサイトに限った訳ではなく、サービスタイプの1つとして静的ホスティングを提供しています。他にもDocker、Webサーバー、バックグラウンドワーカーなどが用意されています。
そして、スタートのコマンドなどを指定することで、アプリケーションをビルドしてデプロイします。静的サイトについては月額無料で利用できるようです。
Cloud Application Hosting for Developers | Render
IONOS
IONOSはGitHubと連携して、プッシュしたタイミングでデプロイが自動実行されます。静的Webサイトツールとして、Hugo/Gatsby/Gridsome/Nuxt.js/Next.js/Jekyllなどに対応しています。
30日間無料で試用し、その後は4ドル/月で3プロジェクトまで利用できます。静的サイトのみであれば1プロジェクト月額2ドル、PHPは月7ドルとなっています。
Deploy Now » Build and Deploy via GitHub | IONOS
DigitalOcean App Platform
DigitalOcean App Platformではあらかじめ静的サイトやWebアプリケーションなどのテンプレートが用意されており、そこに自分のコードを載せてデプロイします。VPSやクラウドのインスタンスと比べて、より機能が制限されているイメージですが、マネージドで運用できます。
料金は月額無料から開始します。スケーリングなどの機能が欲しい場合には月5ドルになります。
DigitalOcean App Platform | Build, Deploy and Scale Apps Quickly
Edge
EdgioはエッジCDNを使って、高速に動作するWebアプリケーションを開発できます。VueやAngular、Next.jsなど各種Webフロントエンドフレームワークに対応しています。
料金は非公開で、問い合わせする必要があるようです。
Edge tools to optimize global delivery of digital content
Stormkit
JavaScript製Webアプリケーションをフルマネージドでデプロイ、運用できます。Gitのワークフローと連携して、管理できます。複数の環境を作って、プレビューを確認できます。
月15回までのデプロイ、100GBまでの帯域であれば無料で利用できます。その後は月100回までのデプロイが月9.9ドルになります。
Stormkit – Serverless infrastructure for fullstack javascript applications
Clodui
インフラはAWSを利用しているサービスです。アセットの最適化、画像最適化などの機能に加えてCDN配信によって高速表示を実現します。
月1GBまでの帯域は無料で利用できます。その後は月3.99ドルで月10GBまでの帯域になります。
Static web hosting that makes your websites load faster | Clodui
tiiny.host
トップページでファイルをD&DするだけでWebサーバーが立ち上がります。無料の場合は指定されたサブドメインのみで、有料にするとカスタムドメインが利用できます。
無料の場合、1週間しかWebサイトは残りません。月額13ドルで5つのWebサイトまで利用できます。コンセプトがとてもシンプルです。
tiiny.host – The simplest way to share your web project
Bip
ローカルのプロジェクトからコマンドを実行するだけでデプロイされます。Gitワークフロートは異なる使い勝手ができそうです。サーバーサイドスクリプトも用意されています。
1週間の無料トライアルが可能で、月額99セント/ドメインにて利用できます。カスタムドメインは月4.99ドルになります。
Bip: Fast and simple static website hosting
Cloudflare Pages
Cloudflareは元々CDN周りで有名だっただけに、エッジデプロイに長けています。デプロイしたWebアプリケーションの高速表示が売りです。
無料でも月500回までデプロイできます。カスタムドメインも使えるので、無料枠でも殆どのことが実現できるでしょう。月20ドルで平行ビルドができるようになります。
Firebase Hosting
Googleのサービスです。Firebase用の専用コマンドを使うことで、簡単にデプロイできます。Firebaseや他のGCPサービスと組み合わせて利用できます。Cloud FunctionsやCloud Runを使ってマイクロサービス構築も可能です。
プレビューURLにも対応しているので、変更前の確認が容易です。基本無料ですが、利用量によって課金されます。
GitHub Pages
GitHubリポジトリに対して提供される静的Webサイトホスティング機能です。Jekyllエンジンが組み込まれており、MarkdownなどをHTML表示できます。
GitHub Pagesは月間のアクセス制限があり、商用利用には向かないでしょう。ちょっとしたWebサイトやプロジェクトサイトをホスティングし、公開するのに向いています。
GitHub Pages Documentation – GitHub Docs
GitLab Pages
GitLabもGitHub Pagesライクな機能を提供しています。GitHub Pages同様、サーバーサイドスクリプトには対応していないのであくまでも静的なWebサイトのみ利用できます。
GitLabではビジネスサイトも対象に入っているようなので、GitHub Pagesよりも利用範囲が広そうです。なお、リポジトリがGitLabにある必要があります。
Netlify
この手の静的Webサイトホスティングの雄とも言うべきサービスではないでしょうか。GitHubと連携して、とても簡単にデプロイできます。サーバーサイドスクリプトにも対応しています。
個人利用の範囲であれば無料で使えますが、プロジェクトの数に制限があるので注意してください。本格的に使う際には月19ドルからの有料プランになるでしょう。
Netlify: Develop & deploy the best web experiences in record time
Vercel
VercelはJAMStackという言葉の生みの親であり、Next.jsの開発元です（JAMStackはNetlifyでした。失礼しました）。Next.jsのIncremental Static Regenerationを活かす場合にはVercelが最適という話もあります。
サーバーサイドスクリプトもサポートしており、幅広く利用できます。趣味レベルであれば無料から、その後は月20ドルの有料サービスとなっています。
Develop. Preview. Ship. For the best frontend teams – Vercel
AWS Amplify
AWS AmplifyはAWSの各種サービスを組み合わせて、Webアプリやモバイルアプリを開発するのに必要な機能をまとめて提供します。Amplify Studio/CLI/Libraries/UI Components/Web Hostingなどのツールが提供されています。
AWS Amplifyの利用自体は無料ですが、AWSの各種サービスを組み合わせる中で料金が発生します。静的Webサイトホスティングを行う際の面倒なAWS操作を自動で行ってくれるツールと考えると良いでしょう。
AWS Amplify（アプリケーションの構築とデプロイ）| AWS
まとめ
静的なWebサイトをホスティングする機能だけを取り上げれば、各サービスの違いは大きくありません。デプロイまでのワークフロー、Git連携、サーバーサイドスクリプトの利用可否、CDNの高速さなどが違いになってくるでしょう。
フロントエンドはこの記事で紹介したサービスを利用しつつ、バックエンドではHexabaseを使うことでセキュアな業務アプリケーションを素早く開発できます。ぜひお試しください。
