【AWSリバイバル】CloudFrontの署名付きURLで「3分で見れなくなってしまう秘密のページ」をつくってみよう!

http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/CloudFront_Top.jpg  こんにちは。最近新しくなったサーバーワークスのロゴが弥治郎系のこけしにマッチしすぎていていることに驚いているこけし部 部長の坂本(@t_sakam)です。
 
 さて、今回から勝手にはじまった「AWSリバイバル」シリーズ、AWSに結構前からあるけれど、個人的に使ったことがなかった便利な機能を再評価(?)してみようというシリーズです。
 AWSは便利なサービスや機能がありすぎて、全部使うことってないですよね。
 知っている人にとっては、もしかしたら「いまさら?」と思われる機能かもしれませんが、使う機会があったときにせっかくなのでブログにしていきたいと思います!
 第一回目の今回は「CloudFrontの署名付きURL」について書いてみたいと思います。
 
目次
  1. 「CloudFrontの署名付きURL」ってなあに?
  2. S3にコンテンツを準備する
  3. CloudFrontで「ディストリビューション」を作成する
  4. CloudFrontのキーペアの作成
  5. 署名付きURLの発行
  6. 発行された署名付きURLでアクセス
  7. おまけ
  8. まとめ

1. 「CloudFrontの署名付きURL」ってなあに?

 ひとことで言ってしまうと、署名付きのURLを知っている人だけがアクセスできるクローズドなコンテンツが配信できる機能です。
 以下のようなURLを発行して、このURLを知っている人だけがアクセスできるようにしたい、という場合に使えます。
 署名付きURLを発行するときに、そのページを見れる時間の指定ができるので、「3分だけ見れるようにする」ということも可能です。
 
署名付きURLの例 
https://xxxxxxxxxxxxxx.cloudfront.net/index.html?Expires=1111111111&Signature=XH~47V-usS6~PKg8oUdTpni~mIkVaNoEO0V~jk9nZXmgNPn~Q3AFWHt3m7qOxt~tU-AtA8GR34Y0A4~sB-qJH3ZPJBO9Eyl-e~sj3W9OjOtyR9HwTTEhUPpZYAQCBhhCpT36g7WyL2RlL9IKjRHQYNWjk0RzemWxcLKXMrFcKXISIGuzRRK5QAhqD0x23uMbn7wf26960tqPY3C3KolntEGSHVw0TGqGMoMSd9z59xsVIN52oS3HVLgBLlbRHzGL-doo0y0AD8UM1hA2BEOPRStH31DbQ-5rOTg85WMrv7tdTZcsw1XIAe~h~MScb3GDj3RDWonM4ZDadBv3HA0GLw__&Key-Pair-Id=XXXXXXXXXXXXXXXXXXXX

2. S3にコンテンツを準備する

 まずは、今回3分間だけ見れるようにしたいページを作成して、S3にアップロードしておきます。サーバーワークスの新しいロゴが弥治郎系こけしにマッチしていることにちなんで、「yajiro」という名前のバケットに「index.html」ファイルをアップロードしておきます。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/S3_001.jpg

3. CloudFrontで「ディストリビューション」を作成する

 次に、CloudFrontで新しい「ディストリビューション」を作成します。CloudFrontのマネジメントコンソールで「Create Distribution」ボタンを押します。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/CloudFront_001.jpg  今回公開するのはWebページなので、Webの方の「Get Started」ボタンを押します。Webの他にFlash用のRTMPが選択できます。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/CloudFront_002.jpg  次のページの「Origin Domain NAME」の入力ボックスを選択すると、同じAWSアカウント内に存在するS3バケットとELBのリストがプルダウンメニューで表示されるので、先程の「yajiro」バケットを選択します。
 
 次にS3バケットへのアクセスを「CloudFrontからのみ許可」するように設定します。
 まず、「Restrict Bucket Access(バケットアクセスを制限する)」を「Yes」にします。その下の「Origin Access Identity」は「Create a New Identity」を選択し、「オリジンアクセスアイデンティティ」というものを作成します。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/CloudFront_003.jpg  「Grant Read Permissions on Bucket」は「Yes, Update Bucket Policy」を選択します。これで、「yajiro」バケットのバケットポリシーが以下の内容に更新されます。
 
