はじめに

AWSのEC2（Amazon Linux）にDockerコンテナをデプロイし、Nginxのリバースプロキシを経由して外部公開したので手順をまとめました。

今回公開したのは以前作成した以下のアプリです。

前提条件

ローカルで動かせるWebアプリ（Docker）がある
EC2インスタンスがある

1. EC2インスタンスへの接続

事前にAWSコンソールでAmazon Linuxのインスタンスを起動し、キーペア（.pem）を手元にダウンロードしておきます。
ターミナルを開き、以下のコマンドでサーバーにSSH接続します。

キーペアの権限変更

chmod 400 your-key.pem

Amazon Linuxへの接続

ssh -i "your-key.pem" ec2-user@【EC2のパブリックIPアドレス】

your-key.pemには自分がダウンロードしたキーペアのファイル名を入れてください。
EC2のパブリックIPアドレスはAWSコンソールのインスタンスのインスタンスIDをクリックすると表示される画面から取得できます。

2. 環境構築（DockerとGitのインストール）

サーバー内で必要なパッケージをインストールし、Dockerを起動します。

パッケージの更新

sudo dnf update -y

Dockerのインストールと起動

sudo dnf install -y docker
sudo systemctl start docker

ec2-userがsudoなしでdockerコマンドを使えるように権限を付与

sudo usermod -aG docker ec2-user

Gitをインストール

sudo dnf install -y git

3. Docker Composeのインストール

複数のコンテナを一括起動するために、Docker Composeをインストールします。公式ドキュメントの手順に従ってダウンロードしていきます。
公式ドキュメント：Docker Compose のインストール（Linux）

Docker Composeのインストール

DOCKER_CONFIG=${DOCKER_CONFIG:-$HOME/.docker}
mkdir -p $DOCKER_CONFIG/cli-plugins
curl -SL https://github.com/docker/compose/releases/download/v2.4.1/docker-compose-linux-x86_64 -o $DOCKER_CONFIG/cli-plugins/docker-compose

実行権限を与える

chmod +x $DOCKER_CONFIG/cli-plugins/docker-compose

4. コンテナの起動

GitHubからアプリのソースコードを取得し、コンテナを立ち上げます。

リポジトリのクローン

git clone https://github.com/リポジトリのユーザー名/リポジトリ名.git
cd リポジトリ名

Docker権限を反映させる

exit
ssh -i "your-key.pem" ec2-user@【EC2のパブリックIPアドレス】
cd リポジトリ名

コンテナを起動

docker compose up -d

5. Nginxの設定

Nginxのインストールと起動

sudo dnf install -y nginx
sudo systemctl start nginx

Nginxの設定ファイルを編集

sudo nano /etc/nginx/nginx.conf

開いたファイル内のserverの部分を、コンテナのポート番号に合わせて書き換えます。

/etc/nginx/nginx.conf（server部分のみ抜粋）

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;

        include /etc/nginx/default.d/*.conf;

        location /records {
            proxy_pass http://localhost:3000/records;
            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;
        }

        location / {
            proxy_pass http://localhost:5173;
            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_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
       	}

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

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

再起動して反映

sudo systemctl restart nginx

6. AWSセキュリティグループの設定

外部からブラウザでアクセスできるように、セキュリティグループにルールを追加します。
AWSコンソールのインスタンスのセキュリティのタブから以下のルールを追加してください。

タイプ: HTTP
ポート範囲: 80
ソース: Anywhere-IPv4

7. フロントエンドの通信先の修正

ローカル開発時は fetch('http://localhost:3000/records') のようにバックエンドのURLを直接指定していても動きますが、本番環境でそのままにするとブラウザ側でエラーになります。
なので、fetchするURLを変更してください。

修正前

fetch('http://localhost:3000/records')

修正後（Nginxの設定に合わせた相対パスにする）

fetch('/records')

おわりに

nginxの設定やセキュリティグループ、URLなど思っていたよりも設定することが多かったです。