2022.08追記 herokuの無料枠がなくなっちゃうみたいです
こんにちは、(自称)高校生エンジニアのLaddgeです
プログラミング初心者でも簡単に開発できるアプリの形態といえば、やはり「ウェブアプリ」ですよね
ウェブアプリには、スマホでもパソコンでもインストール不要で使えるという利点があります
今回は、そんな「ウェブアプリ」を、Pythonを使って作り、さらにそれを無料で公開する手順を解説したいと思います
注: Pythonをある程度書ける知識があることを前提としています
ウェブアプリとは
まずはウェブアプリというものがどんなものなのか解説していきます
アプリというとどのようなものを思い浮かべますか?

おそらく、パソコンやスマホにインストールして使うアプリが真っ先に思いつくと思います
このようなアプリは、パソコン用、スマホ用、同じスマホ用でもiOS用、Android用といった具合に、ターゲットを絞って開発するのが一般的です
ターゲットによって違う方法で開発しなければならないため、初心者には少し敷居が高いような気がします
それとは別に、今回紹介する、「ウェブアプリ」というアプリ形態があります
これは、おそらくこのサイトを見るために使っているブラウザアプリの上で動くアプリです
パソコンにもスマホでも、ブラウザアプリは同じように使うことができるため、使う人のデバイスに依存しないのが特徴です
僕の友達のむーんず君(Twitter)が、たくさんの機能をまとめたウェブアプリの「AppCubes」を公開しています
ぜひ見に行ってみてください
今回は、簡単なウェブアプリを一緒に作ってみましょう!
サンプルアプリの作成
簡単なウェブアプリということで、「クライアントのIPアドレスを表示するツール」を作っていきましょう。
まずは、プロジェクトのディレクトリを作ります。
$ mkdir getip-app # 任意のディレクトリ名
次に、必要なライブラリをインストールします。
$ pip install fastapi uvicorn # fastapiとuvicornをインストール
以下を main.py として保存します。
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
app = FastAPI()
@app.get("/", response_class=HTMLResponse)
def root(request: Request):
client_host = request.client.host
return f"クライアントのIPアドレス(ホスト名)は「{client_host}」です。"
これだけで、ローカルで動作するウェブアプリが完成しました。
試しにローカルで動かしてみましょう。
$ uvicorn main:app --host 127.0.0.1 --port 8000
ブラウザから localhost:8000 を開くと、IPアドレスが確認できるはずです。
(もちろんcurlなどでコマンドラインから試すのもありです。)
アプリを公開する
ウェブアプリのプログラムができたので、herokuで公開していきます。
まずは、herokuのアカウントを作成します。
上のページに必要な情報を入力します。
登録したメアドに確認メールが届くので、そこに書いてあるリンクを開き、パスワードを設定してください。

規約を読んで、Acceptします。
ここからはコマンドラインで作業をすると楽です。
以下のサイトを参考に専用のツールをインストールします。
コマンドラインからherokuにログインします。
$ heroku login -i
先ほどのプロジェクトのディレクトリでherokuアプリを作成します。
$ heroku create {appname} # appname: 任意のアプリ名
次に、サーバーの動作に必要なファイルを作成します。
以下を requirements.txt として保存してください。
fastapi
uvicorn
このように、必要なライブラリを列挙することで、herokuにアップロードしたときに自動でインストールしてくれます。
また、以下を Procfile (拡張子なし) として保存してください。
web: uvicorn main:app --host 0.0.0.0 --port $PORT
これで、必要なものはそろいました。
デプロイしていきましょう。
$ git add .
$ git commit -m "任意のコメント"
$ git push heroku main
これで、herokuにアップロードすることができました。
最後に、サーバープログラムを始動させます。
$ heroku ps:scale web=1
これで、https://{アプリ名}.herokuapp.com/ を開くと、IPアドレスを表示するアプリが動いているはずです。
herokuの無料枠を使い倒す裏ワザ
herokuの無料枠にはいくつか制限があります。
その中でも特に問題になるのが、
- 550時間/月しか連続稼働できない
- 独自ドメインを設定できない
- 30分リクエストがないとスリープに入る
です。
クレジットカード登録
上の二つについては、herokuにクレジットカードを登録することで回避できます。
Add card を押して、クレジットカードの情報を入力します。
稼働時間は、クレジットカード登録で1000時間/月になります。
一か月は長くても744時間なので、十分足ります。
(この時間の計算は、ひとつのアカウント全体での合計時間なので、ひとつのアカウントに複数のアプリを作った場合は足りなくなります。)
このクレジットカード登録は、Kyashやバンドルのようなプリペイドカードでも行けます。
しかも、複数のアカウントで使いまわすことができるので、複数アプリを作りたいときは、アプリ毎にアカウントを作るといいでしょう。
アカウントもメールアドレスさえあれば作れてしまうので、実質無限に作れます。
クレカ登録で独自ドメインも使えるようになります。
スリープ回避
herokuは無料枠だと30分リクエストがない場合、スリープに入ります。
このスリープがやっかいで、スリープ中にアプリを開くと、再起動のために少し遅くなります。
さらに、再起動の際に一度ファイルがきれいにされるため、アプリでファイルに書き出すような処理をしていると、その変更が保持されません。
(再起動してもいいようにファイルに書き出す系の処理はしないほうがいいと思います。)
一応、スリープ回避の手段として、定期的にリクエストを送るという方法があります。

これを使うと、定期的にリクエストを送って、サーバーが落ちていないかも監視できるのでおすすめです。
まとめ
herokuでお金をかけずにウェブアプリを公開することができました。
ウェブ開発はアイデア次第でなんでも作れるので、いろいろ試してみてください。
コメント