はじめに

こんにちは。

季節はそろそろ梅雨も明けて初夏の装いに差し掛かっておりますが、いかがお過ごしでしょうか？

さて先日自社で開発したスマートフォン向けアプリケーションにおいて、ユーザー管理やアプリに情報を配信するためのWebアプリケーションも一緒に構築しました。

この記事では、Webアプリケーションの仕組みで必要とされた「AWS S3」 および 「CloudFront」 を用いて、他社プロバイダ管理下での静的Webホスティング設定、ならびにSSL化設定までの手順をご紹介します。

 

作業内容

1. S3で静的Webページをホスティングします。

1-1.AWSにサインインしてS3コンソールを開きます。

※事前にWeb公開に使用する独自ドメインを用いたFQDNを決めておきましょう！
今回のケースではお客様所有ドメインのサブドメインを発行・設定しました。

 

1-2.「+ バケットを作成する」をクリックする。

上記独自ドメインのFQDNを「バケット名」に入力し、「次へ」をクリックする。

 

1-3.「オプション設定」はデフォルトで問題ないので、「次へ」をクリックします。

 

1-4. Webでの公開が目的なので、「パブリックアクセスをすべてブロック」 のチェックを外します。

上部で表示されている「！パブリックアクセスをすべてブロック を無効にすると、〜」 の下にある「現在の設定により、このバケットと中のオブジェクトが〜」に、チェックを入れます。

そのあとは画像の通りチェックを入れ 「次へ」 をクリックします。

「確認画面」 を経て 「バケットを作成」 をクリックします。

 

1-5. 作成したバケットをクリックする。

「プロパティ」 タブを開き 「Staticwebsite hosting」 を展開します。

「このバケットを使用してウェブサイトをホストする」 にチェックをいれて「インデックスドキュメント」 に 「index.html」 と入力、そして「保存」 をクリックして、次に進みます。

 

1-6. 「アクセス権限」 タブを開き 「バケットポリシー」 を開きます。

「Resource」 にバケット名を記載し 「保存」 をクリックします。

 

1-7. 「概要」 タブを開き 「ファイルを追加」 から、バケットにファイルをアップロードします。

 

1-8. 「プロパティ」 タブを開きます。

「Staticwebsite hosting」 にある 「エンドポイント」 のリンクをクリックします。(1-5を参照)

index.html の内容が表示されれば成功です！

 

 

2. CertificateManagerでSSL証明書を発行

2-1. AWSコンソールから 「Certificate Manager」 を選択。

 

2-2. 「証明書のリクエスト」

「パブリック証明書のリクエスト」 のラジオボタンをチェック、「証明書のリクエスト」 をクリックします。

 

2-3. 次に使用したいドメイン名を入力して、 「次へ」 をクリックします。

 

2-4. 「DNSの検証」 にチェックを入れて 「次へ」 に進みます。

 

2-5. 「タグを追加」 を任意の内容に設定し「確認」から次に進みます。

 

2-6. 「確認とリクエスト」 をクリックして次に進みます。

 

2-7. 次の検証画面が表示されれば 「CertificateManager」 での設定は完了です。

 

 

3. DNS設定にCNAMEレコードを追加します

CNAMEレコードをドメインのDNS設定に追加します。

サーバーによって、DNS設定の言い回しが少し異なるようですが、概ね以下のような名称の項目に設定します。

名前（エントリ名・ホスト名など） 種類（種別など） 値（内容・データなど）
2-7の＜名前＞の内容 CNAME 2-7の＜値＞の内容

 

 

4. S3の前段にCloudFrontを設置、SSL証明書をCloudFrontに設定する

4-1. AWSコンソールから 「CloudFront」 を選択。

「Create Distribution」 → 「Select a delivery method for your content.」

画面ではWebの方の 「Get Started」 をクリックすると以下の画面に移行します。「Origin Domain Name」 はWebサイトを公開しているS3を選択し、その他 「Default Cache Behavior Settings」 設定を以下の通り行って下さい。

・「Restrict Bucket Access」 ＝ Yes ※CloudFront を経由しS3にアクセス
・「Origin Access Identity」 ＝ Create a New Identity
・「Grant Read Permissions on Bucket」 ＝ Yes, Update Bucket Policy
・「Viewer Protocol PolicyRedirect」 ＝ HTTP to HTTPS

以降設定項目は以下のようにデフォルト設定とします。

 

4-2. 「Distribution Settings」 エリアの設定をします。

Alternate Domain Names(CNAMEs) にお客様から発行していただいたサブドメインを入力し、他の設定はデフォルト値のままとします。

 

4-3. 「Create Distribution」 をクリックすると、Distributionが作成されます。

 

 

5. AccessDenied になる問題を解決（CroudFrontの設定調整）

今回開発した際に 「/」 以外のURLでリロードした場合に403(access denied)エラー となる現象に遭遇しました。

エラーの原因として対応するファイルがないため、ブラウザをリロードすると 403エラー になってしまいます。

そのため CloudFront のカスタムエラーレスポンスで、403エラーのときに/index.html（今回は「/」） へ転送するよう設定することで、この現象を回避することが可能になります。

 

 

おわりに

GUIネーティブな私にとっては、CUIよりはとっつきやすく、内容が分からないなりにもなんとか最後までやりきることができました。

何事も経験、分からないなりにも前向きに実行を積み重ねたいと思います。

本記事が同様のことで「やり方がわからない！」という方の一助になれば幸いです。