Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
[アドウェイズエンジニアブログ] AWSクラウドハンズオン
Search
EnginnerBlog
April 05, 2019
1.1k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
[アドウェイズエンジニアブログ] AWSクラウドハンズオン
EnginnerBlog
April 05, 2019
Featured
See All Featured
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
The Cost Of JavaScript in 2023
addyosmani
55
10k
Intergalactic Javascript Robots from Outer Space
tanoku
273
28k
What does AI have to do with Human Rights?
axbom
PRO
1
2.5k
KATA
mclloyd
PRO
35
16k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
58k
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
46k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
540
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.7k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
640
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Transcript
入門! AWSハンズオン ~安価・高パフォーマンス・高可用性な静的 Webサイトをサーバーレスで構築~ ハンズオン 手順書 ※アドウェイズ のクラウドCoEチームが社内向けに行った際の資料です
事前準備は終わったかな? ①ハンズオン用資料のダウンロード ②ハンズオン用資料の解凍 ③AWSログインアカウントの準備 2
①下記ログインページにアクセス https://adw-sdg- test.signin.aws.amazon.com/console ②各自のアカウントでログインしてく ださい ログイン情報は事前配布したZipファイ ルに記載されています AWSにログインしてみよう ② 3
今回のハンズオンの構成
None
1. AWS 基礎知識講座 (30分) - 今回利用するAWSマネージドサービスの説明 2. S3 構築 (20分)
- コンテンツをアップロードしよう 3. CloudFront 構築 (30分) - CDNの設定をしてみよう - SSL証明書を設置してみよう 4. Route53 設定 (20分) - 自分のドメインからアクセスしてみよう 5. WAF 設定 (20分) - IPアドレス制限をかけてみよう 6. Lambda@Edge 設定(20分) - IAM でLambda用Roleを作成してみよう - Basic認証をかけてみよう カリキュラム
S3バケットをつくろう 画面上部のサービスを選択し、ストレージグループのS3を選択します ① ② 7
S3バケットをつくろう ボタンを押下し、下記例に沿ってバケット名を指定して作成を押下 ① ② バケット名: あなたの苗字.cloud-coe.net リージョン: アジアパシフィック(東京) 8
①先ほど作成したバケットを選 択 ② a ボタンを押下 S3バケットにコンテンツをアップロードしよう ① ② 9
①先ほどダウンロードした コンテンツを ドラッグ&ドロップ します (ファイル指定だとフォルダ の移行ができません) ②S3上へのアップロードを 完了します S3バケットにコンテンツをアップロードしよう ①
② 10
S3バケットのホスティングを有効化しよう ① ② ①プロパティタブを選択します ②Static website hostingを選択し、 ホスティングに関する設定を行 います 11
①後ほどアクセス確認を行うの でURLを控えておきましょう ②ウェブサイトをホストするに チェックする ③インデックスドキュメントに index.htmlファイルを指定する S3バケットのホスティングを有効化しよう ① ② ③
④ 12
①アクセス権限タブへ遷移 ②バケットポリシーを押下 S3バケットのバケットポリシーの設定をしよう ① ② 13
①サンプルコードの「①S3.txt」からコードをコピーして貼り付け てください。その際、Resourceのarnは自身のバケットのものを 指定するようにしてください。 { "Version": "2008-10-17", "Id": "Hands-on-BucketPolicy", "Statement": [
{ "Sid": "FromAdways", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::あなたのバケット名/*", "Condition": { "IpAddress": { "aws:SourceIp": "124.35.81.162/32" } } } ] } S3バケットのバケットポリシーの設定をしよう ① ② アドウェイズのIPからのみ アクセス可能 14
S3バケットのホスティングを確認しよう ①先ほど控えておいたURLにブラウザからアクセスしてみましょう http://あなたのバケット名.s3-website-ap-northeast-1.amazonaws.com ②社外ネットワーク(キャリア回線等)でアクセスできないことを確認してみ ましょう ③閲覧確認ができたら一旦ホスティングを無効化します 15
ウェブページが無事閲覧できましたか? 閲覧できた方はおめでとうございます!! ここまで順調です! できなかった人は、助けを呼びましょう! 今回はCloudFront経由でアクセスすることが目的なので、閲覧確認がで きたらS3でのホスティングを無効化します 16
①プロパティを選択 ②ウェブサイトのホスティン グを無効にチェックする ③保存で設定を反映 S3バケットのホスティングを無効化しよう ① ② ③ 17
Amazon CloudFront 18
1. AWS 基礎知識講座 (30分) - 今回利用するAWSマネージドサービスの説明 2. S3 構築 (20分)
- コンテンツをアップロードしよう 3. CloudFront 構築 (30分) - CDNの設定をしてみよう - SSL証明書を設置してみよう 4. Route53 設定 (20分) - 自分のドメインからアクセスしてみよう 5. WAF 設定 (20分) - IPアドレス制限をかけてみよう 6. Lambda@Edge 設定(20分) - IAM でLambda用Roleを作成してみよう - Basic認証をかけてみよう カリキュラム
CloudFront Distributionsを作成しよう ① ② ①画面上部のサービスを選択し ます ②ネットワーキング&コンテン ツ配信グループのCloud Frontを 選択します
20
CloudFront Distributionsを作成しよう ① ① Create Distribution で作成画 面へ遷移します 21
CloudFront Distributionsを作成しよう ① ① 今回配信するコンテンツは Webなので、Webの欄からGet Startedを選択 22
CloudFront オリジンの設定をしよう ① オリジンとなるS3バケットを指定 ② S3への直アクセスを制限する ③ S3がCloudFrontからのアクセスのみ受け 付けるように設定 ④
S3バケットポリシーに上記制限を上書き する ① ② ③ ④ 23
CloudFront キャッシュの動作設定をしよう ① 今回はSSL証明書を設置するため、 HTTPできたアクセスを強制的に HTTPSへリダイレクトするように 設定 ① 24
CloudFront SSL証明書を設置しよう ① アクセスするドメインを指定する ② 既に準備してあるSSL証明書を利用する ため、CustomSSL証明書を選択する ③ *.cloud-coe.net を選択
④ デフォルトルートオブジェクトとして index.htmlファイルを指定 ⑤Commentに苗字を入力しておいてくださ い ② ① ③ ⑥ ④ ⑤ 25
CloudFront 作成ステータスを確認しよう In Progress から Deployed になるまで約32分かかるため、 DNSの設定に進みましょう 26
27
1. AWS 基礎知識講座 (30分) - 今回利用するAWSマネージドサービスの説明 2. S3 構築 (20分)
- コンテンツをアップロードしよう 3. CloudFront 構築 (30分) - CDNの設定をしてみよう - SSL証明書を設置してみよう 4. Route53 設定 (20分) - 自分のドメインからアクセスしてみよう 5. WAF 設定 (20分) - IPアドレス制限をかけてみよう 6. Lambda@Edge 設定(20分) - IAM でLambda用Roleを作成してみよう - Basic認証をかけてみよう カリキュラム
Route53 で自分用ドメインを作成しよう ① ② ①画面上部のサービスを選択し ます ②ネットワーキング&コンテン ツ配信グループのRoute53を選 択します 29
Route53 で自分用ドメインを作成しよう ① ② ① Hosted zonesを選択 ② cloud-coe.net を選択し、cloud-
coe.netドメインの設定画面へ遷移 する 30
Route53 で自分用ドメインを作成しよう ① ② ① Create Record Setを選択 ② アクセスする際のサブドメイン
を指定(あなたの苗字) ③ Alias を Yesに変更 ④ Alias Targetは先ほど作成した CloudFrontのエンドポイントを指定 ⑤ Createでレコード作成 ③ ④ ⑤ 31
これで、あなたの名前のドメインからウェブページにアクセスできるよ うになっているはずです 下記URLにアクセスしてみましょう! http://あなたのバケット名 (◦◦.cloud-coe.net) 閲覧できましたか? httpsに自動でリダイレクトされていることも確認できたはずです 当然、https://あなたのバケット名 (◦◦.cloud-coe.net)での閲覧も可能で す
32
先ほど設定したCloudFrontのステータスがDeployedになる(世界中のエッ ジサーバーに設定が同期される)まで約32分かかります。 各自気になるところがあれば質問、休憩をとってください。 33
34
1. AWS 基礎知識講座 (30分) - 今回利用するAWSマネージドサービスの説明 2. S3 構築 (20分)
- コンテンツをアップロードしよう 3. CloudFront 構築 (30分) - CDNの設定をしてみよう - SSL証明書を設置してみよう 4. Route53 設定 (20分) - 自分のドメインからアクセスしてみよう 5. WAF 設定 (20分) - IPアドレス制限をかけてみよう 6. Lambda@Edge 設定(20分) - IAM でLambda用Roleを作成してみよう - Basic認証をかけてみよう カリキュラム
WAF ACLを作成しよう ① ② ①画面上部のサービスを選 択します ②セキュリティ、アイデン ティティ、コンプライアン スグループのWAF&Shield を選択します
36
WAF ACLを作成しよう ① ①今回はWAFの設定をするので Go to AWS WAF を選択 37
WAF ACLに紐付けるCloudFrontを設定しよう ①ACL(アクセスリスト)の名前を指 定します(苗字-acl) ②先ほど作成したCloudFront Distributionsが選択できるようにな っているはずなので自分のものを 選択 ③ Nextを押下し
conditionsへ ① ② ③ 38
WAF conditionでフィルターする対象を定義しよう ① 今回はIPアドレスでフィルター をかけるため IP match conditions欄 の Create
conditionを選択 ① 39
WAF アドウェイズのIPに対するフィルターを作成しよう ① ② ③ ④ ①IPアドレスフィルターの名前を指定します (苗字-from-adways) ②制限するIPアドレスを指定します。今回は アドウェイズ東京本社のIPアドレスです。
(124.35.81.162/32) ③ を押下すると左下にフィ ルターが登録されます ④ でフィルターを作成します 40
WAF conditionが作成されていることを確認しよう ① IP match conditionsの作成が成功し ていることを確認します ② 画面を一番下までスクロールし、 Nextを選択
① ② 41
WAF ACLルールの作成をしよう ① Create ruleで先ほど作成した conditionsに対してどのようなルー ルを適用するかを設定します ① 42
WAF ACLルールのトリガー設定をしよう ① ルールの名前を指定します(苗字-rule) ② どんなときにこのルールが適用されるかを 指定します。(originate from an IP
address in) ③ 先ほど作成したconditionsを選択 ④ Createでルールを作成 ① ② ③ ④ 43
WAF ACLルールの挙動定義をしよう ① 先ほど作成したルールを選択 (苗字-rule) ② ルールに該当する場合の挙動を選択 (Allow) ③ ルールに該当しない場合の挙動を選択
(Block) ④ Review and createでルールを作成 ① ② ③ ④ 44
WAF ACLの最終確認をしよう ① これまで作成してきた部分に間違いがな いか確認し、Confirm and createで WAFの 作成を完了しましょう ①
45
これで、CloudFrontというCDNサービスを使いながらもアドウェイズIP アドレス以外からのアクセスを制限することができました 下記URLにアクセスして挙動を確認してみましょう! http://あなたのバケット名 (◦◦.cloud-coe.net) https://あなたのバケット名 (◦◦.cloud-coe.net) 46
47
1. AWS 基礎知識講座 (30分) - 今回利用するAWSマネージドサービスの説明 2. S3 構築 (20分)
- コンテンツをアップロードしよう 3. CloudFront 構築 (30分) - CDNの設定をしてみよう - SSL証明書を設置してみよう 4. Route53 設定 (20分) - 自分のドメインからアクセスしてみよう 5. WAF 設定 (20分) - IPアドレス制限をかけてみよう 6. Lambda@Edge 設定(20分) - IAM でLambda用Roleを作成してみよう - Basic認証をかけてみよう カリキュラム
IAMでLambdaの実行権限を作成しよう ① ② ①画面上部のサービスを選 択します ②セキュリティ、アイデン ティティ、コンプライアン スグループのIAMを選択し ます 49
IAM Lambda用ポリシーを作成しよう ① まず、Lambda用ロールに 使用するポリシーを作成しま す ② ポリシーの作成 を押下し ます
① ② 50
IAM Lambda用ポリシーを作成しよう ① ① JSONタブを選択 ② サンプルコードの「②IAM_Policy.txt」か らコードをコピーして貼り付けてください。 51
IAM Lambda用ポリシーを作成しよう ① ② ① Lambda用Roleに名前を指定します (苗字-lambda-policy) ② ポリシーの作成を完了します 52
IAM Lambda用Roleを作成しよう ① ② ①ロールを選択します ②ロールの作成を選択しま す 53
IAM Lambda用Roleを作成しよう ① ② ① Lambda用サービスを作成 するのでLambdaを選択 ② 次のステップでアクセス 権限の設定に進みます
54
IAM Lambda用Roleを作成しよう ① ② ③ ① 大量のポリシーがあるので先 ほど作成したポリシー名で絞り 込みましょう ②
ポリシーにチェックします ③ 次のステップへ 55
IAM Lambda用Roleを作成しよう ① 今回はタグは使用しないので次へ ① 56
IAM Lambda用Roleを作成しよう ① ロール名を指定します (苗字-lambda-role) ② ロールの作成を完了しましょう ② ① 57
IAM RoleにLambda@Edgeの信頼関係を追加しよう ① ② ③ ① ロールを選択します ② 例により大量のロールから名前 で絞り込みましょう
③先ほど作成したロールを選択 58
IAM RoleにLambda@Edgeの信頼関係を追加しよう ① ② ① 信頼関係 タブを選択します ② 信頼関係の編集 を選択します
59
IAM RoleにLambda@Edgeの信頼関係を追加しよう ① 信頼関係のポリシーを変更します サンプルコードの「③ IAM_Role.txt」からコードをコピー して貼り付けてください 60
IAM RoleにLambda@Edgeの信頼関係を追加しよう ① 信頼されたエンティティ にedgelambdaが追加されて いることを確認しましょう 61
62
Lambda 関数を作成しよう 画面上部のサービスを選択し、コンピューティングのLambdaを選択します ① ② 63
Lambda@Edge バージニアリージョンへ移動 ① ② ① 右上の東京をクリックし、リージョン選択画面を開きます ② Lambda@Edgeは現在バージニア北部のみしか対応していないため、米国東部(バージニア北部)を 選択します 64
Lambda関数を作成しよう ① ② ④ ③ ① 一から作成 を選択 ② Codeの名前を指定
(苗字-basic-auth) ③ 今回ランタイムはNode.js 6.10を指 定 ④ 既存のロールを選択から 先ほど作 成したロール(苗字-lambda-role)を指 定します ⑤ 65
Lambda関数を作成しよう ① index.jsにコードを記載します サンプルコードの「④ Lambda.txt」からコピーして貼り 付けてください Basic認証時に求めるユーザー名 とパスワードはお好みのものを 指定してください ②
コードを保存します ① ② 66
Lambda 関数のバージョンを発行しよう ① ② ① アクションを選択し ます ② 新しいバージョンの 発行をします
67
Lambda 関数のバージョンを発行しよう ① ① バージョンの説明は特に必要ないので、そのまま発行をクリックします 68
Lambda 関数のトリガーを設定しよう 69 ② ① 先ほど作成した関数のバージョ ンが1になっていることを確認し ます ② 関数が実行されるトリガーとし
てCloudFrontを選択します ①
Lambda 関数のトリガーを設定しよう 70 ① ② ③ ④ ⑤ ① ディストリビューションに先ほど作成
した自身のCloudFrontを指定します ② 関数が呼び出されるタイミングを選択 します(ビューアーリクエスト) ③Lambda@Edgeのデプロイに同意します ④ トリガー設定を追加 ⑤ 保存
これで、CloudFrontを使いながらもアドウェイズIPアドレス以外からの アクセスを制限し、さらにサーバーレスでBasic認証を実装することがで きました! ※認証情報はコードを変更しなかった場合は「User」、「Password」。 変更した場合は自身で指定したログイン情報を入力してください 下記URLにアクセスして挙動を確認してみましょう! http://あなたのバケット名 (◦◦.cloud-coe.net) https://あなたのバケット名 (◦◦.cloud-coe.net)
71
おつかれさまでした! 本ハンズオンのすべての工程が終了しました。 初めて(?)のAWSはいかがでしたか? クラウドの手軽さと楽しさを少しでも理解してもらえたら幸いです。 今後もクラウドCoEチームはクラウドという側面から皆さんと事業をサポ ートさせていただきたいと思います。 ありがとうございました! 72