完全無料でウェブサイトを作ろう！！！！！！！

32組の部屋

文責：KEY

こんにちは、KEYです。私は9月に行われた五月祭で理一32組のサイトを作りました。

このサイトでは理一32組の有志が考えた英単語のクロスワードを解くことができます。興味のある方はぜひ解いてみてください。

実はこのサイト、サーバを自分で立てたり、借りたりすることなく、完全無料で作りました。この記事では、このサイトを作ったときの経験を基にして、どうすればウェブサイトをノーコストで公開できるのかを紹介していきます。

使用したサービス

英単語クロスワードのサイトは、主に次の4つのサービスを使って作りました。

・Firebase Hosting
・Cloud Firestore
・Cloud Storage for Firebase
・Vercel

重要なのは、これらのサービスにはいずれも無料枠があり、高々3000回/日ほどのアクセスなら無料枠の範囲内で余裕で処理できることです。確実に無料枠に収まるように設計するのには多少工夫が必要な点もありますが、比較的簡単に行うことができます。

以下でそれぞれのサービスの詳細について個別に紹介しますが、具体的な操作方法などについては紹介しないので、それぞれのサービスの名前でググってください。

Firebase

Firebase Hosting、Cloud Firestore、Cloud Storage for FirebaseはいずれもFirebaseというGoogleが提供しているクラウドサービスの機能です。特徴はサーバレス、つまりサーバ側で動くプログラムを自分で書く必要がないということです。

Firebaseが提供する機能には、ホスティング、データベース、ファンクションなどがあり、ウェブサイトを作るために必要な機能が一通り揃っています。今回はあまり使いませんでしたが、Firebase Authenticationという機能を使うとアカウントの管理を容易に行うことができます。例えばGoogle、Twitter、Facebookといった外部のサービスを利用したログインを簡単に導入できます。

また、開発時にうれしい機能として、Firebase Emulatorというものを使うと、本番環境のデータベースとは別に、ローカルでデータベースを動かすことができます。

細かい料金体系についてはGoogleの公式ページを見てください。無料枠は左のSparkプランです。


Firebase Hosting

Firebase Hostingはその名の通りウェブサイトをホスティングできるサービスです。つまり、静的なHTML、CSS、Javascript、画像などをアップロードすると、ユーザがダウンロードできるようになるということです。ちなみに英単語クロスワードはReactというフレームワークを使って作りました。

無料枠ではストレージは10GB、データ転送量は360MB/日に制限されていますが、小規模のウェブサイトなら十分すぎるほどだと思います。

Cloud Firestore

Cloud Firestoreはリアルタイムに更新することができるデータベースです。英単語クロスワードでは、ユーザが正解した問題、問題文を除く問題の情報を保存しました。

データ構造は少々特殊で、ドキュメントを基本単位として、ドキュメントの中にデータがフィールドとして格納され、ドキュメントはコレクションにまとめられます。普通のPCのファイルシステムのようなものです。それぞれのドキュメントへのアクセスはセキュリティルールによって制限することができ、例えば問題のデータをユーザが勝手に書き換えることを禁止することができます。

無料枠ではデータの総量が1GB、ドキュメントの読み取りが50000回/日、書き込みが20000回/日に制限されています。課金の対象がドキュメントであることは非常に重要です。例えばある問題の正解者数を表示する際、全ユーザのドキュメントを取得して、その問題を正解したかをチェックするというようなことをすると、あっという間に50000回/日の無料枠を使い切ってしまいます。そのためドキュメントの読み取りを減らす工夫をする必要があります。

Cloud Storage for Firebase

Cloud Storage for Firebaseは画像や動画などを保存できるデータベースです。英単語クロスワードでは、それぞれの問題の問題文を保存するのに使用しました。

Firestoreと同じくデータへのアクセスをセキュリティルールによって制限することができますが、リアルタイムに変更を監視することはできず、またFirestoreよりも若干遅い気がします。

無料枠ではデータの総量が5GB、ダウンロードが1GB/日および50000回/日に制限されています。Cloud Storageの課金対象はそれぞれのファイルです。英単語クロスワードでは、Firestoreの負荷を分散するために、頻繁に変更されない問題文のデータをCloud Storageで扱いました。

Vercel

VercelはNext.jsというフレームワークを開発しているVercel Inc.が提供しているサービスです。Next.jsで書かれたサイトのホスティングやファンクションを使うことができます。英単語クロスワードでは、ホスティングの機能は使用せず、ユーザの解答のチェック、問題の正解者数の更新のためにファンクションだけを用いました。

もともとVercelを使う予定はなかったのですが、ユーザが解答を直接チェックしたり、問題の正解者数を書き換えるというのは不正し放題セキュリティ的に問題があるため、それらの操作はVercelを介して行うという形にしました。実はFirebaseにもファンクションの機能はあるのですが、無料のSparkプランでは使うことができなかったのでVercelを代わりに使いました。

料金体系についてはVercelの公式ページを見てください。

無料枠はHobbyプランで、個人的かつ非営利な目的に制限されています。

おわりに

現代では様々なクラウドサービスを使って、小規模なウェブサイトなら無料でお手軽に公開することができます。みなさんもぜひ自分のサイトを公開してみてはいかがでしょうか。

この記事が気に入ったらサポートをしてみませんか？