注意
- 現在は電気通信事業の申請中のため、サイトは一時的に非公開となっています(8月中に公開予定)
- 本記事は個人的な体験・感想に基づくものであり、内容の正確性を保証するものではありません
初めに
個人開発で作ったWebアプリを公開してみたいと思ったことはありませんか？
私もまさにそんな気持ちから個人開発を始めました。
それで作成したwebサービスはgithubと連携ができるchat toolです。作成した理由は普段Google Chat を使っていますが、Discord のようにチャンネルが作れないことに不満がありました。
また、複数の TODO 管理サービスも試しましたが、どれも継続して使えませんでした。
これらの課題を一つのツールで解決できないかと考え、GitHub連携が可能なチャットツールを個人開発することにしました。
この2つの記事を参考にこの記事を書かせてもらいました
流れ
- 技術スタック
- 使用した外部ライブラリー
- デプロイサービスについて
- databaseについて
- 電気通信事業について
技術スタック
| 技術 | 内容 |
|---|---|
| 言語 | python |
| デプロイ先 | render.com |
| supabase | Supabase |
| エディタ | VScode |
| バージョン管理 | github |
使用した外部ライブラリー
| ライブラリー | 内容 |
|---|---|
| flet | GUI作成 githuboauth |
| python-dotenv | .envの読み込み |
| supabase | supabaseの操作 |
| PyGithub | githubとの連携 |
デプロイサービスについて
使用したデプロイサービスは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との連携だけで行えるためとても楽
- 多少起動に時間がかかるか許容範囲内
スリープの対策方法
やったことがないので分かりませんが以下の方法でできるそうです
Render.comのデプロイ方法(簡易版)
大まかな流れ
- 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です
| 項目 | 内容 |
|---|---|
| 月間アクティブユーザー(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に比べてデータベース容量が少ない
使ってみた感想
とても動作が早く良いです
- 動作が早い
- テーブルが分けられる
supabaseでdatabase作成方法(簡易版)
- サインアップをする
-
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)
- ネットワーク構成図（様式第3）
- 提供する電気通信役務に関する書類（様式第4）
- 住民票の写し（コピー不可）
- 切手2枚
- 封筒2つ
書類書き方
電気通信事業届出書（様式第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で無料デプロイしたアプリをキープアライブする方法