💻

完全無料(クレジット登録なし)でWebアプリ開発しよう!

に公開

はじめに

この記事を読んでいただきありがとうございます!
これまで個人でWebアプリ開発を行う中で得た知見を共有していきたいと思います。

まだまだ未熟な点も多いですが、
このブログを通じて学んだことを発信し、誰かの助けになれば幸いです。

拙い文章ですが、どうぞよろしくお願いいたします。🙇‍♀️

この記事はこんな人におすすめ!

  • 開発経験があまりない人
  • 個人でお金をかけずにWebアプリ開発をしたい人
  • 無料のWebサイトホスティングやサーバが知りたい人

概要

  • Webアプリ開発に使える、完全無料のサービスの紹介
  • サービスの制限と使い分け方を解説

完全無料とは

このブログでの「完全無料」とは、以下2点の条件に当てはまることを指します。

  • 設計・開発・保守: PC本体や電気代以外は一切料金がかからない
  • 運用: 料金が一切発生しない(PC本体や電気代もかからない)

完全無料での開発方針

完全無料の定義を踏まえて、以下のような設計方針を立てました。

必須

  1. アプリ開発は全て無料で行う。
    AzureやAWSのように、クレジット登録が必要で、無料枠を超えたら課金されてしまうサービスは使用しない。
  2. アプリのユーザは少人数で良い。
  3. 無料であるならば、ある程度の労力は許容する。
  4. SNSやマッチングアプリのように、ユーザが少ないと価値が減少してしまうアプリは作りたくない。
    1、2人でも価値が生まれるアプリが作りたい。

推奨

  1. 既に洗練されたアプリがあるのであれば、わざわざ作る必要はないと思う。
    ある程度新しいアイデアであるか、付加価値のあるアプリにしたい。
  2. 面白いアプリであることも重要だが、実用性がある程度あり、継続的に使用してもらえそうなアプリか、
    インパクトが大きいアプリだと嬉しい。

これらの開発方針を満たすには、完全無料で利用できるサービスを使用することが必須です。
まずは、完全無料で利用できるサービスについて調査しました。

完全無料で利用できるサービス

完全無料で利用できるサービスには以下のようなものがあります。

基本アーキテクチャ

サービスの使い分け

No. プレゼンテーション層 アプリケーション層 データ層
1 GitHub Pages GAS Google Sheets
2 Cloudflare Pages Cloudflare Workers Cloudflare D1、KV

基本的にNo.1の構成を採用します。
ただし、以下の場合はNo.2の構成を採用することを検討してください。

  • HTTPリクエストのレスポンス速度や安定性が重要な場合
  • Cloudflareだけで完結させたい場合
  • セキュリティリスクを減らしたい場合
  • Next.jsなどを使用し、SSRを実装したい場合

プレゼンテーション層

サービス名 リクエスト数 帯域幅制限 1ファイルのサイズ上限 ページ全体の上限
Cloudflare Pages 10万 件 / 日 無制限 25 MB 2万 ファイル
GitHub Pages 無制限 100 GB / 月 100 MB 1 GB
GitLab Pages 無制限 無制限 100 MB 10 GB
Firebase Hosting 無制限 360 MB / 日 2 GB 10 GB
その他のプレゼンテーション層

Cloudflare Pagesはリクエスト数、GitHub Pagesは帯域幅制限で、それぞれアクセス制限があります。
1ファイルのサイズ制限はCloudflare Pagesの方が厳しいです。

⚡ Cloudflare Pages

制限詳細
  • リクエスト数:10万 件 / 日
  • ビルド数:500 件 / 月
  • 同時ビルド数:1 件
  • プロジェクト数:100 件
  • ファイルサイズ:25 MB / ファイル
  • ファイル数:2万 件 / プロジェクト

https://zenn.dev/kinakokyoryu/articles/ee93e3e8b24826

🐙 GitHub Pages

制限詳細
  • 帯域幅制限:100 GB / 月
  • ビルド数:10 / 時間
  • デプロイのタイムアウト:10 分
  • ファイルサイズ:100 MB / ファイル
  • ファイルサイズ:1 GB / プロジェクト

アプリケーション層

サービス名 リクエスト数 ファイルサイズ 実行時間 定期実行予約数
Cloudflare Workers 10万 件 / 日 3 MB 10 ms / 件(待機時間を除く) 5 件
Google Apps Script(GAS) 無制限 無制限 6 min / 件 20 件
Supabase Edge Functions 50万 件 20 MB 2 s / 件(待機時間を除く) 無制限

