この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
AWS認定トレーニング講師の平野@おんせん県おおいたです。
みんな、温泉入ってますかー？ （挨拶
こんな方にオススメ
CloudFront+WAFはWEB開発において幅広く役に立つサービスです。既存のサイトに追加して利用することもできますので、中小規模のWEB開発会社さん、フリーランスの方でも活用していただけます。 初心者向けハンズオンなのですが、実際の構築で役立つ内容が凝縮です。 CloudFront使ったことある方でも、知識の整理に役に立ちます。
ハンズオンの概要
利用するサービス
- Amazon CloudFront : AWSのCDNサービス
- AWS WAF : AWSのWeb Application Firewallサービス
- Amazon S3 : 今回は静的サイト（HTML,CSS,画像,JavaScript）の配信で利用
- API Gateway : JavaScriptがアクセスするAPI
- Lambda : APIのロジックを実行
概要
まず、Amazon CloudFrontの環境を構築します。 CloudFrontのオリジンとしては S3 と API Gateway + Lambda の２種類を準備します。 静的コンテンツをS3から配信し、JavaScriptからAPI Gatewayにアクセスして動的コンテンツを更新するSingle Page Applicationの仕組みとなります。 そして、AWS WAFの環境を追加していきます。
このように、WEBアプリケーション開発に応用できる要素が詰め込まれたハンズオンになっています
所要時間
AWS Hands-on for Beginners シリーズの所要時間は合計１〜２時間が目安です。 ただCloudFrontのDeploy/更新に各10分程度かかりますので、このハンズオンは３時間程度みておくことをお勧めします。
事前準備
ハンズオン用AWSアカウント
持っていない場合は、まずはAWSアカウントを作成しましょう。
Google Chrome
途中でChromeのDeveloper Toolを利用してヘッダの確認を行いますので、Chromeを利用するのが無難です。
エディタ(VSCodeなど）
ダウンロードしたPythonファイル開いて、マネージメントコンソールにコードをコピペする際に、エディタがあれば便利です。
ハンズオン開始方法
最初に登録ページにアクセスします。すると、次のようなページが表示されます。
ここで必要事項を入力します。（この項目は他のセミナー等でも頻繁に入力しますので、コピペできるようにしておくと便利です） そして登録すると、次のようなページが表示されます。
スクロールすると、各ステップごとに動画が準備されています。この動画では、まずはハンズオンのベースとなる知識を説明した後、ハンズオンで体験します。
進め方
各ステップごとに動画を見ながら進めます。 ハンズオンは、実際の手順を動画で示してくれますので、その通りに進めれば初めての方でも安心してハンズオンができます。 また、最後にリソースの削除手順も丁寧に説明があるので、AWS利用料金もほんのわずかですみます。
受講のTIPS
動画再生速度
動作再生速度を0.5倍〜2倍の範囲で切り替えられます。 ハンズオンの時は少しスピードを落とすと、安心して進められます。
画面
サブディスプレイをお持ちであれば、ハンズオンページとAWSコンソールを別のディスプレイで表示すると進めやすいです。 お持ちでない場合は、次のようにハンズオンページを左に寄せて、右側にAWSコンソールを表示させる方法がオススメです。 （ページによっては幅が狭すぎる場合があります。その時だけ全画面表示にしてみましょう。）
コンソールの仕様変更
マネージメントコンソールは日々改善されているので、動画撮影時から仕様変更されている場合があります。 そのような際は慌てず、動画を一時停止して、その項目を探してみましょう。
例えば、今回Lambdaのアクセス権限設定のメニューの場所が下記にように、動画と実際のメニューが異なっていました。
資料
動画の説明で使用した資料は、ハンズオンページからダウンロードできます。 ハンズオン後に見直すとさらに理解が深まります。
まとめ
ハンズオンという限られた時間の中で、大切なポイントが丁寧に説明されて、体験できるようになってました。 是非多くの方に体験していただければと思います。
11
