LINE ChatBot 制作③「ポケモンの名前を入力すると、おすすめのヨーヨーを教えてくれる」 -S3 実装編-

こんにちは、KimYasです。
前回の記事で、 LINE Developersへの登録を行いました。
今回は、応答メッセージに用いるヨーヨーの画像をS3に格納します。
それでは行きましょう！

（参考）
LINE ChatBot 制作①「ポケモンの名前を入力すると、おすすめのヨーヨーを教えてくれる」- 概要編 -

今回の実装箇所

今回は、S3とCloudFrontを実装していきます。

LINEのMessaging APIには、画像URLを用いて画像をレスポンスとして返せる機能があります。
S3ではバケット内に格納した画像オブジェクトに固有のURLが割り振られるので、そのURLを用いてLINE上で画像を表示する、という仕組みにします。

しかし、単純にその設計を実現する場合、S3にパブリックアクセスを許可する必要があります。
これは、誰でも自由にS3オブジェクトにアクセス可能となることを意味しており、セキュリティ面から推奨される設計ではありません。

そこで、CloudFront経由でのみS3オブジェクトにアクセスできる設計とします。
このように、CloudFrontをLINEとS3との間に入れることで、WAFをはじめとしたセキュリティ機能の実装が可能となります。
さらに、CloudFrontを利用することで世界中のエッジロケーションに画像をキャッシュすることができるため、アクセス速度が向上します。

以上の理由から、S3だけでなく、CloudFrontも合わせて実装します。
まずはS3から実装していきましょう。

S3 実装

AWSコンソールからS3を選択し、画面右上の「バケットを作成」をクリックします。

バケット名は任意のバケット名でOKです。
リージョンはアジアパシフィック（東京）としました。
他はデフォルトの設定のままで下に進み、画面右下の「バケットを作成」をクリックします。
これでバケットが新規作成されました。

バケット一覧画面から、作成したバケットを選択します。
画面上部の「アップロード」ボタンをクリックします。

ローカルに保存しているヨーヨーの画像をドラッグ&ドロップでまとめてアップロードします。
一枚一枚選択する必要が無く、まとめてアップできるのが本当に便利ですね。
151匹分のポケモンに対応したヨーヨーの画像151枚でも楽々でした。

さて、現段階において、インターネット上から画像にアクセスできるのか試してみます。
アップした画像オブジェクトをクリックすると、プロパティを見ることができます。
ここでは"bacchus_yellow.jpg"というオブジェクトをクリックします。

画面右下の「オブジェクトURL」が、いわゆる画像URLにあたります。
これをクリックして、ブラウザから見てみます。

このように、画像を表示することができませんでした。
これは、S3はデフォルトでパブリックアクセスを許可しない設定になっているためです。
私たちが意図的に「公開」の設定をしない限り、インターネットを通して外部から直接アクセスされることはありません。
AWSはセキュリティを最優先事項としているので、納得の設計ですね。

ということで、ここからは意図的に外部アクセスを許可する設定を行います。
ただし冒頭でも触れたように、外部アクセスは「CloudFrontを経由した場合のみ」許可する設定とします。

CloudFront 実装

AWSコンソールからCloudFrontを選択し、画面右上の「CloudFrontディストリビューションを作成」をクリックします。

「オリジンドメイン」の入力欄をクリックすると、作成済みのS3バケットが候補として出てくるのでそれをクリックします。
すると、自動でオリジンの「名前」が入力されます。特にこだわりが無ければそのままでOKです。

「S3バケットアクセス」は、「はい、OAIを使用します」を選択します。
「新しいOAIを作成」をクリックすると、S3バケット名に応じた名前でOAIが作成されるので、それを選択します。

「バケットポリシー」は、「はい、バケットポリシーを自動で更新します」を選択します。
これにより、S3がCloudFrontに対してアクセスを許可するポリシーが自動生成されます。
この辺りを自動で設定できるのが非常に便利ですね。

そのまま下にスクロールし、「ビューワープロトコルポリシー」は"Redirect HTTP to HTTPS"を選択します。
せっかく設定できるので、HTTPアクセスはHTTPSにリダイレクトしましょう。

他の設定は触らず、画面下の「ディストリビューションを作成」をクリックします。

ディストリビューションを作成できました。
「ステータス」が「有効」になれば成功です。

ここで、S3バケットの「アクセス許可」タブをクリックして、バケットポリシーを見てみましょう。
CloudFrontのディストリビューション作成時に、「はい、バケットポリシーを自動で更新します」 を選択したことにより、バケットポリシーが自動で作成されています。
これで、CloudFrontを経由してS3バケットのオブジェクトにアクセスするための設定が整いました。

それでは、ブラウザから画像にアクセスできるか試してみましょう。
ブラウザのアドレスバーに次のように入力します。

https://"CloudFrontディストリビューションのドメイン名"/"S3バケットのオブジェクト名"

"CloudFrontディストリビューションのドメイン名"は、CloudFrontのコンソール画面から確認できます。
"S3バケットのオブジェクト名"は、今回は"bacchus_yellow.jpg"としました。
入力できたら、Enterを押します。

無事に画像を表示できました。
また、httpsではなくhttpでアクセスすると、httpsにリダイレクトされることも確認できます。是非試してみてください。
S3のオブジェクトURLでは画像を表示できないので、CloudFrontを経由した場合のみS3にアクセスできるようになりました。

以上で画像の仕込みは完了です。
お疲れ様でした！

（こちらのヨーヨーの画像は、ヨーヨーストア リワインド様の商品ページからお借りしました。）
https://yoyostorerewind.com/jp/bacchus-with-candy-dice.html

まとめ

いかがだったでしょうか。
今回は、S3とCloudFrontを実装しました。
CloudFrontは今回行ったことに加え、WAFを設定することでセキュリティの向上を図れます。
また、 CloudFrontディストリビューションのドメイン名 を独自ドメインに変更することで、画像URLをより分かりやすくもできます。
これらについてはまた別途記事を書きますので、是非チェックしてみてください。

次回はメイン処理を実装します。
どうぞお楽しみに！

（続きの記事はこちら）

KimYas