AWS EC2, Flask, WSGIを使って、ウェブサイトを作ってみる。 #AWS

注意

練習のためにウェブサイトを構築する場合、使い終わったら、EC2インスタンスは停止しておきましょう。

環境

Windows 10 Home
AWS EC2
ubuntu 22.04
Flask 3.0.0

背景

今までVPSでウェブアプリをホストしてきたけど、時代はクラウドなので、AWSに挑戦する。

結論

AWS EC2を使ってFlaskの動的ウェブサイトをホストしたが、クラウド特有の機能を使わなかったので、もちろん手順はVPSと全く同じだった。つまり、EC2にssh接続をして、GitHubからプロジェクトをcloneして、apache2サーバでルーティングする。

クラウド特有の機能の例としては、拡張性の高いDBを、EC2とは別の場所に設置するRDSというサービスが挙げられる。今回は、クラウド特有の機能を使わずに、EC2で完結する動的ウェブサイトをホストした。

AWS EC2を使って動的ウェブサイトをホストする

動的ウェブサイトとは

動的ウェブサイトは、APIを介してDBにアクセスするなどして、毎回の表示が一致しないウェブサイトのことである。今回のウェブサイトは、動的ウェブサイトではないが、WSGI, Flaskを使っているため、動的ウェブサイトへの入り口となるだろう。

EC2にssh接続するまでの手順

EC2にssh接続するまでの手順として、下記のリンクの動画が分かりやすかったです。

下記のリンクは、app.pyを手動で実行しているので、実行している時のみしか、ウェブサイトにアクセスすることができません。本記事のように、WSGIを使うことで、常にウェブサイトをホストすることができます。

apache2をインストール

EC2にssh接続してからこれ以降の手順に進みます。

apache2は複数のウェブサイトをホストするサーバです。

下記のコマンドで、apache2をインストールする。

active (running)になっているので、無事にインストールされている。

$ sudo apt update
...
$ sudo apt install apache2
...
$ sudo systemctl enable apache2
...
$ systemctl status apache2
...
Active: active (running)
...

下記のコマンドで、apache2フォルダが作成されていることを確認する。

$ cd /etc
/etc$ ls -l
...
drwxr-xr-x 8 root root       4096 Oct 20 14:45 apache2
...

apache2の設定ファイルを追加

新しく作成するウェブサイトのために、apache2に関する設定ファイルを追加します。

下記の設定により、「awsec2test.yourdomainname.com」にアクセスが来た場合、「/var/www/AWSTest/app.wsgi」にルーティングされるようになります。

今回、ドメイン名は「yourdomainname.com」で、サブドメイン名は「awsec2test」となっています。また、プロジェクトフォルダは、「/var/www/AWSTest/」となっています。

/etc$ cd apache2
/etc/apache2$ ls -l
...
drwxr-xr-x 2 root root  4096 Oct 20 14:45 sites-available
drwxr-xr-x 2 root root  4096 Oct 20 14:45 sites-enabled
...
/etc/apache2$ cd  sites-available
/etc/apache2/sites-available$ ls -l
total 12
-rw-r--r-- 1 root root 1332 May  3 20:02 000-default.conf
-rw-r--r-- 1 root root 6338 May  3 20:02 default-ssl.conf
/etc/apache2/sites-available$ sudo touch awsec2test.yourdomainname.com.conf
/etc/apache2/sites-available$ ls -l
total 12
-rw-r--r-- 1 root root 1332 May  3 20:02 000-default.conf
-rw-r--r-- 1 root root    0 Oct 20 14:55 awsec2test.yourdomainname.com.conf
-rw-r--r-- 1 root root 6338 May  3 20:02 default-ssl.conf
/etc/apache2/sites-available$ sudo nano awsec2test.yourdomainname.com.conf
/etc/apache2/sites-available$ cat awsec2test.yourdomainname.com.conf
<VirtualHost *:80>
    ServerName awsec2test.yourdomainname.com

    WSGIDaemonProcess awstest threads=5
    WSGIScriptAlias / /var/www/AWSTest/app.wsgi

    <Directory /var/www/AWSTest/>
        WSGIProcessGroup awstest
        WSGIApplicationGroup %{GLOBAL}
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/awstest_error.log
    CustomLog ${APACHE_LOG_DIR}/awstest_access.log combined
</VirtualHost>

apache2の設定ファイルを有効化

さきほど作ったapache2の設定ファイルを有効化します。

/etc/apache2/sites-available$ cd ../
/etc/apache2$ ls -l
...
drwxr-xr-x 2 root root  4096 Oct 20 14:56 sites-available
drwxr-xr-x 2 root root  4096 Oct 20 14:45 sites-enabled
...
/etc/apache2$ cd  sites-enabled
/etc/apache2/sites-enabled$ ls -l
total 0
lrwxrwxrwx 1 root root 35 Oct 20 14:45 000-default.conf -> ../sites-available/000-default.conf
$ sudo a2ensite awsec2test.yourdomainname.com.conf
/etc/apache2/sites-enabled$ ls -l
lrwxrwxrwx 1 root root 35 Oct 20 14:45 000-default.conf -> ../sites-available/000-default.conf
lrwxrwxrwx 1 root root 51 Oct 20 14:57 awsec2test.yourdomainname.com.conf -> ../sites-available/awsec2test.yourdomainname.com.conf
$ sudo systemctl restart apache2

ウェブサイトのプロジェクトフォルダ

すでに、プロジェクトフォルダがGitHub上に作成されているものとします。

今回は、下記の構成のようになっているウェブサイトが、GitHub上にすでにpushされています。

templates
    -index.html
app.py
app.wsgi

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

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

app.wsgi

import sys
sys.path.insert(0, '/var/www/AWSTest')

from app import app as application

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello AWS</title>
</head>
<body>
    <h1>Hello AWS. Hello Flask with WSGI.</h1>
</body>
</html>

GitHubからEC2にコピーする

下記のyournameの部分には、あなたのGitHubの名前を入れてください。

下記のAWSTestは、GitHubレポジトリの名前です。名前が異なる場合は、変更してください。

/var/www$ sudo git clone https://github.com/yourname/AWSTest
...
/var/www$ ls -l
total 8
drwxr-xr-x 4 root root 4096 Oct 20 15:15 AWSTest
drwxr-xr-x 2 root root 4096 Oct 20 14:45 html

WSGIが機能するようにモジュールをインストールする

libapache2-mod-wsgi-py3をインストールします。

$ sudo apt-get install libapache2-mod-wsgi-py3
$ sudo systemctl restart apache2

今回使用するPythonモジュール（Flask）をインストールする

Flaskをインストールします。

$ sudo apt install python3-pip
...
$ pip3 install flask
...

DNSのAレコードを設定する

私はXserver VPSからドメインを取得しているので、そこから、新しいAレコードを追加しました。

「XXX.XXX.XXX.XXX」の部分は、AWSのEC2インスタンスのIPアドレスです。

DNSレコードの追加が反映されるのには、少し時間がかかります（5~20分くらいな気がする）。

awsec2test.yourdomainname.com    A    XXX.XXX.XXX.XXX

成功しているかどうかの確認

「awsec2test.yourdomainname.com」にアクセスして、ウェブサイトが表示されるかどうかを確認します。

index.htmlに記載した文字列（今回は、「Hello AWS. Hello Flask with WSGI.」という文字列）が表示されていれば成功です。

今後の展望

Amazon GameLiftとか使ってみる。AutoScailingとか使ってみる。無限請求には気を付ける。

参考

https://www.youtube.com/watch?v=AGmkG0wJ8LA