Cloudflare Workersはリクエスト数やファイルサイズ、CPU処理時間の制限がかなり厳しいです。
一方、GASはHTTPリクエストの制限が2万/ 日なので、HTTPリクエストを多量に行う場合は適しません。

トリガー実行の場合も、Cloudflare Workersは定期実行予約数の制限が厳しいです。
一方、GASは定期実行の合計時間が90 分/ 日なので、定期実行の回数が多い場合は適しません。

Cloudflare Workersは、Pages Functionsを使用すれば、Cloudflare Pagesのサイト以外からはアクセスできないので、安全性が高いです。

GASはHTTPリクエストのレスポンス速度が遅く、安定性もありません。

🔶 Cloudflare Workers(Pages Functions)

制限詳細
  • リクエスト数:10万 件 / 日、1000 件 / 分
  • 定期実行(Cronトリガー)予約数:5 件
  • プロジェクト数:100 件
  • ファイルサイズ:3 MB / プロジェクト
  • CPU処理時間:10 ms / リクエスト
  • メモリ:128 MB

https://zenn.dev/kinakokyoryu/articles/0331fed1df7504

⛽ Google Apps Script(GAS)

制限詳細
  • 実行時間:6 分 / 件
  • 同時実行数:30 / ユーザ、1000 / 件
  • HTTPリクエスト:2万 件 / 日
  • 定期実行の合計時間:90 分/ 日
  • 定期実行予約数:20 件

https://zenn.dev/kinakokyoryu/articles/6251e4edb37273

データ層

データベース

サービス名 サイズ制限 読込回数の上限 書込回数の上限
Cloudflare D1 500 MB 500万 回 / 日 10万 回 / 日
Cloudflare KV 1 GB 10万 回 / 日 1000 回 / 日
Google Sheets 15 GB 無制限 無制限
Firebase Cloud firestore 1 GB 5万 回 / 日 2万 回 / 日
Supabase Database 500 MB 無制限 無制限

ストレージ

サービス名 サイズ制限 読込回数の上限 書込回数の上限
Firebase Cloud Storage 5 GB 5万 回 / 日 2万 回 / 日
Supabase Storage 1 GB 無制限 無制限
Google Drive API 15 GB 12000 回 / 分 12000 回 / 分
その他のデータ層

Google SheetsはGoogle Drive上に保存するため、誤って共有や削除をしてしまうリスクがあり、セキュリティ上の問題が生じる可能性があります。

また、型の指定ができないので、正しくバリデーション処理を実装しないと、セキュリティ上の問題が生じる可能性があります。

例えば、string型の「01」というデータをGoogle Sheetsのセルに保存すると、自動でint型の「1」となり、完全性が損なわれます。
正しくデータを保存するには「="01"」と入力するか、「setNumberFormat('@')」関数を使用してセルを書式なしテキストに変更する必要があり、処理がやや複雑になります。

他にも、string型の「=A1」というデータをGoogle Sheetsのセルに保存すると、シートのA1セルの値を取得できてしまい、機密性が損なわれます。

バリデーション処理は、ユーザが入力できるフォームで半角英字以外を禁止にすれば、概ね解決すると思います。

セキュリティリスクを減らしたい場合は、Cloudflare D1やCloudflare KVを使用することを検討してください。

🗄️ Cloudflare D1

制限詳細
  • データベース:10 件
  • 最大列数:100 件 / プロジェクト
  • 最大行数:無制限
  • SQL実行時間:30 秒
  • アカウント容量:5 GB
  • データベース容量:500 MB / プロジェクト
  • 行容量:2 MB

📁 Cloudflare KV

制限詳細
  • Read:10万 件 / 日
  • Write:1000 件 / 日
  • Delete:1000 件 / 日
  • List:1000 件 / 日
  • 異なるキーへのWrite:1000 件 / 日
  • 同じキーへのWrite:1 件 / 秒
  • 名前空間:200 件
  • キー数:無制限
  • 容量:1 GB
  • 名前空間容量:1 GB
  • キー容量:512 B
  • バリュー容量:25 MB

📈 Google Sheets

制限詳細
  • セル数:1000万 件
  • 列数:1万8278 件

その他の完全無料サービス

https://zenn.dev/kinakokyoryu/articles/21176e575a6ad7

API・オープンデータはこちら

https://zenn.dev/kinakokyoryu/articles/16b80acb2bf525

さいごに

最後まで読んでいただきありがとうございます。
他に完全無料で使用できるサービスをご存じでしたら、ぜひ教えていただけると幸いです!

今後は、具体的なWebアプリの開発例や、そのソースコードを投稿していく予定です!

Discussion