Zenn
🌟

Render.com&SupabaseでGitHub連携チャットアプリを始めて個人開発した記録

に公開
Python
個人開発
Supabase
render
電気通信業務
idea
  • 現在は電気通信事業の申請中のため、サイトは一時的に非公開となっています(8/1公開予定)
  • 本記事は個人的な体験・感想に基づくものであり、内容の正確性を保証するものではありません

初めに

個人開発で作ったWebアプリを公開してみたいと思ったことはありませんか？
私もまさにそんな気持ちから個人開発を始めました。
それで作成したwebサービスはgithubと連携ができるchat toolです。作成した理由は普段Google Chat を使っていますが、Discord のようにチャンネルが作れないことに不満がありました。
また、複数の TODO 管理サービスも試しましたが、どれも継続して使えませんでした。
これらの課題を一つのツールで解決できないかと考え、GitHub連携が可能なチャットツールを個人開発することにしました。

https://projectchat-z63y.onrender.com

この2つの記事を参考にこの記事を書かせてもらいました

https://qiita.com/asa129/items/056a601746b49029c768

https://qiita.com/keitaMax/items/fc4db63c598aaf61c196

流れ

  • 技術スタック
  • 使用した外部ライブラリー
  • デプロイサービスについて
  • databaseについて
  • 電気通信事業について

技術スタック

技術 内容
言語 python
デプロイ先 render.com
supabase Supabase
エディタ VScode
バージョン管理 github

使用した外部ライブラリー

ライブラリー 内容
flet GUI作成
githuboauth
python-dotenv .envの読み込み
supabase supabaseの操作
PyGithub githubとの連携

デプロイサービスについて

使用したデプロイサービスはRender.comです

https://render.com

項目 内容
対応言語 HTML & CSS & JavaScript, Node.js, Python, Ruby, Go, Rust, Elixir, Docker, PostgreSQL
無料枠の制限 15分間アクセスがないと自動的にスリープ状態になる
月750時間まで稼働可能
PostgreSQLは1GB
スペック CPU:0.1
RAM:512MB
ストレージ:不明
通信速度 ping:10ms
ダウンロード速度:219Mbps
アップロード速度:109Mbps

Render.comを選んだ理由

  • 無料
  • クレジットカード登録不要
  • 商用利用可能
  • 24時間365日動かすことが可能
  • 多くの言語に対応しているため
    あまり多くのデプロイサービスを試していないためわかりませんがpythonが使用可能なデプロイサービスはGoogle cloudぐらいしか知らないためこれにしました。

メリット

  • 簡単にデプロイできる
  • たくさんの言語に対応しているため個人開発などに向いている
  • ファイルサイズに特に制限がないためファイルサイズを気にしなくていい
  • 外部ライブラリーを気にしなくていい(デプロイ時に入れてくれる)

デメリット

プログラムが生成したファイルはスリープに入ると削除される
1つ以上のprojectを動かすと24時間365日稼働ができなくなる

使ってみた感想

まだサービスを運用していないため詳しいことは分かりませんがここまで無料枠で提供してくれるんなんてとても太っ腹だと思います

  • デプロイがgithubとの連携だけで行えるためとても楽
  • 多少起動に時間がかかるか許容範囲内

スリープの対策方法

やったことがないので分かりませんが以下の方法でできるそうです

https://zenn.dev/no215/articles/ff4f1670c080e4

<details open><summary>Render.comのデプロイ方法(簡易版)</summary>

大まかな流れ

  • loginする
  • add newを押してWeb Servicesを選択
  • githubアカウントと紐づける
  • リポジトリ選択
  • デプロイの設定をする

デプロイの設定方法について

  • Name:デプロイするアプリの名前を入力してください
  • ProjectOptional:プロジェクトに追加する機能です。(任意)
  • Language:使用する言語を入力してください
    今回はpythonのコードをデプロイするのでpythonを指定します
  • Branch:デプロイするブランチを指定します
  • Region:serverを置く地域を設定ます
  • Root Directory:srcを指定するとsrcの中を参照するようになります
  • Build Command:pip install -r requirements.txt
    ビルド時に外部ライブラリを使用しているため、requirements.txt に記載された内容をインストールします。
  • Start Command:python3 src/test.py
    アプリ起動時に実行するコマンドです。今回は src フォルダ内の test.py を起動するように指定しています。
  • Instance Typeどのインスタンスでデプロイするかを決定します
  • 今回は無料でやりたいのでfreeを選択します
  • Environment Variables:環境変数を設定する場所です

