プロジェクト

全般

プロフィール

Wiki »

第5回【いろいろなサービス使ってみよう編その２】

今回やってみること

  • CloudFrontとRoute53を使って独自ドメインでWebページを配信してみる。
  • ACMを使ってCloudFrontから配信するWebページをSSL化してみる
  • Lambda@Edgeを使ってCloudFrontで配信する画像イメージを自動でリサイズさせてみる

各種サービスの説明は前回を参照
Route53にホストゾーンを追加するため、月$0.5のコストが発生します。
嫌な場合は削除してください（12時間以内に削除すれば無料）。

今回作成したサブドメインの設定は、今年いっぱいでお名前ドットコムから削除します。
希望があれば削除せずに残すので連絡下さい。

事前準備（サブドメインの管理を各自のAWSアカウントのRoute53に移譲）

使いたいドメイン名を教えて下さい。
Route53にホストゾーンを追加して↑のドメインを登録してください。
作成されたNSレコードの４つの値を私に教えて下さい。
私の方で、お名前ドットコムにNSレコードを登録します。

確認
Cloud9を起動して下記コマンド

dig ドメイン名

statusの値を確認 NOERROR であればOK

ACMの設定（バージニア北部リージョンにて）

ACMの画面を開く
パブリック証明書
各自のドメインとワイルドカードのドメインを追加
DNS検証を選んで追加
画面上からRoute53にCNAMEレコードを追加できるのでそれを実行
verifiedになるまでしばし待つ

S3＋CloudFrontの設定手順（バージニア北部リージョンにて）

  • S3バケットの作成
    • index.html（適当な）をアップロード
  • CloudFrontのディストリビューションの作成
    • Webを選択
    • Originに作成したS3バケットを選択
    • Viewer Protocol Policy: Redirect HTTP to HTTPS
    • SSL Certificate： Custom SSL Certificate → ACMで作成したものを選択
    • CNAMEsにドメイン名を設定
    • Default Root Object： "index.html"を設定

Route53へのAレコード追加

作成したCloudFrontのディストリビューションがDeployedステータスになるまでしばしまつ
作成したCloudFrontのディストリビューションが選べるようになっているのでAレコードを追加する

ちょっと待ってから接続確認

https://xxxxx.kinocoffeeblack.net/

※ xxxxxの部分読み替え

Lambda@Edgeのビルドとデプロイ

Cloud9を起動

githubからLambda@Edgeのサンプルソースコードを取得
スクリプトでビルドとデプロイ

# jqコマンドのインストール
sudo yum -y install jq -y

git clone https://github.com/kinocoffeeblack/lambda-edge-resize-sample

# ここで、ソースコードの一部を編集（S3バケット名 "XXXXXXXX"）

cd lambda-edge-resize-sample
chmod u+x ./*.sh

# ディスク容量をリサイズ
sh resize.sh 20

# ビルドとデプロイ
./sam-deploy.sh

バージニア北部リージョンにLambdaができていることを確認
CloudFrontのBehaviorの設定を編集して、ViewerRequestとOriginResponseにLambdaをアタッチ
画像fileをS3バケットの/imgフォルダの下にアップロード
動作確認

https://xxxxx.kinocoffeeblack.net/img/xxx.png ← 元画像
https://xxxxx.kinocoffeeblack.net/img/xxx.png?w=100 ← 横幅100pxにリサイズされた画像