注意
練習のためにウェブサイトを構築する場合、使い終わったら、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
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == "__main__":
app.run()
import sys
sys.path.insert(0, '/var/www/AWSTest')
from app import app as application
<!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