🏀

AWS EC2 Nginxを使ってWebサイトホスティング

2022/03/12に公開

AWS

はじめに

こんにちは　中村ですー
このたびAWSハンズオンを開催する機会を頂いたので、そちらで実施する手順をまとめました。
EC2 Nginxを使ってwebサイトホスティングをします！

AWSハンズオン

2022年4月17日　無事に開催することが出来ました！

前提条件

AWSアカウント作成ずみである事

手順

EC2作成

リージョンを「東京」に設定する

AWSコンソール画面の検索窓に「ec2」と入力し、EC2を選択する

左メニューの「インスタンス」をクリック、「インスタンスの起動」を実施する

無料利用枠の「Amazon Linux 2」を選択する

インスタンスタイプに無料利用枠の「t2.micro」を選択し、「次のステップ」へ進む

インスタンス数が「1」になっていることを確認する
ネットワークに「default-vpc」を指定する。
サブネットに「パブリクサブネット」のサブネットIDを指定する
自動割り当てパブリックIPが「サブネット設定を使用(有効)」をになっていることを確認する
その他の項目はいじらない
「次のステップ」へ進む

ボリュームタイプに「汎用SSD」を指定し、次のステップへ

今回はNameタグを付けてみます(ぶっちゃけ無くても問題なしです)

「別のタグを追加」をクリックする
キーに「Name」、値に好きな文字を入力する
「次のステップ」へ

次の「セキュリティグループ」とは、ファイアウォールの役割をするものです。
この画面ではsshに0.0.0.0/0が指定されています。このままでもいいんですが、これだと誰でもアクセス出来てしまうので、今回は自分のグローバルIPを指定して、よりセキュアにします。グローバルIPの確認は「gip 確認」でググるか、もしくはこちらで確認できます
また、HTTP接続を追加して、ページをインターネットから見れるようにします

SSHにグローバルIPアドレスを入力する
「ルールの追加」をクリックする
2つ目のルールにタイプHTTPを指定する
2つ目のルールに0.0.0.0/0, ::/0を指定する
「確認と作成」をクリックする
設定内容をテキトーに確認する(まぁ大丈夫でしょう！w)
「起動」をクリックする

こんな画面が出てきます。キーペアとはEC2にCLIからログインする際に必要となります。
「新しいキーペアの作成」を選択
キーペアのタイプに「RSA」を選択
任意のキーペア名を入力
「キーペアのダウンロード」を実行(これを忘れるとEC2に入れなくなります...)
「インスタンスの作成」をクリック

こんな画面に遷移します。インスタンスID(i-から始まるやつ)もしくは「インスタンスの表示」をクリックしてインスタンスを見てみましょう

EC2インスタンス画面にて、「インスタンスの状態」が「実行中」、「ステータスチェック」が「合格」になるまで待ちます。🍵

EC2インスタンスに接続

さて、作成したEC2インスタンスに接続してみましょう

作成したインスタンスにチェックをつける
「接続」をクリックする
「SSH クライアント」タブをクリック
基本的にはここで言われた通りやればOKです！

ターミナルを開いて、さっきダウンロードしたキーペアがあるディレクトリへ移動します。
(キーペアは然るべき場所へ移動しても良いですが、筆者はめんどくさいんでダウンロード直下でやりますw)

$ cd Downloads/

chmodで、ファイルの中身が上書きされないようにします。

$ chmod 400 [キーペア名].pem

EC2へ接続

$ ssh -i "[キーペア名].pem" ec2-user@[ec2ドメイン]

ほんまに接続するんか？　的な事を聞かれるので「yes」と入力する

Are you sure you want to continue connecting (yes/no/[fingerprint])? yes

以下のような画面になれば、接続成功です。

Warning: Permanently added 'ec2-xx-xx-xx-xx.ap-northeast-1.compute.amazonaws.com,xx.xx.xx.xx' (ECDSA) to the list of known hosts.

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
8 package(s) needed for security, out of 14 available
Run "sudo yum update" to apply all updates.
[ec2-user@ip-xx-xx-xx-xx ~]$

EC2にNginxをインストール

インスタンスに接続できたらNginxをインストールします

amazon-linux-extrasがインストール済みかどうか確認する

$ which amazon-linux-extras
/usr/bin/amazon-linux-extras

amazon-linux-extrasを使ってインストールできるnginxのパッケージを確認する

$ amazon-linux-extras
 ~ 省略 ~
38  nginx1                   available    [ =stable ]
 ~ 省略 ~

nginxをインストールする

$ sudo amazon-linux-extras install nginx1

容量がこんくらいかかるけど、ええんか？　って聞かれるのでyesの「y」を入力

総ダウンロード容量: 2.3 M
インストール容量: 6.6 M
Is this ok [y/d/N]: y

nginxがインストール出来たかどうか確認

$ nginx -v
nginx version: nginx/1.20.0

nginxを起動する

$ sudo systemctl start nginx

nginxが起動しているか確認する。 active (running) となっていたらOK

$ systemctl status nginx
● nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since 土 2022-03-05 07:29:42 UTC; 13s ago
  Process: 3480 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 3476 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 3475 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
 Main PID: 3482 (nginx)
   CGroup: /system.slice/nginx.service
           ├─3482 nginx: master process /usr/sbin/nginx
           └─3483 nginx: worker process

ちなみにこの時点でインスタンスのドメインをブラウザで叩くとNginxのデフォルト画面が表示されます。

htmlファイルを配置

nginx.confを参照し、server → rootの所に記載されているディレクトリを確認する

$ cat /etc/nginx/nginx.conf
# Settings for a TLS enabled server.
#
#    server {
  ~ 省略 ~
#        root         /usr/share/nginx/html;
#
  ~ 省略 ~

確認したディレクトリへ移動する

cd /usr/share/nginx/html

index.htmlを開き、中身を全て削除する
(方法はお任せしますが、一応、*%dで全行削除できます)

$ sudo vi index.html
:%d

お好きなhtmlをここにペーストして下さい
本記事ではこんな感じで行きます

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- ここに何か書く -->
  <h1>EC2 Nginx テスト 2022 03 06</h1>
</body>
</html>