MSBOOKS

プログラミングとか深層学習とか日常の出来事とか

RenderとFastAPIでwebアプリを公開してみた

Python WEBアプリ プログラミング

はじめに

前回の記事でPythonのFastAPIで作ったWebアプリを作ったので、公開する方法がないか色々探していたのですが有料のものが多いのが現状です…。GoogleのGCPも一時期使っていたのですが、クレジットカードを登録する必要があるので間違えてリクエストを大量に送ってしまったり、不正大量アクセスがもし発生すると、高額な請求が発生するのが怖くてやめてしまっていました。そこで探していたら無料でPythonのWebアプリが公開できるRenderというものを見つけたので、Pythonアプリを公開してみました。
msteacher.hatenablog.jp

公開するWebアプリ

ディレクトリ構成

今回はいきなり大きなアプリを公開するのではなく、簡易的なアプリを公開しようと思います。ディレクトリ構成は以下のようにしました。

root/
　├ main.py
　├ requirements.txt
　├ README.md
　└  static/
　 　├  index.html
　 　└  favicon.ico

サーバー側のコード

まずサーバー側のコードを書きます。FastAPIを起動してそのままHTMLを返すコードです。

  • main.py
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.responses import FileResponse
from pathlib import Path
from starlette.staticfiles import StaticFiles

# fastapiの設定
app = FastAPI()

# 静的ファイル(HTMLファイル)を提供するためのディレクトリを指定
static_dir: Path = Path("static")
app.mount("/static", StaticFiles(directory=static_dir, html=True), name="static")

"""
HTMLを返す
"""
@app.get("/", response_class=HTMLResponse)
def index():
    return FileResponse(static_dir / "index.html")

フロント側のコード

フロントエンド側はHello Worldというボタンを押すと、Hello Worldというポップアップがでるだけの簡単な作りにしました。

  • index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <div id="header">
            <h1>Hello Page</h1>
        </div>
    </div>
    <input id="helloworld-button" type="button" value="Hello World !" onclick="displayHelloWorld()">
    <script>
        function displayHelloWorld() {
            alert("Hello World !");
        }
    </script>
</body>
</html>

動作確認

ここまで出来たら以下のコマンドを打って、FastAPIを起動させます。

$ uvicorn main:app

以下のようなINFOが表示されるので、任意のブラウザでhttp://127.0.0.1:8000にアクセスすると、先程作ったページが開けると思います。

INFO:     Started server process [23000]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)


ボタンを押すと…

依存関係の記述

これをwebアプリとしてデプロイするためには、サーバー側でpythonのライブラリをインストールしないといけないため、ライブラリの依存関係ファイルを用意しておく必要があります。今回はRender側で読み込むrequirements.txtを以下のように作成しました。もし何をインストールしたか忘れた場合は"pip freeze"コマンドを打てばわかるのでそこから抽出します。

  • requirements.txt
fastapi == 0.88.0
pathlib == 1.0.1
starlette == 0.22.0
uvicorn == 0.20.0

READMEを作成

必要に応じてREADME.mdを作っておきます。

  • README.md
# practice
PythonのFastAPIでHTMLを返すだけのテスト用のリポジトリ

GitHubにソースコードをPush

GitHubのアカウントを作成

RenderにデプロイするためにはGitHubアカウントが必要なので、アカウントを作成します。私はすでにアカウントがあったのでそれをそのまま使います。
github.co.jp

GitHubにリポジトリを作成

今回はpracticeというリポジトリを作成しました。作成方法はgithub公式のガイドが参考になると思います。
docs.github.com

GitHubにソースコードをPush

ローカルで作成したコードをGitHubのリポジトリにpushします。
私の場合は以下のような感じです。

github.com
コミット履歴が汚いですがそれはご愛嬌ということで…。

Renderにwebアプリをデプロイ

Renderアカウントを作成

Renderのホームページにアクセスし、GitHubアカウントを連携させます。

dashboard.render.com

Renderにwebアプリをデプロイ

ログインができたら右上の"NEW+"を押して、メニューから"Web Searvice"を押します。

次に、下のような画面が出るので"Build and deploy from a Git repository"を選択します。これでGitHubのリポジトリからデプロイできます。

次に、先程作ったpracticeのリポジトリを選択します。もしない場合は検索して追加します。

次はデプロイに関する細かい設定になります。以下のように設定します。

Name：デプロイするサービス名を入れます。これがURLに入ります。(例) https://{サービス名}.onrender.com/
Region：日本があればよかったのですが、なかったので近いSingaporeを選択します。
Branch：デプロイしたいGitのブランチを選択します。今回はmainのままにします。
Root Directory：リポジトリのルートディレクトリを選択できます、今回はルートのままで良いので無記入。
Runtime：Python 3を選択。
Build Command："pip install -r requirements.txt"を記載。これにより必要なライブラリを取得できます。
Start Command："uvicorn main:app --host 0.0.0.0 --port $PORT"を記載。uvicornでmainを実行します。ポートはrender側で設定されます。
Instance Type："Free"を選択。
Environment Variables：環境変数は今回はなし。

これらは公式にガイドがあります。
docs.render.com

動作確認

設定が完了するとデプロイが始まります。以下のように"Your service is live 🎉"と表示されれば、無事デプロイされて動いています。

https://{サービス名}.onrender.com/にアクセスして動作確認してみます。

無事開けました。

おわりに

Renderを使うことで、簡単にGitHubからPythonで作ったFastAPIのアプリをデプロイすることができました。Freeプランだと色々制約はありますが、無料でwebアプリを公開できるのはありがたいですね。外出先からでもアクセスできたとき、こんなくだらないサイトですが開けたとき感動しました。昔つくったアプリとかも公開してみたいですね。