🏀

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

2022/03/12に公開

はじめに

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

AWSハンズオン

2022年4月17日 無事に開催することが出来ました!
https://harbors-kihonjoho.connpass.com/event/240860/

前提条件

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

手順

EC2作成

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

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

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

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

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

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

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

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

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

次の「セキュリティグループ」とは、ファイアウォールの役割をするものです。
この画面ではssh0.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を参照し、serverrootの所に記載されているディレクトリを確認する
$ 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>

動作確認

  • ec2の画面からパブリックIPv4 DNSをコピーする
  • コピーしたドメインをブラウザで実行
    htmlに書いた内容が表示されていますね

参考

AWS EC2にSSHでアクセスする方法

AWS EC2にNginxをインストールする

Nginxで自分のHTMLを表示させる方法:htmlディレクトリはどこにある?

nginx 公開ディレクトリの変更

Discussion