Sign in Subscribe

FlaskでWebアプリの公開手順

Last updated on 
FlaskでWebアプリの公開手順

FlaskはPythonで書かれたWebアプリケーション構築のフレームワークです．

Welcome to Flask — Flask Documentation (3.1.x)

本記事では，VPS上にFlaskで作成されたアプリを配置し，公開する手順を説明します．公開するアプリは，ローカル環境での実装確認が完了しているものとします．

💡
ローカル環境での実装確認はflask runを使う方法を確認してください

前提条件

  • VPSでGhost + Nginxが既に動作中
  • VPSのOSはUbuntu22
  • 独自ドメイン設定済み
  • SSL証明書設定済み

1. VPSへのファイルアップロード

VPSへ，公開するFlaskアプリを転送します．以下では，ローカルマシン上に，flask-appディレクトリがあり，その中に必要なファイル一式があると想定しています．例えばscpコマンドを使います．

# ローカルからVPSへアップロード
scp -r flask-app username@your-vps-ip:/var/www/

これで，ローカルでテストなどを行ったflask-appがそのままVPSの/var/www/flask-appとして配置できます．

2. Pythonの仮想環境の構築

flaskおよびgunicorn (Green Unicorn)というコマンドをインストールする必要があります．flask-app用のPython仮想環境を用意し，そこでインストールをしましょう．VPS側で操作してください．

# ホームディレクトリで仮想環境作成
cd ~
python3 -m venv flask-venv
source flask-venv/bin/activate

# 必要パッケージインストール
pip install flask gunicorn
# 実行可能スクリプトが`flask-venv/bin/`に作成される

3. Gunicornサービス設定

gunicornを自動実行できるようにします．gunicornについては，以下の公式HPを参照してください．

Gunicorn - Python WSGI HTTP Server for UNIX
Python WSGI HTTP Server for UNIX

systemdサービスファイル作成

sudo nvim /etc/systemd/system/flaskapp.service

内容は以下のようにします．WorkingDirectory, Environment, ExecStartのパスはユーザー環境を確認して適切に変更してください．なお，以下の例でExecStartの行が2行に見えるかもしれませんが，実際には1行で書きます．2行になっているとエラーになると思います．

[Unit]
Description=Flask App with Gunicorn
After=network.target

[Service]
User=kaz
WorkingDirectory=/var/www/flask-app
Environment="PATH=/home/<user_name>/flask-venv/bin"
ExecStart=/home/<user_name>/flask-venv/bin/gunicorn -w 2 -b 127.0.0.1:5000 app:app
Restart=always

[Install]
WantedBy=multi-user.target

サービス有効化

sudo systemctl daemon-reload
sudo systemctl enable flaskapp
sudo systemctl start flaskapp
sudo systemctl status flaskapp

4. Nginx設定追加

既存のNginx設定ファイルを編集

sudo nvim /etc/nginx/sites-available/your-domain-ssl.conf

Ghost設定の前に以下を追加：

    # Flask App
    location /flask-app/ {
        proxy_pass http://127.0.0.1:5000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

Nginx設定テスト・再読み込み

sudo nginx -t
sudo nginx -s reload

5. 権限設定

systemdサービスでUser=<user_name>を指定しているため，通常は権限変更不要ですが，エラーが発生した場合のみ，以下を試してください．

sudo chown -R kaz:kaz /var/www/flask-app
sudo chmod -R 644 /var/www/flask-app/*
sudo chmod +x /var/www/flask-app/app.py

6. 動作確認

サービス状態確認

sudo systemctl status flaskapp
sudo systemctl status nginx

アクセス確認

もともと公開していたGhostサイトや，他に公開しているURLにアクセスして，問題がないかをチェックしましょう．

  • https://yourdomain.com/ - Ghost サイト
  • https://yourdomain.com/flask-app/ - Flask アプリ

7. ログ確認

# Gunicornログ
sudo journalctl -u flaskapp -f

# Nginxログ
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

8. 更新した時の手順

gunicornは自動リロードしません．アプリ更新時には，以下のようにサービスを再起動してください．

sudo systemctl restart flaskapp