【AWS】VPCとEC2でシンプルなサイトを公開するまでの手順！

こんにちは。iQeda [@iQeeeda] です。

現在、自分の会社「株式会社 EeeeG」を設立中でして、丁度コーポレートサイトを制作しています。
そこで思いつきですが、リリースするまでのノウハウを公開してみようと思います。

この記事で VPC と EC2 の基本的な使い方がわかります！

今回のアーキテクチャ設計

10.0.0.0/16 というレンジの VPC の中に、下記パブリックサブネットを作成します。
( DB を使う予定はないので、プライベートサブネットは作成しません。)

VPC の使い方

VPC でやることを先にざっくり説明しておきます。

それではやっていきましょう。

VPC・パブリックサブネット作成手順

VPC のリージョン確認

AWS で VPC のメニューを開いて「東京リージョン」 になっていることを確認する

VPC ウィザードの起動

「VPC ウィザードの起動」を選択して、VPC の作成を行います。

VPC 設定の選択

「1 個のパブリックサブネットを持つ VPC」を選択してください。
これは VPC 作成すると、デフォルトでパブリックサブネットが 1 個付いてくるものです。

VPC とパブリックサブネット (AZ:1a) の設定をする

この設定で VPC を作成してください。

パブリックサブネット (AZ:1c) を作成する

サブネットメニューから「サブネットの作成」を選択してください。
さらにロードバランサー用のパブリックサブネットを作成していきます。

この設定でパブリックサブネットを作成してください。

AZ:1c のパブリックサブネットに Internet GW を設定する

さて、ここで注意しないといけないことがあります。

AZ:1a のルーティングテーブルには Internet GW が含まれているので、
同じルーティングテーブルを AZ:1c に反映してあげる必要があります。

AZ:1a のルートテーブルを確認する

AZ:1a のサブネットを選択して、画面下の「ルートテーブル」タブを押してください。
あとで必要になるので、そこにある Route table ID を確認しておいてください。

AZ:1c のパブリックサブネットで「ルートテーブルの関連付けの編集」を行う

AZ:1c のパブリックサブネットを選択して右クリックするか、
画面下の「ルートテーブル」タブの中に、
「ルートテーブルの関連付けの編集」という項目があるので選択してください。

ルートテーブル ID の項目で、さきほど確認した AZ:1a の Route table ID を選択してください。
これで編集を完了すると、AZ:1c に AZ:1c のルーティングテーブルが反映されます。

画面下の「ルートテーブル」タブを開くと、以下のようなルートテーブルになっています。

ルートテーブルに Name 設定する

ルートテーブルメニューを開いて、名前を付けておきます。
今回は eeeeg-public-rt と設定しました。

Internet GW に Name 設定する

インターネットゲートウェイメニューを開いて、名前を付けておきます。
今回は eeeeg-igw と設定しました。

EC2 の使い方

EC2 でやることを先にざっくり説明しておきます。

それではやっていきましょう。

EC2 インスタンス作成手順

EC2 のリージョン確認

AWS で EC2 のメニューを開いて「東京リージョン」 になっていることを確認する

インスタンスの作成

「インスタンスの作成」を選択してください。

Amazon マシンイメージ (AMI)

好きなものを使えばよいのですが、今回は Amazon Linux 2 AMI を利用します。

インスタンスタイプの選択

今回は無料利用枠にもなっている t2.micro を選択します。

インスタンスの詳細の設定

高度な詳細から実行できるシェルスクリプト

環境設定を行うシェルスクリプトを用意しておきました。
これを貼っておくと、あとで少しラクになると思います。

#!/bin/bash

# ホスト名 (コピペするときは eeeeg-web-1a の2箇所を修正してください)
sed -i 's/^HOSTNAME=[a-zA-Z0-9\.\-]*$/HOSTNAME=eeeeg-web-1a/g' /etc/sysconfig/network
hostname 'eeeeg-web-1a'

# タイムゾーン
cp /usr/share/zoneinfo/Japan /etc/localtime
sed -i 's|^ZONE=[a-zA-Z0-9\.\-\"]*$|ZONE="Asia/Tokyo”|g' /etc/sysconfig/clock

# 言語設定
echo "LANG=ja_JP.UTF-8" > /etc/sysconfig/i18n

EC2 インスタンスに Name 設定する (タグの追加)

Name タグを付けると、EC2 インスタンスに名前を付けることができます。
今回は「Web-1a-eeeeg」と設定しました。

