AWS（Amazon Linux 2）にWebサーバ（nginx）を立ててWebサイトをデプロイする

HTML、CSS、JavaScriptで作成したWebサイトをWebサーバ（nginx）にデプロイする手順を残します。

作業環境

macOS BigSur 11.1

参考

• 【AWS】EC2にNginxをインストールして Hello, World! を表示させる | ハッシュテック
• 【scp】Linuxでリモート・ローカル間でファイルを転送するコマンド | UX MILK

手順

• AWSでWebサーバ用のインスタンス（Amazon Linux 2）の立ち上げ&各種設定
• nginxをインストール
• webアプリのコードをwebサイトに配置（scp転送を利用）
• nginxの設定変更

AWSでWebサーバ用のインスタンスの立ち上げ&各種設定

今回はWebサーバとしてAWSのインスタンスを使う。
インスタンスの立ち上げ手順は割愛します。

デプロイ後にブラウザで確認するためにHTTPのインバウンド設定をしておく。

nginxをインストール

Amazon Linux 2 では Extras Library を使う（yumでnginxをインストールできない）
※Amazon Linux ではyumでインストールできるらしい

Extras Library でインストールできるアプリケーションを確認してみる

# ライブラリの確認
$ amazon-linux-extras

一覧で表示される。nginxは available（利用可能） になっている。

 33  java-openjdk11           available    [ =11  =stable ]
 34  lynis                    available    [ =stable ]
 35  kernel-ng                available    [ =stable ]
 36  BCC                      available    [ =0.x  =stable ]
 37  mono                     available    [ =5.x  =stable ]
 38  nginx1                   available    [ =stable ]
 39  ruby2.6                  available    [ =2.6  =stable ]
 40  mock                     available    [ =stable ]
 41  postgresql11             available    [ =11  =stable ]

nginxをインストールする

$ sudo amazon-linux-extras install nginx1

ライブラリを確認すると、nginxが enabled（有効）になっている。

 35  kernel-ng                available    [ =stable ]
 36  BCC                      available    [ =0.x  =stable ]
 37  mono                     available    [ =5.x  =stable ]
 38  nginx1=latest            enabled      [ =stable ]
 39  ruby2.6                  available    [ =2.6  =stable ]
 40  mock                     available    [ =stable ]

nginxを起動する

# nginxの起動
$ sudo systemctl start nginx

# nginxのステータスの確認（起動したことの確認）
$ sudo systemctl status nginx

webアプリのコードをwebサイトに配置（scp転送を利用）

nginxのデフォルトでは、サーバにアクセスした際に　/usr/share/nginx/html に入っている index.htmlを表示する設定になっている。

/usr/share/nginx/ 配下にフォルダごとWebサイトの資材を置いて、nginxの参照先を変えることで自分のサイトを表示するようにできる。

まずは格納するフォルダをサーバ側に作る。今回は /usr/share/nginx の配下に mywebsite というフォルダを作成。

# フォルダを作成
$ sudo mkdir /usr/share/nginx/mywebsite

次にフォルダの権限設定を誰でも書き込みできるように変更。（サーバ側はec2-userでないと書き込めないので、そのままだと権限エラーになった）

# フォルダのアクセス権限を変更
$ sudo chmod 777 mywebsite

まずはWebサイトの資材をscpで転送する。

# scpを使ったAWSへのファイル転送（-r オプションを付けてフォルダごと転送）
$ scp -r -i [秘密鍵ファイル] [送信元のパス（PCローカル）] ec2-user@[インスタンスのグローバルIP]:/usr/share/nginx/mywebsite

なお、Git（GitHubやGitLab等）でソースを管理している場合はgitからcloneする方が楽です。
先に述べた通り、scpを使った転送では送信先のフォルダのアクセス権限が原因で何度か失敗しました。

nginxの設定変更

nginxのconfigファイルを編集して、nginxが自分のWebサイトの資材を参照するようにする。
編集にはVimを使う。

# Vimでconfigファイルを開く
$ sudo vi etc/nginx/nginx.conf

下記のroot部分が参照先のパスの設定。デフォルトを残しておきたかったので、デフォルトはコメントアウトにして設定を追加した。

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/mywebsite/omikuji;
        #root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

設定を保存したら nginx　を再起動する

# nginx の再起動
$ sudo systemctl restart nginx

ブラウザでWebサーバー（インスタンスのグローバルIP）にアクセスして確認する。

 
以上です。