LoginSignup
0
0
@tenko1729(MC)

【Amazon EC2 + Flask + Docker + SQLite】Amazon EC2上にFlaskプロジェクトをデプロイする方法

Last updated at Posted at 2024-08-05

はじめに

本記事ではAmazon EC2上にFlaskプロジェクトをデプロイする方法を解説します。基本的にはコピペで作業が完了するよう解説していきますので、とりあえずデプロイを体験してみたいという方は参考にしてください。

目次

  1. 完成図
  2. Webサーバの作成
  3. ElasticIPの割り当て
  4. DBサーバの作成
  5. Webサーバの設定
  6. 参考文献

完成図

image.png

Flaskプロジェクトをデプロイするための最小構成で構築予定です
サーバを立ち上げてそこにFlaskプロジェクトをデプロイします

Webサーバの作成

Webサーバとは

インターネットからリクエストを受け取り、ウェブページやその他のウェブリソースを提供するコンピュータやプログラムです
Webサーバの作成と書いてありますが、本節ではlinux環境(Amazon Linux2)を作成するところまで作業を進めて、後ほどlinuxにWebサーバの一つであるnginxをインストールしていきます

Webサーバの作成手順

マネジメントコンソールの検索バーからEC2を起動
image.png

インスタンスを起動をクリック
image.png

名前にWebServerと記入
image.png

AMIでAmazonLinux2を選択
image.png

新しいキーペアの作成をクリック
image.png

鍵の名前をWebServerKeyにしてキーペアを作成をクリック（作成したサーバにアクセスするためのカギを作成しています）
image.png

ネットワーク設定の編集ボタンをクリック
image.png

セキュリティグループの内容を以下の通り編集(今回はhttp通信と、Flaskプロジェクトへのアクセスに必要な5000番ポートの通信を許可しています。むやみに通信を許可するとセキュリティ上のリスクが増加しますので、通信の許可は最小限にしましょう)
image.png

ストレージ設定で容量を16GBに設定します（場合によっては必要ないですが、念のためデフォルトより多めに容量を確保しておきます。容量不足の際は後から変更も可能です）
image.png

インスタンスを起動をクリック
image.png

これでWebサーバの作成が完了しました。
この後作成したサーバにIPアドレスを割り振って接続をしていきます。

ElasticIPの割り当て

ElasticIPとは

静的なパブリックIPアドレスで、インターネットからFlaskプロジェクトにアクセスする際に使用します
インスタンスの停止や再起動に伴い、パブリックIPの内容が書き換わってしまうため、静的なパブリックIPであるElasticIPを割り振ります

ElasticIPの割り当て手順

EC2の画面でElastic IPをクリック
image.png

Elastic IPアドレスを割り当てるをクリック
image.png

割り当てをクリック
image.png

このElastic IPアドレスを関連付けるをクリック
image.png

インスタンスでWebServerを選択して関連付けるをクリック
image.png

これでElasticIPの割り当ては完了です
これによりサーバにアクセスする際に使用するIPアドレスを固定化することができます

Webサーバの設定

サーバの接続

tera termを使って先ほど作成したサーバに接続します
以下の手順を順に実行してください

tera termを起動
image.png

tera termをインストールしていない場合は以下のサイトからインストールしてください（Amazon Linux2023にも接続できるようtera term5.0 beta1のインストール先を貼っています。5.0より前のものではAmazon Linux2023にアクセスできません。）

EC2で作成したWebServerにチェックを入れてパブリックIPv4アドレスをコピー
image.png

tera termのホストにパブリックIPv4アドレスを貼り付けてokをクリック(本記事の公開後このIPアドレスは削除しております)
image.png

ユーザ名に「ec2-user」と入力し秘密鍵にWebServerKey.pemを選択してokをクリック(ec2-userはデフォルトで作成されているユーザの名前です)
image.png

鳥が羽ばたけば接続成功です
image.png

これ以降サーバに接続する際はこの手順を踏んでください

プログラムの配置

Flaskプロジェクトのデプロイに必要な作業を進めます
以下の手順を順に実行してください

以下のコマンドを実行(システムのすべてのパッケージを最新のバージョンに更新します)

sudo yum update -y

実行画面
image.png

