インターン生が知識ゼロからWEBサイトを構築してみた
目次
はじめに
本記事はクラウド知識ゼロのインターン生が、EC2、 Amazon S3を使用してWEBサイトを構築した手順をまとめた内容となっています。
まず初めに、WEBサイトの構築を目標にEC2、それに準ずるリソースの作成を行いました。
WEBサイトの構築が完了した後、Amazon S3へのホスティングの切り替えに加え、カスタムドメインの取得とWAFの設定を行いました。
EC2(Amazon Elastic Compute Cloud)でホスティング
EC2とは、AWSが提供する仮想サーバサービスです。
以下の図に示すような構成でWEBサイトを構築していきます。

EC2の構築にあたって、前提条件として必要となるリソースの作成から行います。
VPC(Virtual Private Cloud)
VPCとは、論理的に隔離された仮想ネットワーク環境です。
AWSのコンソール画面で”VPC”と検索します。

IPアドレスの範囲は、”/16”で広く取っておきます。
VPCのその他必要な設定を行っていきます。
サブネット
サブネットとは、VPCを分割したネットワークで、IPアドレスで管理されます。

VPC IDは、作成したVPCを、
アベイラビリティーゾーンは任意のゾーンを選択します。
サブネットのIP範囲はVPCの範囲(/16)より狭くする必要があるため、”/24”とします。
インターネットゲートウェイ
インターネットゲートウェイとは、インターネットとVPC間の通信を行う為のゲートウェイです。

ルートテーブル
ルートテーブルとは、IPアドレスに基づいて経路を決定するための表が定義されたものです。
サブネット同様に、VPC IDは、作成したVPCを選択します。
セキュリティグループ
セキュリティグループとは、仮想ファイアウォールとして機能して、送受信トラフィックの管理を行います。
インバウンドルールはCloudFront作成後に細かく設定を行う為、仮のものを設定します。
アウトバウンドルールは、今回細かくトラフィック制御を行わないためデフォルトのままにしています。
EC2
AWSのコンソール画面で”EC2”と検索し、[インスタンスを起動]を選択します。
今回はAWSサービスのみを使用する為、Amazon Linuxを選択します。
インスタンスタイプはマシンの性能を決めるものですが、今回はWEBサイトの公開のみを行う為、任意の無料枠のマシンを使用します。
ネットワーク設定では、今回作成したものを選択します。ファイアウォール(セキュリティグループ)のみ[既存のセキュリティグループを選択する]を押すことで作成したセキュリティグループを選択することができます。
IAM ロール
IAMロールとは、EC2やユーザーなどにAWSの操作権限を与えるためのものです。
AWSのコンソール画面で”IAM”と検索し、ダッシュボードの”ロール”ページでロールを作成します。
ユースケースではEC2を選択します。
任意のロール名を入力します。
ポリシーとして、”AmazonSSMManagedInstanceCore”を選択します。EC2にSession Managerで接続を行うための権限を付与することができます。
Session Manager
EC2への接続にはAWS Systems ManagerのSession Managerを使用します。
Session Managerとは、EC2等の接続を行うもので、SSHのようにポート開放をする必要がないため、安全に接続を行うことができます。
EC2の画面に戻り、作成したEC2 インスタンスの詳細画面を開きます。
アクション > セキュリティから”IAM ロールの変更”を選択します。
IAM ロールには作成したロールを選択します。
接続時にSSM Session Managerを選択します。
以下のような画面が開きます。
WEBサイトの公開にあたり、Apacheのインストールを行います。
ターミナルにて以下のように入力します。
$sudo dnf update -y $sudo dnf install -y httpd $sudo systemctl start httpd $sudo systemctl enable httpd
ブラウザからの動作確認のために仮のhtmlファイルを作成します。
“/var/www/html/”というディレクトリにindex.htmlというファイルを作成します。
中身を作成し、EC2のパブリックipを開いて確認します。
以下のように表示されます。
CloudFront
CloudFrontとは、通信の高速化、セキュアな通信を行う為のサービスです。
Distribution nameに任意の名前を入力します。
ドメインは、Route 53でカスタムドメインの取得後に設定する為、入力しません。
この場合、CloudFrontのデフォルトドメインが登録されます。
Custom originは、作成したEC2のパブリックDNSを入力します。
オリジンとは、コンテンツが配置されているサーバで、CloudFrontにキャッシュが無い場合に通信を行います。
今回はhttpsでの通信を行いたい為、Redirect HTTP to HTTPSを選択します。
CloudFrontの作成後、EC2のセキュリティグループの設定に戻ります。
インバウンドルールの編集を行います。
検索で”com.amazonaws.global.cloudfront.origin-facing”と検索し選択します。
これによりCloudFrontからの通信のみEC2に接続できるようになります。
CloudFrontのディストリビューションドメイン名を入力することで、サイトにアクセスができます。
WEBサイトの構成改善
EC2からAmazon S3へのホスティングの切り替え、カスタムドメインの取得、WAFの設定を行います。
以下の図に示すような構成で構築をします。
Amazon S3でホスティング
Amazon S3(以下S3)とは、AWS上のオブジェクトストレージサービスです。
AWSのコンソール画面で”S3”と検索します。
バケットの作成を選択します。
任意のバケット名を入力します。
その他設定項目はデフォルトのまま進めます。

