はじめに
最近では、大学の授業や自主制作で「Webアプリを作ってみたい！」という学生がとても増えています。
しかし、いざ始めようとすると最初にぶつかるのがこの壁です。
「サーバーってどう立てるの？」
「データベースは課金しないと使えないの？」
「クラウドって結局お金かかるんじゃないの？」
実際に主要クラウド（AWS・GCP・Azure）は、無料枠があっても最初にクレジットカード登録が必要です。
このことについて不安を感じた人も多いのではないでしょうか。
でも実は、クレカ登録不要なクラウドサービスの無料枠を上手に組み合わせることで、
0円で本格的なWebアプリを構築 することができます！
この記事では、私が実際に無料クラウドだけを使って私が所属している小規模団体用にポータルサイトを作った構成と方法を紹介します。
今回の構成
| サービス名 | 役割 |
|---|---|
| Render | フロントエンド,バックエンド |
| Supabase | データベース |
| Clerk | ユーザー認証 |
| Resend | メール送信API |
| Gemini 2.5 Pro | AI補助機能 |
アーキテクチャ図
各サービスの紹介
Render
Renderは、APIサーバーやバックエンド処理をホストできるクラウドサービスです。
無料プランでもNode.js、Python、Goなどのサーバーアプリをデプロイできます。
無料枠の主な仕様は以下の通りです。
-
Webサービス1つまで無料
-
メモリ512MB・CPU共有
-
無アクセス状態が15分続くとスリープ（再アクセスで自動復帰）
Renderの良い点としてコードを GitHub／GitLab／Bitbucket などのリポジトリと連携すると、指定ブランチ（例：main）へのプッシュやマージをトリガーに、Render が自動的にビルド → デプロイを実行します。
そのため新しいコミットがあるたびにデプロイされるため、一度設定すればコードを修正 → プッシュだけでサイトが更新されるという開発フローが簡単に実現できます。
接続がないと15分でサーバーがスリープします。再起動には30秒から1分ほどかかります。
Supabase
Supabaseは、PostgreSQLベースのデータベースです。
SQLをそのまま書ける点が特徴です。
無料枠（Free Tier）には以下が含まれます。
-
データベース容量：500MB
-
ストレージ容量：1GB
-
認証リクエスト数：50,000回/月
-
Edge Functions（サーバーレス関数）利用可
さらに、リアルタイム通知機能や行レベルセキュリティ（RLS）も使えるため、出欠管理や申請履歴の保存といった用途にぴったりです。
もちろんクレカ登録は不要で、メールアドレスだけで始められます。
Clerk
Clerkは、ログインやユーザー管理に特化したクラウド認証サービスです。
メール認証のほか、GoogleやGitHubログイン（OAuth）にも対応しています。
無料枠では以下の範囲が利用できます。
-
最大500ユーザー
-
月50,000セッションまで無料
-
サインインUIコンポーネントをそのまま利用可能
-
メール・パスワード・OAuth対応
ClerkはNext.jsとの連携が非常にスムーズで、わずか数行のコードでログイン機能を導入できます。
Resend
Resendは、メール送信用のクラウドAPIです。
Node.jsやPythonから簡単に使えるSDKが提供されており、HTMLメールにも対応しています。
無料枠の内容は以下の通りです。
-
月100通まで無料
-
ドメイン認証不要
-
迷惑メール対策済みの送信ドメイン(内容によって引っかかったので参考までに)
今回のサイトでは、会計申請フォームから担当者へメール送信する機能で使用しています。
SendGridのような複雑な設定が不要で、学生でも扱いやすいのが魅力です。
Gemini
Googleが提供する最新の生成AIモデルです。
今回のポータルサイトでは直接必須ではありませんが無料で使えるためなんとなく導入しました。
サイト画面
機能一覧
- カレンダー
活動予定や会議スケジュールを管理・共有する機能です。
メンバー全員が同じカレンダーを参照でき、行事や締切の把握が簡単になります。
- 文書テンプレート
申請書や報告書など、団体でよく使う文書フォーマットをまとめてダウンロードできます。
必要なテンプレートを選ぶだけで、すぐに編集・提出が可能です。
- 共有フォルダ
団体内の資料やファイルをクラウド上で共有できます。
（ただクラウドへのリンクがあるだけです）
- 会計申請
経費精算や支払い依頼をオンラインで送信できる機能です。
入力内容は自動で担当者にメール送信されます。DBが領収書画像等で圧迫されるためメールBoxをDB代わりにしています。将来的には認証フローなども作れたら良いと思っています。
- 費用計算機
交通費や参加費などの支出を簡単に計算し、Excel形式でエクスポートできます。
複数人分の費用をまとめて算出することも可能です。ここのみAPIを介さずフロントのみで動作します。(スリープの弊害...)
- カンバンボード
タスクや案件をカード形式で可視化・整理できるボード機能です。
「ToDo」「進行中」「完了」などの状態をドラッグ操作で簡単に更新できます。
- AI対話
Gemini 2.5 Proを活用した、AIチャット機能です。
文章の要約、報告書の下書き生成、メッセージ文の提案などをサポートします。
- 備品管理
団体で使用する備品や消耗品の在庫を管理します。
貸出状況や在庫数を一覧で確認でき、紛失や重複購入を防ぎます。
最後に
今回は無料で使えるクラウドサービスを組み合わせ、団体運営に必要なポータルサイトを構築しました。
サーバーの設定や課金を気にせず、「コードをpushすれば自動で更新される」というRenderの仕組みや、「データが自動で保存・通知される」SupabaseとResendの連携によって、簡単に“ちゃんと動くクラウドサービス”を作れることを実感しました。
最後まで読んでいただきありがとうございました。無料かつ簡単にwebシステムを構築することに興味がある方の参考になれば嬉しいです。皆さんもぜひ作成してみてください！