databaseについて

使用したdatabaseはsupabaseです

https://supabase.com

項目 内容
月間アクティブユーザー(MAU) 50,000人まで
データベース容量 500MBまで
ストレージ容量 1GBまで
APIリクエスト数 無制限
プロジェクト数 同時に2つまで
休止条件 週間アクセスがないと自動休止（再起動可能）
超過時の挙動 読み取り専用モード
クレジットカード 不要

supabaseを選んだ理由

  • 無料
  • クレジットカード登録不要
  • 商用利用可能
  • 24時間365日動かすことが可能
  • APIリクエスト数に制限がないこと

当時firebaseかsupabaseどちらにしようか迷っていました
firebaseはsupabaseよりもデータベースの容量が大きいですがドキュメントの読み取り回数などに制限があります普通に使っていれば無くなることはないのですが、自分は初心者なので何をやらかすかがわからないためsupabaseを選択しました

項目 内容
データベースの容量 1 GiB
ドキュメントの読み取り 50,000/日
ドキュメントの書き込み 20,000/日
ドキュメントの削除 20,000/日

メリット

  • APIリクエスト数が無制限
    デメリット
  • firebaseに比べてデータベース容量が少ない

使ってみた感想

とても動作が早く良いです

  • 動作が早い
  • テーブルが分けられる

<details open><summary>supabaseでdatabase作成方法(簡易版)</summary>

  • サインアップをする
  • New projectをクリック
  • サービスの作成
  • projectの作成
  • New tablesを押しテーブルの作成

サービスの作成

  • Name:サービス名の入力
  • Type of Organization:組織のタイプを選択

projectの作成

  • Organization:組織の選択
  • Name:projectnameの入力
  • Database Password:databaseのパスワードを設定(一度も使ったことはない)
  • Region:地域を選択(Tokyoがある)
  • Pricing Plan:料金プランを選択する(無料枠を利用するのでfree)

テーブルの作成

  • name:テーブル名の設定
  • Description:説明を入力
  • Enable Row Level Security(RLS):認証された人以外編集できなくする(keyなどがないと編集、取得不可能)
  • Enable Realtime:リアルタイムで更新してくれるようになる
  • Columns:列の設定

supabaseを使用する上で注意しておいた方がいいこと

google翻訳などをONにした状態でリアルタイム更新をONにしてしまうと警告が出ます

電気通信事業について

クローズドチャットを実装するには電気通信事業を申請しないといけないことを知ったので申請してみました

必要なもの

電気通信事業届出書（様式第8)について

https://www.soumu.go.jp/main_content/000792999.pdf

電気通信事業届出書（様式第8)に書くことは以下のとおりです。

  • 郵便番号
  • 住所
  • 指名
  • メールアドレスもしくは電話番号
  • 提供区域
  • 事業開始予定年月日(提出日よりも後)
    意外にも、必要な情報はこれだけです。

ネットワーク構成図（様式第3）について

https://www.soumu.go.jp/main_content/000792386.pdf

名前の通りネットワーク構成図を書く場所です例

提供する電気通信役務に関する書類（様式第4）について

提供するサービスがあっているものに丸をつけていきます。
chatツールの場合

  • 31 インターネット関連サービスのみ
    に⚪︎クローズドチャットと書きます

住民票の写しの発行に必要なもの

  • マイナンバーカード
  • 200円
    やり方は下のデジタル庁ニュースのやり方動画をご覧になってください

https://www.youtube.com/watch?v=RKA2jaKSebg

切手について

重さ 値段
50g以内 140円
100g以内 180円
150g以内 270円
250g以内 320円
500g以内 510円
1kg以内 750円

自分の場合50g以内だったので送り用の切手1枚と返用の切手1枚買いました

最後に

不明な点などありましたら質問をよろしくお願いします

参考記事

【初心者向け】ほぼ無料でWebアプリをデプロイできるおすすめサービスまとめ
supabaseとRender.comを使って無料で簡単にウェブアプリケーションを公開する
Render.com無料版ではプログラムで生成したファイルなどが永続的ではない
【個人開発】「添加物のないお酒が見つからない！」を解決する検索アプリを作りました【React/TypeScript/Supabase】
個人開発「心のトイレ」つくってみた
supabaseとRender.comを使って無料で簡単にウェブアプリケーションを公開する
【初心者向け】ほぼ無料でWebアプリをデプロイできるおすすめサービスまとめ
Renderで無料デプロイしたアプリをキープアライブする方法

Discussion