作成したバケットにhtmlファイル等をアップロードします。
S3へ、CloudFrontからの通信であることを知らせる為にOAC(オリジンアクセス)の設定をします。
CloudFrontのオリジンの設定を変更します。
Origin domain、Origin access controlにはそれぞれ作成したものを選択します。
作成前にOAC下の、[ポリシーをコピー]を選択します。

作成したS3のアクセス許可の設定を変更します。
バケットポリシーの欄に先ほどのポリシーをコピーします。
Route 53でのカスタムドメインの取得
Route53とは、AWSが提供するDNSサービスです。こちらを使ってドメインの取得を行います。
使用したいドメイン名で検索し、使用可能なものから選択します。
この後、各種個人情報などの入力を行い、ドメインの登録を行います。
AWS Certificate Manager
AWS Certificate Managerとは、httpsでの通信を行う為に必要なSSL証明書の発行を行うサービスです。
AWSのコンソール画面で”Certificate Manager”と検索します。
注意点として証明書のリクエストにあたり今回はCloudFrontで証明書を利用するため、リージョンをバージニア北部に指定する必要があります。
> CloudFront で SSL/TLS 証明書を使用するための要件
デフォルトの、パブリック証明書を選択します。
完全修飾ドメイン名は、Route53で取得したドメインを入力します。
リクエストを送信後、[Route 53でレコードを作成]を押すことで、DNS検証用のレコード作成をそのまま行うことができます。
証明書の発行が完了したので、CloudFrontの設定を変更します。
Alternative domain name(CNAMEs)に取得したドメインを、Custom SSL certificateに発行された証明書を選択します。
Route 53のホストゾーンからレコードを作成します。
CloudFrontディストリビューションへのエイリアスを選択し、作成したCloudFrontを選択します。
AWS WAF
AWS WAFとは、AWSが提供するクラウド型のWAF です。
今回は、自分のIPアドレスからのみサイトにアクセスができるようなルールを追加します。
AWSのコンソール画面で”WAF”と検索します。
“保護パック(ウェブACL)を作成”を選択します。
任意のアプリカテゴリと、アプリケーションフォーカスとして”ウェブ”を選択します。
保護するリソースとして、作成したCloudFrontを選択します。
初期の保護の選択では、”自分で選択”を選択します。
IPアドレスでの制限を行うルールを追加します。
以上の設定で、Route 53で取得したカスタムドメインでアクセスができるようになり、IPアドレスでの接続元制限をかけることができるようになります。
接続確認
Route 53で取得したカスタムドメインを入力することで、接続することを確認できます。
指定されたIPアドレス以外のアドレスで、接続できないことを確認します。

まとめ
今回はAWSを使ってWEBサイトの構築を行いました。
クラウドの知識が全く無い状態からのスタートだったので、それぞれのリソースの役割を理解が必要でしたが、インターン中ということで時間的余裕があり、しっかりと理解しながら進めることができました。
今回はWEBサイトの構築ということで、htmlといったフロントエンドの作業だけでなく、サーバの構築を始めとしたインフラの作業をさせて頂いたので、クラウドというものの理解が深まったと感じています。
アジアクエスト株式会社では一緒に働いていただける方を募集しています。
興味のある方は以下のURLを御覧ください。