S3+CloudFront+ACMでSSL化したWebサイトをホストする(前編)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ついに消費増税しちゃいましたね。
まぁそれにもめげずに初日(10/1)から飲みに行きましたよ。

一軒目は「勝男」、唐揚げをメインにした居酒屋チェーンです。ビールが180円と大変お得なお店なので唐揚げが捗ります。

二軒目は私が大好きな「かのや」、椅子はありますが、いわゆる立ち食い蕎麦屋です。ここの「げそ天抜き」が大好物なんです。「天抜き」とは「天ぷらそばの蕎麦抜き」→「天ぷらを蕎麦つゆに浸したもの」です。カリッと揚げたげそのかき揚げがたまりません!

で、さらに三軒目まで行ってしまいました。というか、駅前のヨドバシカメラの酒屋でドリンクとツマミを買って、路上(地下)で飲むという暴挙に出たのですが、そこで事件が発生しました!

店舗は地下街にあるので、お店を出てその付近の通路の邪魔にならない場所でチビチビやっていたのですが、しばらくすると店員さんが寄ってきて、こう言うのです。「ここはうちの敷地内なので、ツマミの軽減税率が適用されなくなってしまうため、そこの境界線を越えた場所でお願いします」と。

コンビニやスーパーで購入した食品は基本的に消費税8%に据え置きですが、イートインで食べる場合は外食扱いとなって10%課税になるという、案が出た当初から運用が危ぶまれていた「軽減税率」。なるほど。敷地内で食べてしまうと軽減税率が適用出来ないから、敷地の外でお願いしたわけですね。

しかし、ちょっと検索してみたら「イートインしますと言ったら『そんなこと言う人初めてです』と驚かれた」などという趣旨のツイートが拡散されていたりするようです。8%で決済してしまえばあとは客がどうしようが構わない、というあいまいな運用が割と適用されているようで、ここまで厳密に運用しているという話は珍しいのかもしれません。

ま、そもそも店の外で飲むなよ!ということですね。

そういえば、一時期「人をダメにするクッション」というものが流行りましたが、「人をダメにするポスト」なんてものもあるそうです。コンビニ前にあるこのポスト、夜な夜なコンビニでツマミと酒を買ってきた人がテーブル代わりにしているそうな…
このポストで飲む場合の税率が気になって夜も眠れ…ますけど。

さて、そろそろ本題に入りましょう。

S3でWebサイトをホストする

今回の要望は以下のようなものでした。
・廃止するドメインに1ページだけ「移転の案内ページ」を掲示したい
・どのページを開いても同じ「移転の案内ページ」を表示させたい

そこで、お客様と話したところ、以下の二つの案が出ました。

・既存のEC2 Webサーバに新しいサイトを作成する
・S3でWebサイトをホスティングする

当然、私がやってみたかったので(?)、後者を選択してもらいました。

必要な工程は?

ざっくり以下のようになります。
・ACMでSSLサーバ証明書を作成する
※DNSで所有している証明を実施
・S3にバケットを作成
・静的Webホスティングを設定
※要望によりリダイレクトルールを設定
・CloudFrontを設定
・最終的にDNSを切替

さぁ!作っていきましょう!

ACMでSSLサーバ証明書を作成する

Amazon Certificate Manager(ACM)のページを開き、「証明書のリクエスト」ボタンをクリックします。

「パブリック証明書のリクエスト」を選択し、右下の「証明書のリクエスト」をクリック

利用したいドメイン名を入力し、「次へ」をクリック。

本当にドメインの持ち主かを確認するための方法は二通りあります。今回はDNSの検証を用います。

確認が求められるの、内容を確かめた上で「確定とリクエスト」をクリック。

リクエストが完了すると以下のような画面になりますので、CSVファイルをエクスポート、というかダウンロードしましょう。ダウンロードしたら「続行」をクリック。

CSVファイルの中身は以下のようになっていますので、当該のDNSレコードの編集画面で指定の通り登録します。

私は個人的にお名前.comやvalue-domainをよく使っていますので、例えばvalue-domainの場合には以下のように記載します。

TTLの数字によってDNSレコードの伝搬に時間がかかりますが、10-15分程度もすればレコードが有効になります。
コーヒーやビールなどを飲んで少し時間を置いてから、ACMの画面にもどり、更新ボタンを押してみましょう。

すると・・・どうでしょう!
「状況」が「発行済み」に変更されました。これで検証は完了です。
当然ですが1文字でも記載ミスがあったり、全角スペースが入っていたりするとNGです。

 

S3にバケットを作成

次はS3バケットの作成です。コンテンツを配置する、いわゆるドキュメントルートにあたるフォルダのようなものです。
さらに、静的Webホスティング機能がついているので、簡易的なApacheの機能まで包含しているようなイメージです。

初めにS3のWebコンソールを開き、「バケットを作成する」ボタンをクリック。

「名前とリージョン」では、名前を付け、リージョンは都合の良いリージョンを選択しましょう。

「オプションの設定」では今回の要望では特に不要なので、そのまま「次へ」をクリック

Webページの改ざんを許すわけにはいきませんが、Webで公開はさせたいので、一番上の「パブリックアクセスをすべてブロック」はチェックを外して「次へ」をクリック

確認して「バケットを作成」をクリックで完了です。

バケット一覧で、対象のバケットをクリック。

バケットに入ったら「プロパティ」タブをクリック。

「Static website hosting」をクリック。

「このバケットを使用して…」をクリック。

そして、今回の以下の要件に合うように、以下のコードを「リダイレクトルール」欄に入力して「保存」をクリック。
・どのページを開いても案内ページを表示させたい
→S3の場合には目的の物が見つからない場合には404が返るので、404の場合にindexに転送する

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>www.hogefuga.com</HostName>
      <ReplaceKeyWith/>
    </Redirect>
  </RoutingRule>
</RoutingRules>

次に「アクセス権限」タブをクリックし、バケットポリシーエディターに以下のコードを入力して「保存」する。

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadForGetBucketObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::hogefuga.test(バケット名)/*"
}
]
}

そして、適当なindex.htmlファイルと必要なcssを準備する。

これで、まずはS3のダイレクトなURLにアクセスしてみましょう。
上の方に「エンドポイント」と書いてあるものがURLです。

ここまででS3の設定は完了です。

Webコンテンツをアップロードする

次に、「移転の案内ページ」をS3にアップロードします。
「概要」タブを開き、「今すぐ始める」をクリックします。

以下の画面になったら、アップロードしたい「index.html」やCSSなどのファイルをまとめて&ドロップします。

ドラッグ&ドロップすると、以下の画面になりますので、「次へ」をクリック。

ここで「パブリックアクセスを許可する」の欄は「このオブジェクトにパブリック読み取りアクセス権限を付与する」を選択し、「次へ」をクリック。

「ストレージクラス」は「スタンダード」のまま「次へ」をクリック。

最後の確認です。「アップロード」をクリック。

アップロードに成功すると、以下のようにアップしたファイルが表示されます。

これで基本的なWebホスティングは準備完了です。

早速アクセスしてみましょう

URLは以下の通りです。

http://[バケット名].s3-website-ap-northeast-1.amazonaws.com

正しい場合には以下のようにindex.htmlファイルが表示されます。

次回は独自ドメイン化する方法と、CloudFrontでSSL化する方法を解説します。

・・・次回へ続く。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください