今回の作業
- 本記事での完成イメージ
- GitHubからWebAPI取得
- ランタイム環境を構築
- localhostで起動
- Nginxインストール
- リバースプロキシ設定
- Security GroupでHTTP公開
1. 本記事での完成イメージ
2. GitHubからWebAPI取得
前回同様LRoginでインスタンスにSSH接続する
その後gitをインストールし、過去に作成したWebAPIをクローンする
(参考：https://github.com/takuto25-lab/SampleWebApp.git)
>sudo yum install git -y
>git clone https://github.com/takuto25-lab/SampleWebApp.git
これでインスタンス上にSampleWebAppフォルダができた
3. ランタイム環境を構築
Node.js用の環境を用意する
必要なコマンド
>curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
>sudo yum install -y nodejs
実行後
次にプロジェクトフォルダで必要なライブラリをインストールする
必要なコマンド
>npm install
4. localhostで起動
ひとまずlocalhostで動くか確認する
#Expressアプリを実行→ポート3001で起動する
>node app.js
http://localhost:3001/memos
別ウインドウを開いてHTTPリクエストを送信してみる
通信は成功（Welcome to Azureになっているので後で修正する）
5. Nginxインストール
本格的にEC2サーバーをWebサーバーとして扱うため、Nginxをインストールする
Q. Nginxとは？
主に以下の機能を提供してくれるオープンソースソフトウェア
- Webサーバー
HTTPリクエストを受け付けWebページを返す- リバースプロキシ
インターネットからのリクエストをバックエンドサーバーに転送する- ロードバランサー
負荷分散を実施
必要なコマンド
#インストール
sudo yum install nginx -y
#起動する
sudo systemctl start nginx
#サーバー起動時に自動で起動する設定
sudo systemctl enable nginx
6. リバースプロキシ設定
Q. リバースプロキシ設定をするとどうなる？
アクセスの流れが変わる
設定なし：ブラウザ→WebAPI
設定あり：ブラウザ→Nginx→WebAPI
nginx.confに以下の設定を追加する
# 当てはまるパスを指定（ここでは"/",つまり全
URLが対象）
location / {
# リクエストを転送する先を指定(ここではlocalhost:3001)
proxy_pass http://localhost:3001;
#ヘッダーに元々のリクエストのHostとIPアドレスを追加
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
記入後
Q. proxy_passでhttpsを指定するとどうなるのか？
通信に失敗する
今回ExpressアプリではHTTP通信をするよう実装しているため
設定が完了し、Nginxを再起動すると「curl localhost」でも3001ポート指定時と同じ結果が返ってくる
7. Security GroupでHTTP公開
ブラウザからアクセスができるように設定する
現時点ではアクセスが失敗する
(54.199.223.251は今回起動時のPublicIP)
その後Security GroupにHTTP通信用のルールを追加する
その後アクセスすると今度は成功した
