こんにちは！
TWクライアントチームで、フロントエンドエンジニアをやっていますTKと申します。普段はReact + TypeScriptな環境で、webアプリの開発を行っています。

この記事は、前回の記事の続きになります。

前回は、EC2インスタンスを作成しsshで接続するまで行いました。今回は、前回作ったEC2インスタンスにnginxをインストールしWeb Serverとして機能するようにします。

筆者は、AWS初心者かつインフラ初心者ですので、暖かく見守っていただけると幸いです。アドバイスやコメント等もお待ちしております！

#手順

nginxインストール・起動
index.htmlを配置する

#1. nginxインストール・起動
nginxをインストールします。
Amazon Linux 2にnginxをインストールする際には、amazon-linux-extrasからインストールするようです。
下記コマンドをEC2インスタンスの中に入って実行します。(EC2インスタンスへ入るには、AWSコンソールから対象インスタンスを選択し「接続」ボタンを押して入ることもできますし、前回記述したsshで接続して操作することもできます。)

$ amazon-linux-extras

すると、nginx1というパッケージがあることが確認できます。
では、nginx1をインストールしてみます。

$ sudo amazon-linux-extras install -y nginx1

正常にインストールがされているか確認します。

$ nginx -v

バージョンが返ってくれば、OKです！
nginxを起動します。

$ sudo systemctl start nginx

起動しているか確認します。

$ systemctl status nginx

active(running)と表記があれば起動しています。
EC2インスタンスが起動したら、自動でnginxを起動するようにしておきます。

$ sudo systemctl enable nginx

nginxはデフォルトでは、80番ポートでlistenしているので80番を開きます。
AWSコンソールのEC2ページから、インスタンスにアタッチしたセキュリティグループを選択します。

サイドバーにある【セキュリティグループ】を選択し、アタッチしたセキュリティグループにチェックを付ける
下部に詳細が表示されるため、【インバウンドルール】タブを選択し、【インバウンドルールを編集】をクリックする
【ルールを追加】をクリック後、タイプに HTTP / ソースに 0.0.0.0/0 を入力する => 今回ソースは全公開にしております。IP制限するなら、0.0.0.0/0ではないIPを入力してください。

ここまで設定したらブラウザで、「EC2インスタンスのパブリックIP」にアクセスしたら、nginxのデフォルトページが表示されるはずです。

#2. index.htmlを配置する
次にindex.htmlを配置し、ページを公開していきます。
nginxのドキュメントルートを調べます。

$ grep "root" -r /etc/nginx/ | grep "html"

root /usr/share/nginx/html;と出ましたので、/usr/share/nginx/html以下にindex.htmlを配置すれば、公開できることがわかりました。
用意したindex.htmlをサーバにsshで送ります。

scp [コピーするファイル名] [接続先のユーザ名@接続先のホスト名:ディレクトリ]

複数ある場合、空白の後に続けて記載します。
ディレクトリがある場合 -r を付けます。
ディレクトリの中身を全てコピーするなら、＊が便利です。

scp -r ./* [接続先のユーザ名@接続先のホスト名:ディレクトリ]

scpを実行したときに、Permission deniedが発生しました。
コピー先の権限の問題だと思います。
下記コマンドを実行して、パーミッションを変更すると消えました。

chmod 777 /usr/share/nginx/html

上記が完了したらブラウザで、「EC2インスタンスのパブリックIP」にアクセスしたら、index.htmlの内容が表示されているはずです。　

###おまけ１（リバースプロキシ編）
nginxをリバースプロキシとして動作させる場合、nginx.confファイルをいじります。
Amazon Linux2では、/etc/nginx/の下にnginxの設定ファイル等配置されます。
いじる前に、念の為バックアップをとります。

$ cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bakup

自分はvimが使えないので、nanoを使用して設定を変えていきます。（すみません。nanoは分かりやすくてありがたい！）

$ nano /etc/nginx/nginx.conf

nginx.confファイルのserverの下にlocationがあります。
そこを

location / {
    proxy_pass [リダイレクト先];
}

このように変更すると、80番ポートに送られてきたリクエストを転送できます。

自分は、Express(node.js)で作成したApiを配置してみました。
4000番ポートでlistenしていたので

location / {
    proxy_pass http://127.0.0.1:4000;
}

に設定しました。
ブラウザから確認したところ、動作が確認できました。

###おまけ2 (dockerを入れる)
Web Serverとは直接関係ありませんが、EC2にdockerを入れる必要がありましたので、ついでに記載しておこうと思います。

dockerもamazon-linux-extrasコマンドから、インストールできるようです。
念の為、dockerがあるか確認する。

$ amazon-linux-extras

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

$ sudo amazon-linux-extras install docker

sudoをつけずにdockerを実行するために、ec2-userをdokcerグループに追加します。
これで、sudoをつけずにdockerが実行できます。

$ sudo usermod -a -G docker ec2-user

dockerが使えるか確認します。

$ docker info

上記を実行し、情報が帰ってきたら成功です！
あとは、Dockerfileなりdocker-compose.ymlなりを用意して、dockerを使用してください。

#まとめ
今回は、短いですがここまでにします。前回用意したEC2インスタンスにnginxをインストールし、Web Serverを構築しました。nginxの設定は、他にもたくさんあります。実運用する際は、詳細に設定を入れるべきだと思います。インフラ初心者ですので、これから調べつつ設定を増やしていきたいです！

ここまで読んでくださった方、ありがとうございます！
次回は、DB Serverを構築していきたいと思います。
冒頭に申しました通り、AWS初心者かつインフラ初心者ですのでアドバイスをお待ちしております！

【参考文献】
https://qiita.com/sakkuntyo/items/807f25f9eb13525eebef
https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-20-04-ja
https://qiita.com/shisama/items/5f4c4fa768642aad9e06
https://hacknote.jp/archives/49429/
https://qiita.com/pugiemonn/items/3c80522f477bbbfa1302
https://hacknote.jp/archives/49429/
http://mogile.web.fc2.com/nginx/admin-guide/reverse-proxy.html
https://docs.aws.amazon.com/AmazonECS/latest/developerguide/docker-basics.html