🐥

RenderでFlaskのWebアプリをデプロイする方法

に公開
Flask
Python
render
tech

はじめに

PaaS（Platform as a Service）のRenderというサービスを利用して、簡単なWebアプリをデプロイする方法を紹介します。無料でデプロイ可能なので、是非試してみてください。

手順

デプロイするWebアプリの作成

WebアプリケーションフレームワークのFlaskを使って、簡単なおみくじアプリを作ります。
以下の構造でフォルダ、ファイルを作成してください。

omikuji_app/
├── app.py
├── requirements.txt
└── templates/
    ├── index.html
    └── result.html

各ファイルのコードは以下に記載します。コピペしてください。

app.py
from flask import Flask, render_template
import random

app = Flask(__name__)

omikuji_results = ['大吉', '中吉', '小吉', '吉', '末吉', '凶', '大凶']

# おみくじを引く画面へ遷移
@app.route('/')
def index():
    return render_template('index.html')

# おみくじの結果をランダムで選択し、結果画面へ遷移
@app.route('/omikuji')
def omikuji():
    result = random.choice(omikuji_results)
    return render_template('result.html', result=result)

if __name__ == '__main__':
    app.run(debug=True)
requirements.txt
Flask
gunicorn
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>おみくじ</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: white;
        }
        .container {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>おみくじを引こう！</h1>
        <form action="{{ url_for('omikuji') }}">
            <button type="submit">おみくじを引く</button>
        </form>
    </div>
</body>
</html>
result.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>おみくじの結果</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: white;
        }
        .container {
            text-align: center;
        }
        .daikichi {
            font-size: 2em;
            color: #e91e63;
            animation: sparkle 1s infinite alternate;
        }
        @keyframes sparkle {
            from { text-shadow: 0 0 5px #e91e63; }
            to { text-shadow: 0 0 20px #e91e63; }
        }
    </style>
</head>
<body>
    <div class="container">
        {% if result == '大吉' %}
            <h1 class="daikichi">🌸 結果は… {{ result }} です！ 🌸</h1>
        {% else %}
            <h1>結果は… {{ result }} です！</h1>
        {% endif %}
        <a href="{{ url_for('index') }}">もう一度引く</a>
    </div>
</body>
</html>

デプロイすることが目的なので、コードの説明は省略します。

GitHubでリポジトリの作成

デプロイするために、GitHubでリポジトリを作成します。
GitHubのアカウントを持っていない方は新たに作成してください。

GitHubのホーム画面で緑色のNewのボタンをクリック

Repository nameに好き名前を入れて、（例では「omikuji_app」と入力）
Descriptionに適当な説明を入れて、（なしでもOK）
Add a README fileのチェックボックスにチェックを入れます。
その後、Create repositoryをクリックしてください。

その後、作成したリポジトリの画面でAdd fileのUpload filesをクリックしてください。

作成したフォルダ・ファイルをドラッグアンドドロップして、ファイルとフォルダが以下の状態になっていることを確認出来たら、Commit changesをクリックしてください。

コミット後のリポジトリは以下の状態になっているはずです。

RenderとGitHubを連携

まずは、Renderのアカウントを作成してください。
https://dashboard.render.com/register
GitHubのアカウントを持っていれば簡単に作れるので、以下の画面でGitHubの欄をクリックしてください。

デプロイ

Renderの画面で**＋ New**の欄をクリックして、Web Serviceを選択してください。

以下の画面に遷移するので、先ほど作成したリポジトリを選択してください。

そして、設定画面に遷移するので、初期設定を行います。
気をつける場所は以下3点です。
1.LanguageはPython3
2.Start Commandは「gunicorn app:app --log-file」
3.Instance TypeはFreeを選択してください。

他はデフォルトで良いと思います。
最後にDeploy web serviceボタンをクリックしてください。

ビルド&デプロイが始まります。
ビルドが成功したことを確認し、Your service is Live🎉と表示されたら、デプロイ成功です。
Available at your primary URLの次にURLが表示されるので、そこにアクセスすると
作成したおみくじWebアプリを使うことができます。

試しに使ってみた

URLにアクセスすると、以下の画面が表示されます。
おみくじを引いてみましょう。

問題なく動作することが確認できました！
大吉を引いたときだけ豪華にしているので是非試してみてください。

最後に

無料枠なのでもちろん色々制限はありますが、初学者にとってはとても優良なサービスだと思います😊 筆者自身も今まで自分が作ったWebアプリをサーバーにデプロイするという経験はなかったため、とても新鮮な経験でした。いつか多くの人に使われるサービスをつくってみたいものですね。

Discussion