以下のコマンドを実行(python3.8をインストールします。途中で何かを聞かれたらyキーを押してエンターをクリックしてください)

sudo amazon-linux-extras install python3.8

実行画面

image.png

以下のコマンドを実行(zipファイルを解凍するパッケージをインストール。flaskプロジェクトをzip形式で転送して解凍する際に使用します)

sudo yum install unzip

実行画面

image.png

以下のコマンドを実行(venvという名前の仮想環境を作成)

python3.8 -m venv venv

実行画面(以下の通りlsコマンドを使って、venvというフォルダが作成されていることを確認してください)

image.png

Flaskプロジェクトをzipにしてtera termにドラッグアンドドロップ→okをクリック（Flaskプロジェクトは直下にapp.pyがあるようなディレクトリ構成にしてください）

image.png

Flaskプロジェクトを実行している環境で以下のコマンドを実行してrequirements.txtを作成(Flaskプロジェクトを実行する際に必要なモジュール一覧を生成します。今アクセスしているサーバではなくご自身がFlaskプロジェクトを作成して実行している環境下で実行してください)

pip freeze -> requirements.txt

同様の方法でrequirements.txtもドラッグアンドドロップしてサーバに転送

image.png

lsコマンドを実行してFlaskプロジェクトとrequirements.txtファイルが存在することを確認してください(本記事ではchapter5.zipという名前でFlaskプロジェクトを作成しています)

image.png

以下のコマンドを実行(zipファイルを解凍します。ファイル名はご自身の環境に合わせて読み替えてください)

unzip chapter5.zip

実行例

image.png

以下のコマンドを実行(仮想環境に入ります)

source ~/venv/bin/activate

実行例(カーソル行にvenvと表示されていることを確認してください)

image.png

以下のコマンドを実行(Flaskプロジェクトを実行するために必要なモジュール一式をインストールします。プラットフォームの違いによってエラーが発生する可能性があります。適宜requirements.txtの内容を書き換えてご対応ください)

pip install -r requirements.txt

実行例(エラーメッセージが表示されていないことを確認してください)

image.png

サーバのインストール

以下のコマンドを実行(Webサーバのインストールを行います。途中で何かを聞かれたらyキーを押してエンターキーを押してください)

sudo amazon-linux-extras install nginx1

実行画面

image.png

以下のコマンドを実行(WebサーバとFlaskプロジェクトの橋渡しを行う)

pip3 install gunicorn

実行例

image.png

アプリケーションの実行設定

cd venvでchapter5フォルダ(Flaskプロジェクトフォルダ)に移動してvi wsgi.pyコマンドを実行してwsgi.pyファイルを以下の通り編集(app.pyのcreate_app関数を実行するように設定しています。ご自身の環境に合わせて書き換えてください)

wsgi.py
from app import create_app

app = create_app()

if __name__ == "__main__":
    app.run()

cat wsgi.pyコマンドを使って正しくファイルが作成されていることを確認してください

image.png

lsコマンドを使って画像の通りchapter5フォルダの中にapp.pyとwsgi.pyとその他必要なファイルが配置されていることを確認してください

image.png

以下のコマンドを実行(Webサーバの設定ファイルを編集)

sudo vi /etc/nginx/nginx.conf

以下の通りhttpの中のserver { }の中身を編集してください

nginx.conf
    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        proxy_pass http://127.0.0.1:8000;
            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;
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

以下のコマンドを実行(Webサーバを自動起動する設定)

sudo systemctl enable nginx.service

実行例
image.png

以下のコマンドを実行(Webサーバを起動)

sudo systemctl start nginx.service

実行例

image.png

以下のコマンドを実行(Webサーバの状態を確認するコマンドです。サーバの状態がactiveになっていることを確認してください。)

sudo systemctl status nginx.service

実行例

image.png

以下のコマンドを順に実行(Flaskプロジェクトで使用するDBを作成するコマンド)

flask db init

flask db migrate

flask db upgrade

実行例

image.png

以下のコマンドを実行(gunicornを起動します)

gunicorn --bind 0.0.0.0:5000 wsgi:app

ブラウザからElasticIP:5000にアクセスして作成したアプリケーションにアクセスできればokです

image.png

お疲れさまでした。これで作業は完了です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0