CDN+WAF+SPAの基本をAWSで簡単に構築する無料日本語ハンズオンを受講しました

無料の AWS Hands-on for Beginners 「Amazon CloudFrontおよびAWS WAFを用いてエッジサービスの活用方法を学ぼう」を受講してみました。このブログでは、受講方法と、受講のTIPSなどを紹介します。

#AWS Hands-on for Beginners

#ハンズオン

#AWSトレーニング

#初心者向け

平野文雄

2021.03.29

この記事は公開されてから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コンソールを表示させる方法がオススメです。（ページによっては幅が狭すぎる場合があります。その時だけ全画面表示にしてみましょう。）