20
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【AWS】S3+CloudFrontで静的サイトをホスティング + LambdaでBASIC認証つける

Last updated at Posted at 2020-05-09

何番煎じかわかりませんが備忘録兼ねて…

前回の記事でAmazon ConnectのCCPをカスタマイズしてWebページを作成しました。
Amazon Connect Streamsの仕様により、httpsでホスティングしなければいけないので、
パブリックアクセスを制限したS3にWebページを配置、CloudFrontを経由することでHTTPSによるアクセスを必須とします。
また、ついでにLambdaでBASIC認証を設定します。

※2020/5/13 追記
紹介している方法ではlambdaのバージョンを発行して、トリガーにcloudfrontを設定する、などやっていますが、
現在はlambdaの「アクション」から「lambda@edgeへのデプロイ」でcloudfrontのトリガー設定などをいっぺんにできます。
実装する順としてはs3→cloudfront→lambdaとすると、コンソールの移動とか少なく楽かと思います。

#まずS3とかCloudFrontってなに?
AWS初心者なのでまずここからでした。

###S3
Amazon Simple Storage Service
一言でいうとクラウドストレージサービス。安価で容量無制限、高い堅牢性を謳う。
静的Webサイトを配置して公開したり、ログファイルや諸々のデータをバックアップするなどユースケースは幅広い。
Webサイトを配信する際はCloudFrontを経由することが推奨されており、
クラウドデザインパターンの「CDP:Cache Distributionパターン」に当てはまる。

公式の概要
Black Beltのスライド

###CloudFront
コンテンツ配信ネットワークを提供するサービス???よくわからん。
各リージョンに配置されるS3などとは違い、物理的によりユーザに近い場所(エッジロケーション)に配置される、
キャッシュ機能を持ったプロキシのようなもの?だと思えばいい??
ここでいうエッジロケーションはあとで出てくるLambda@EdgeのEdgeとも意味的には同じで、
CloudFrontと同様エッジに配置されCloudFrontからのトリガーにより実行されるLambda関数を指している。

っていう理解でいいですかね?

公式の概要
Black Beltのスライド

#S3+CloudFrontによるホスティング+LambdaでBASIC認証つける
こちらの記事の通りにやればいける(説明放棄)
Lambda + CloudFront + S3でBasic認証する

コンソールのUIとか変わってる部分があるものの、基本は上の記事の通りでいいと思います。
今回S3に配置するのは、前回作成したWebサイト、Amazon Connect Streams APIですが、
すべてルートにフラットに置きました。だからなのか、S3で「Static website hosting」は無効のままでもアクセスできました。
エラー時のリダイレクトなどが必要になった場合には、ここを有効にする必要はありそうです。

加えて注意したいのはLambdaを作成するリージョンは「us-east-1 米国東部(バージニア北部)」にしておくことですね。
また、Lambda@Edgeでは環境変数を使用できません。自作の隠しファイルをアップロードして、それを読み込むなど、いろいろ工夫が必要になります。
一方で、Webアクセス時に必ず実行されるなどの理由でタイムアウトの制限も厳しいようです。(そもそもUXに直結するのでなるべく軽く早くすべきですが)

#実装中に思ったこと
CloudFrontのデプロイなど時間がかかるところがあって、設定と確認を何度もやっていると効率が悪くなります。
一つ一つちゃんと確認しながらやって一発で終わらせたいですね。

20
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?