DjangoアプリをEC2+ALB+ACM+Route53でHTTPS公開した手順まとめ

インフラの勉強がてら、DjangoアプリをAWS上で公開するまでを一通りやってみたので、一旦整理しました。
今回作ったアプリ自体の機能は、「Gmailのメルカリ取引完了メールを読み取り、売上や販売数を可視化→Excelでダウンロードできる」ものです。
※ 個人的によくメルカリで不用品売っており売上管理したくて作りました。
メルカリをgmailで使ってる人なら誰でも使えると思うので使えるか試してみてください。
※ 個人で動作確認しただけなので、他の人のアクセスでバグとかあるかも。

URL
（1/18 動かしておくとお金かかるので一旦ページ閉じました）

メール読み込み終わるとこんな画面

Gmail取得にGoogle OAuth2.0使ってますが、審査は通してないので警告画面みたいなのが出ますが、詳細みたいなの押せば進めます。
よくわからなければアプリパスワード使うやり方も実装しているので、そっちでも。

AWS使ったやつ

EC2：アプリ（Django + nginx + gunicorn）実行用仮想サーバ
ALB：HTTPS 終端（ACM 証明書を利用）
Route53：ドメイン/DNS
ACM：SSL 証明書(https通信のために必要)

流れ

User ── HTTPS ── ALB ── HTTP ── nginx ── gunicorn ── Django

手順ざっくりと（やった順）

アプリ作成
EC2インスタンス作成
EC2にアプリをデプロイ
Route53でドメイン取得
ACM証明書発行
ALB作成
Route53でレコード作成
Django諸々設定

1. アプリ作成

今回はpythonベースで作れるDjango使用。(Flaskの方が絶対楽)
Djangoアプリ自体の細かい仕様は本記事では省略。（時間あれば別途アプリの中身まとめる。）
（DjangoをAWSで動かす流れについては以下の記事参考にしている。）

【丁寧解説】秒速でもDjango 3アプリをAWS EC2で公開
https://qiita.com/Bashi50/items/d5bc47eeb9668304aaa2

作成後は上記記事同様、githubで管理。

2. EC2 インスタンス作成

名前は適当でOK。
OSは今回はUbuntuを使用。
インスタンスタイプはt2.nano。
セキュリティグループはSSH,TCP, ポート22, ソースを自分のネットワークのIPに設定。
設定終わったらEC2起動。（以降EC2削除するまでお金かかる）
EC2のパブリックIPはEC2を停止・開始する度に変わるので、変えたくなければElasticIPで固定。（今回はしない）

3. EC2 にアプリをデプロイ

エディターでVScode使っているので、VScodeの拡張機能リモートエクスプローラーから接続する。
SSH構成のconfigファイル以下の感じで作成。

Host my-ubuntu-ec2
  HostName {EC2のパブリックIP}
  User ubuntu
  IdentityFile {作成したキーペア(.pemファイル)のパス}

configファイル作成して、リモートエクスプローラーに表示された後、接続するとVScodeでEC2内操作可能になる。

VScode内のターミナルで諸々操作していく。

必要パッケージインストール

sudo apt update
sudo apt install -y python3 python3-venv python3-pip git nginx

アプリ取得(githubから)

git clone <repo>
cd <project>

仮想環境・依存(venvで)

python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

gunicorn 起動（テスト用）：

gunicorn gmail.wsgi:application --bind 127.0.0.1:8000 --timeout 300

nginx 設定

/etc/nginx/sites-available/〇〇 例
staticが/home/ubuntu/配下だとnginxが読めないことがあるらしいので、/var/www/に事前に移動しといて、設定も変えとく。

server {
    listen 80;
    server_name {取得ドメイン}.com;

    location /static/ {
        alias /var/www/gmail/static/;
    }

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
    }
}

反映：

sudo nginx -t
sudo systemctl reload nginx

4. Route53 でドメイン取得

Route53 でドメイン取得（基本的なホストゾーンは自動作成）
.com で年$15
画面の説明に沿って操作していくと簡単に取得できる。

5. ACM 証明書発行

httpsでの暗号化通信のために必要。

ドメイン名は先程取得したドメインを登録。
DNS 検証を選択。ほかもデフォルト設定のままで。
「Route53 にレコード作成」でタイプCNAMEのレコードを追加

6. ALB 作成

Application Load Balancer
HTTPS 443 リスナーに ACM 証明書を指定
HTTP 80 は HTTPS にリダイレクト
ターゲットグループは EC2 の 80 番

注意

ALB の AZ(Availability Zone) と EC2 の AZ が一致している必要あり

7. Route53 Aレコード作成

ドメイン取得した時点でタイプNS,SOAのレコードは自動でできている。（はず）
CNAMEのレコードはACMの証明書発行時に作成済。
ここでは追加でタイプAのレコードを作成。

Aレコード作成

レコード名：空欄（ルート）
レコードタイプ：A
エイリアス：オン
ルーティング先：さっき作ったALB（先に「Application Load Balancer と Classic Load Balancer へのエイリアス」をプルダウンで選択）

８. Django諸々設定

.envのALLOWED_HOSTSを取得したドメイン入れたり、settings.pyの諸々を本番用に変えたり。

.env(一部例)

ALLOWED_HOSTS={取得ドメイン}.com,localhost,127.0.0.1

settings.py(一部例)

SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
CSRF_TRUSTED_ORIGINS = ["https://{取得ドメイン}.com"]

あとはEC2内でアプリ起動

最後に

インフラさっぱりなのと、お金かかるしってのでなかなかできてなかったですが、まとめ記事みたりchatGPT使えば割と簡単にアプリを公開できて楽しかったです。
アプリ自体はUI作るにあたりcss、html勉強して頑張ってつくったもののしょぼすぎて、これもchatGPT使ったらそれっぽいUIになって改めてchatGPTの凄さがわかりました。
ただインフラの勉強で始めたつもりがアプリ作る方が圧倒的に時間かかりました( ߹ㅁ߹)
今後また何か作ったら、今回の見直して公開していければと思います。