更新された「yajiro」バケットのバケットポリシー
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/BucketPolicy.jpg  次は、「署名付きURLや署名付きCookieでアクセスしないとページを見ることができない」ようにするための設定です。
 同じページにある「Restrict Viewer Access(視聴者のアクセスを制限する)」を「Yes」にします。その下の「Trusted Signers(信頼できる署名者)」は「Self」にチェックを入れます。
 署名者は今回作成するディストリビューションと同じアカウントにするので、「Self」とします。別のアカウントの署名者を使用する場合は、「Specify Accounts」にチェックしましょう。今回はひとまず、他の設定はデフォルトのままで「Create Distribution」ボタンを押して、ディストリビューションを作成します。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/CloudFront_004.jpg

4. CloudFrontのキーペアの作成

セキュリティ認証情報の設定

 次に署名付きURLを発行する時に使う、「CloudFrontのキーペア」を作成します。マネジメントコンソールの右上のアカウント名をクリックし、表示されたメニューから「セキュリティ認証情報」を選択します。
※「CloudFrontのキーペア」の作成は、rootでしかおこなえない作業なので、rootでマネジメントコンソールにログインしてから作業してください。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/KeyPear_001.jpg  セキュリティ認証情報のページに「CloudFrontのキーペア」という項目があるので、クリックします。表示された「新しいキーペアの作成」をボタンを押して、キーペアを作成します。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/KeyPear_002.jpg  キーペアが作成されたら、「プライベートキーファイルのダウンロード」ボタンと「パブリックキーファイルのダウンロード」ボタンを押して、キーファイルをダウンロードしておきましょう。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/KeyPear_003.jpg

5. 署名付きURLの発行

 すべての事前準備が整ったので、署名付きのURLを発行したいと思います。「AWS SDK for PHP」には「getSignedUrl」という署名付きURLを発行する関数があるので、今回は「AWS SDK for PHP」を使って発行しました。コードは以下になります。
 このURLのページが見れる期限を3分にするため、9行目で定数に180[秒]を代入しています。更に26行目で現在時刻にこの定数を足しています。
 10行目では、先程作成してダウンロードしておいたプライベートキーファイルを指定しています。プライベートキーの指定は、適宜キーファイルを置いた場所を指定してあげましょう。
 
cloudfront_signed_urls.php

コードの実行

 
 署名付きURLが発行されました。
 
https://xxxxxxxxxxxxxx.cloudfront.net/index.html?Expires=1111111111&Signature=XH~47V-usS6~PKg8oUdTpni~mIkVaNoEO0V~jk9nZXmgNPn~Q3AFWHt3m7qOxt~tU-AtA8GR34Y0A4~sB-qJH3ZPJBO9Eyl-e~sj3W9OjOtyR9HwTTEhUPpZYAQCBhhCpT36g7WyL2RlL9IKjRHQYNWjk0RzemWxcLKXMrFcKXISIGuzRRK5QAhqD0x23uMbn7wf26960tqPY3C3KolntEGSHVw0TGqGMoMSd9z59xsVIN52oS3HVLgBLlbRHzGL-doo0y0AD8UM1hA2BEOPRStH31DbQ-5rOTg85WMrv7tdTZcsw1XIAe~h~MScb3GDj3RDWonM4ZDadBv3HA0GLw__&Key-Pair-Id=XXXXXXXXXXXXXXXXXXXX

6. 発行された署名付きURLでアクセス

 まず、署名付きではないURL(https://xxxxxxxxxxxxxx.cloudfront.net/index.html)でアクセスしてみます。「MissingKey(キーがありません)」というメッセージがでて、コンテンツを見ることができません。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/Result_003.jpg  今度は、先程発行した署名付きURLでブラウザからアクセスします。きちんとコンテンツが見れました。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/Result_001.jpg  最後に、3分経ってからもう一度アクセスしてみます。「Access Denied」とメッセージがでて、コンテンツが見れなくなっています。意図したとおりに「3分で見れなくなる秘密のページ」が完成しました。  
http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/Result_002.jpg

7. おまけ

 冒頭で触れた弥治郎系こけしはこちらです。まるで弥治郎系のこけしを見てからロゴを作ったかのようにマッチしていますが、見てないと思うのですごい偶然ですね。 http://corporate-tech-blog-wp.s3-website-ap-northeast-1.amazonaws.com/tech/wp-content/uploads/2017/06/logo_yajiro.jpg

8. まとめ

 今回はCloudFrontの便利な機能、署名付きURLについて書いてみました。かなり前から存在する機能ですが、とっても便利な機能ですね。
 あらかじめ設定していた時間を過ぎたら見れなくなるページを作りたい! というときは、ぜひ使ってみてください!
 
 いや〜、CloudFrontって本当にいいものですね!
 

AWS運用自動化サービス「Cloud Automator」無料トライアルはこちらから

COMMENT ON FACEBOOK