セキュリティグループの設定

セキュリティグループ名を変更したいとき

セキュリティグループ名は後から変更できないので注意してください。

そして アクション > ネットワーキング > セキュリティグループの変更 から、
作り直したセキュリティグループを適用してください。

秘密鍵を新規作成する

分かりやすいキーペア名を付けて、ダウンロードします。
この pem ファイルは紛失すると再ダウンロードできないので、慎重に保管してください。

ファイルの保管場所ですが、一般には ~/.ssh 配下に置かれることが多いです。

Elastic IP を作成して EC2 インスタンスに割り当てる

Elactic IP アドレスの割り当て

固定されたグローバル IP を取得して、EC2 インスタンスに設定します。
Elastic IP メニューを選択して「Elactic IP アドレスの割り当て」ボタンを押してください。

「割り当て」ボタンを押してください。

「この Elastic IP アドレスを関連付ける」ボタンを押してください。

作成した EC2 インスタンスを選択して、「関連付ける」ボタンを押してください。

IPv4 パブリック IP が Elastic IP になっていれば OK です。
これで EC2 インスタンスを再起動してもグローバル IP が固定されたままになります。

Elastic IP に Name 設定する (タグの追加)

Name タグを付けると、Elastic IP に名前を付けることができます。
画面下「Tags」タブから「タグの管理」ボタンを押してください。

今回は Name キーに「eeeeg-eip」と設定しました。

EC2 インスタンスにログインして環境設定する

SSH ログイン

先ほどの pem ファイルに権限を与えて、EC2 インスタンスに SSH ログインします。
IPv4 パブリック IP をコピペしておいてください。

chmod 400 ~/.ssh/[pemファイル]

# IPv4 パブリック IP で SSH する
ssh -i ~/.ssh/[pemファイル] ec2-user@[IP]

~/.ssh/config

config ファイルを作成しておくと、今後の ssh コマンドがラクになります。

Host eeeeg
    HostName [IP]
    User ec2-user
    IdentityFile ~/.ssh/[pemファイル]

これで ssh eeeeg だけでログインできるようになります。

自分が作業しやすいツールを入れる

無事ログインできたら、このあとサーバのファイル編集をしたりします。

epel リポジトリを追加しておくと便利

ちなみに Amazon Linux 2 AMI は CentOS ベースなので yum を使えるのですが、
epel リポジトリを追加すると、便利なライブラリを yum install できるようになります。

# amazon-linux-extras install という便利コマンドから epel リポジトリ追加
sudo amazon-linux-extras install epel
sudo yum update

# たとえば git クライアントの tig などインストールできるようになる
yum install tig

ホスト名の変更

# HOSTNAME=localhost.localdomain
HOSTNAME=eeeeg-web-1a

以下のファイルも編集してください。

# 先頭行に eeeeg-web-1a 追加する
127.0.0.1   eeeeg-web-1a localhost localhost.localdomain localhost4 localhost4.localdomain4

# EC2 インスタンス再起動して設定を反映する
sudo reboot

言語・文字コード設定

# LANG=en_US.UTF-8
LANG=ja_JP.UTF-8

sudo cp /usr/share/zoneinfo/Japan /etc/localtime

タイムゾーン設定

# ZONE="UTC"
ZONE="Asia/Tokyo"
UTC=true

日本の現在日時が表示されるか、確認してみましょう。

date

Web サーバ (Apache) 導入・設定

Apache インストール

今回は Apache を導入します。
Amazon Linux 2 AMI では yum コマンドを使うことができます。

sudo yum update
sudo yum install -y httpd

Apache 設定

ServerName で検索して ServerName eeeeg-web-1a を記述する

#
# ServerName gives the name and port that the server uses to identify itself.
# This can often be determined automatically, but we recommend you specify
# it explicitly to prevent problems during startup.
#
# If your host doesn't have a registered DNS name, enter its IP address here.
#
#ServerName www.example.com:80
ServerName eeeeg-web-1a

インスタンス起動時に Apache が自動的に起動するようにします。

sudo chkconfig httpd on

情報:'systemctl enable httpd.service'へ転送しています。
Created symlink from /etc/systemd/system/multi-user.target.wants/httpd.service to /usr/lib/systemd/system/httpd.service.

# 初回起動
sudo service httpd start

お疲れ様でした！

シンプルに静的サイトを公開するだけでも、色々とやることが多かったと思います。
数をこなせば慣れてくるので何度も試してみましょう！

最後に…

関連記事