本番デプロイ向け：Amazon Lightsailを使用して、WordPressとDockerでFlaskアプリを同時にデプロイする方法

## はじめに
本記事では、通っているITスクールのハッカソンでインフラ担当として参加した際に感じたことをまとめています。

:::note
**今回は、AWSの基本的な構成が分からなくても、誰でも確実にデプロイできることを目標にしています。**
:::

この記事では、Amazon Lightsailを使用し、例としてWordPressとDockerを使ったFlaskアプリを同時にデプロイする方法をご紹介します（***80番ポートと5000番ポートを使用します***）。

## 書こうと思ったきっかけ

ITスクールのハッカソンに初めて参加した際、私はインフラ担当としてアサインしました。

AWSについては個人的に学習していたため、特に苦労することなく本番環境にデプロイすることができました。

:::note warn
***一方で、初めて参加する方々にとっては、デプロイ作業のハードルが高く感じられるのではないかと思いました...***
:::

**そこで、AWSのサービス知識がなくてもデプロイできる最終手段として、Amazon Lightsailを使った手順を紹介しようと考えました...！**

## そもそも本番デプロイとは？

「**AWSへの本番デプロイ**」とは、開発が完了したソフトウェアやアプリケーションを、AWSの本番環境に配置し、実際にユーザーが利用できるようにするプロセスを指します。

本番環境とは、ユーザーがアクセスしてサービスを利用するための実際の運用環境のことです。

:::note 
***特に、フロントエンドやバックエンド担当者が2ヶ月間必死に作成したアプリを、デプロイできなかったときの空気感は、耐え難いですよね...***
:::

## Amazon Lightsailの特徴

Amazon Lightsailの特徴については、過去の記事で簡単にまとめているので、興味のある方はぜひ参考にしてください。

https://qiita.com/free-honda/items/c152388a4f4225d729cc

Lightsailは、複雑なAWSの設定を簡略化し、数回のクリックで仮想サーバー（インスタンス）を構築でき、ワンクリックでデプロイ可能なのが最大の魅力です。

:::note warn
***また、最初の90日間は無料で試用でき、低コストで利用できる点も大きな利点です。個人的には非常にありがたく感じています（笑）***
:::

さらに詳しく知りたい方は、以下の公式サイトも参考にしてください。

https://aws.amazon.com/jp/lightsail/?gclid=CjwKCAiA6aW6BhBqEiwA6KzDcwgeD9LUIzCPNOZDWk9EgF_tlEqmjybeGNVF4CTO3HLhcPGd_S_94RoCqY8QAvD_BwE&trk=77e9e522-35d9-4b76-b445-ccef339a595d&sc_channel=ps&ef_id=CjwKCAiA6aW6BhBqEiwA6KzDcwgeD9LUIzCPNOZDWk9EgF_tlEqmjybeGNVF4CTO3HLhcPGd_S_94RoCqY8QAvD_BwE:G:s&s_kwcid=AL!4422!3!591672862937!e!!g!!amazon%20lightsail%20vps!16402422401!142328431348

## Amazon Lightsailのセットアップ（サーバー構築）

AWS Management Console にログインし、Lightsailを検索し、Lightsailのサービスページに移動します。

![スクリーンショット 2024-11-30 0.43.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/7d1d9504-0c1c-6aba-ee1c-54032dd41562.png)

「Create Instance」ボタンをクリックし、以下の設定を選択します。

![スクリーンショット 2024-11-30 0.44.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/09ed3805-8956-edac-583c-2616546fe52c.png)

Pick your instance imageでは、「Linux/Unix」を選択し、WordPressを選びます。

![スクリーンショット 2024-11-30 0.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/3eefc820-f071-4124-012a-88a9078c8c6b.png)

Select a sizeの箇所は、初期設定のまま進み、$5プランを選択します（最初の90日間は無料で試用可能です）。

![スクリーンショット 2024-11-30 0.54.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/e0ab06be-2de1-4278-b342-cff14f3e2c67.png)

Identify your instanceの部分は、任意の名前を入力し、「Create instance」をクリックします。

![スクリーンショット 2024-11-30 7.53.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/2ec06984-93c6-e18e-b8c2-12ce0df5c101.png)

数分後、「Running」と表示されれば正常にサーバーが起動しています。

![スクリーンショット 2024-11-30 8.07.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/982ead5d-eb86-7900-93bd-f7988cf03007.png)

## デプロイ：WordPressの稼働確認

WordPressはセットアップ時に自動で構成される仕組みのため、サーバーを構築した時点で特に追加の設定は必要ありません。

次に、作成したインスタンスのPublic IPv4アドレスを使ってブラウザでアクセスしてみます。

```Public IPv4 address.
54.199.234.229
```

IT学習を始めたばかりの頃、自分でサーバーをレンタルしてWordPressを導入するのに3日くらいかかりましたが、***今では3分で導入できるようになりました（笑）。***

![スクリーンショット 2024-12-11 10.23.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/780a5102-2da0-1dae-9818-239e8d6af51f.png)

WordPressやJoomlaなどのCMSが迅速にデプロイできることに、シンプルながら感動しています！

## デプロイ：Dockerを使ったFlaskアプリの稼働確認

次に、ITスクールのハッカソンで、FlaskとDockerを活用して都道府県ベースのマッチングチャットアプリを作成しました。

***詳細は省略しますが、興味のある方は以下のパブリックリポジトリでコードを確認してみてください！***

https://github.com/RareTECH-Iteam/Iteam_0819

:::note warn
***今回は、このチャットアプリをAmazon Lightsailに構築したサーバーに本番デプロイしていきます。***
:::

Lightsailの管理画面に戻り、作成したインスタンスの「Connect using SSH」ボタンをクリックします。

![スクリーンショット 2024-12-11 10.21.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/6e1578a5-8f8e-40e9-ca77-88c473e076e9.png)

ブラウザ上で直接インスタンスに接続でき、コマンドの入力や実行ができることを確認しました。

![スクリーンショット 2024-12-11 10.22.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/776686dc-65f2-69e7-26cb-568d6a10b9e0.png)

```Git```や```Docker```の環境構築が必要ですが、ここでは任意のディレクトリに以下シェルスクリプトを```vi```コマンドで作成し、一括でセットアップしています。

```set.sh
#!/bin/bash

set -e

# Install necessary packages
sudo apt update -y
sudo apt install -y git docker.io

# Verify Git version
git --version

# Start and enable Docker service
sudo systemctl start docker
sudo systemctl enable docker

# Add current user to the docker group
sudo usermod -aG docker $USER

# Install Docker Compose (version v2.4.1)
sudo curl -SL https://github.com/docker/compose/releases/download/v2.4.1/docker-compose-linux-x86_64 -o /usr/local/bin/d
ocker-compose
sudo chmod +x /usr/local/bin/docker-compose

# Verify Docker Compose version
docker-compose version

# Clone the repository
git clone https://github.com/RareTECH-Iteam/Iteam_0819.git

# Notify user to log out and log back in, then run the necessary commands
echo "cd Iteam_0819"
echo "sudo docker-compose up"
```

上記の内容は、```set.sh``` というファイル名で保存してください。

### 補足：なぜかコメントアウトされてしまう

実際に、上記のシェルスクリプトの内容をそのままコピーしてターミナルに貼り付けると、以下のように全行がコメントアウトされてしまいました。

![スクリーンショット 2024-12-11 10.23.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/2fd9782f-e49a-f1b7-2ff4-be282ac32286.png)

おそらく、文字コードの違いやエディタ、ターミナルでのコピー＆ペースト時に誤動作が発生したものと思われます。

***この問題を一時回避するために、以下のコマンドを使ってファイル内の不要な ```#``` を一括削除しました。***

```bash
sed -i 's/^#//' set.sh
```

その後、以下のコマンドで実行権限を付与して実行してください。

```bash
chmod +x set.sh
./set.sh
```

このシェルスクリプトを実行すると、以下のようなメッセージが表示されます。

:::note alert
- echo "cd Iteam_0819"
- echo "sudo docker-compose up"
:::

ここでは、```git clone``` でリポジトリを取得した後、手動で ```docker-compose up``` を実行するようにしています。

***このシェルスクリプトを使用する際は、```git clone``` の部分を自分のリポジトリに合わせて修正してください。***

### IPv4 Firewallで5000番ポートの解放
実は、このままブラウザで ```http://54.199.234.229:5000/``` にアクセスしても応答はありません。これは、5000番ポートが解放されていないためです。

セキュリティグループに近い「**IPv4 Firewall**」の設定が必要です。

![スクリーンショット 2024-12-11 10.27.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/5f17c57f-439b-7bbb-092c-bfc112adab10.png)

今回作成したFlaskアプリケーションは5000番ポートで動作しているため、ネットワーキングのタブからカスタムTCPルールで5000番ポートを開放します。

![スクリーンショット 2024-12-11 10.29.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/2f475234-83d7-7662-2728-48c74d188e0e.png)

## ブラウザからアクセスしてみた

再度、次のURL ```http://54.199.234.229:5000/``` にブラウザでアクセスすると、無事に作成したアプリケーションが動作していることが確認できました！

![スクリーンショット 2024-12-11 10.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/a5316de5-c458-1be3-b9d2-73bd943bac54.png)

今回は、```Docker```や```Git```周りの環境構築をシェルスクリプトで大幅に簡略化したおかげで、最短の工数で本番デプロイができました。

:::note
***同じスクールに通っている方は、今回作成したシェルスクリプト（一部修正が必要）と本手順を参考にすれば、最低限の本番デプロイはできるかと思います...！***
:::

## まとめ
今回は、本番デプロイを簡単にすることを目的として記事を書きましたが、**実際にはシェルスクリプトの作成にかなり時間がかかってしまいました（笑）。**

:::note warn
***AWSの基本的な構成が分からなくても、誰でも確実にデプロイできるようにと、頑張ってまとめました...！！***
:::

この記事を通じて、AWS初心者の方でもデプロイを身近に感じていただければ幸いです！

## 参考記事

https://qiita.com/nasuvitz/items/c9a9de3fd8243693f01c

https://www.onamae.com/column/wordpress/8/

https://qiita.com/katekichi/items/8a2259524a51952ac08f

https://qiita.com/free-honda/items/c152388a4f4225d729cc