はじめに
こんにちは。新入社員M.Uです。
最近、新入社員研修でWebアプリを作る機会がありました。
作るだけでも楽しいのですが、せっかく作ったなら誰でも見られるように公開してみたいですよね。
そこで今回は、S3を使用しWebアプリを誰でも見れる範囲で公開してみようと思います。
使用サービス
・S3
手順
１．バケットを作成する
S3にアクセスし、バケットを作成をクリックします。
バケット名を入力します。
それ以外の項目はデフォルトのまま進めました。
設定に間違いがないことを確認し、バケットを作成をクリックします。
※バケット名は一意である必要があります
バケットが作成されました。
バケット一覧にも表示されていることを確認します。
２．静的ホスティングを設定する
プロパティタブに切り替え、静的ウェブサイトホスティングの編集をクリックします。
静的ウェブサイトホスティングを有効にし、ホスティングタイプは「静的ウェブサイトをホストする」を選択します。
この時、もう一方の「オブジェクトのリクエストをリダイレクトする」を選択すると、バケットのウェブサイトエンドポイントに対する全てのリクエストを、別のバケットまたはドメインにリダイレクトすることができるようになります。
例えばサイトを移行した際、前サイトへのアクセスがあったら現サイトへリダイレクトさせたい場合などに使うと便利だと思います。
インデックスドキュメントに入力するファイル名は、S3バケットにアップロードしたHTMLファイル名と一致させる必要があります。
今回はindex.htmlと入力しました。
入力が完了したら変更の保存をクリックします。
編集できました。
３．アクセス許可を設定する
ブロックパブリックアクセスを設定していきます。
アクセス許可タブをクリックします。
アクセスが非公開になっていますね。
バケット内のファイルを公開するため、ブロックパブリックアクセスの設定を変更する必要があります。
今回は誰からでも見られるようにするので、全てオフにしましょう。
ブロックパブリックアクセス（バケット設定）の編集ボタンをクリックします。
「パブリックアクセスをすべてブロック」のチェックを外し、変更の保存をクリックします。
編集できました。
アクセスも公開できる状態になっています。
次にバケットポリシーを編集します。
以下のバケットポリシーをコピーし、エディターに貼り付けます。
Resourceのバケット名は変更しておきます。
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadForGetBucketObjects", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::バケット名/*" } ] }
変更の保存をクリックします。
バケットポリシーが編集できました。
アクセスも公開になっていますね。
4．公開したいファイルまたはフォルダをアップロードする
オブジェクトタブのアップロードをクリックします。
公開したいファイルまたはフォルダを追加し、アップロードボタンをクリックします。
アップロードできました。
これでAWS側の設定は完了です。
４．プロパティのエンドポイントをクリックする
プロパティタブに切り替え、静的ウェブサイトホスティングのエンドポイントをクリックします。
アップロードしたファイルが表示され、パブリックアクセスが可能になっているのを確認できます。
躓いたところ
・ブロックパブリックアクセスの設定
ブロックパブリックアクセス を読み解くのが難しかったので、備忘録としてまとめておきます。
①新しいアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする
有効にすると、ACLでパブリックアクセスを許可していればアクセス可能、無許可にしていればアクセス不可能になります。
ここで私は「新しい」って何...？となってしまいました。
↓こういうケースがあるかもしれない
１．パブリックアクセスブロックを全てオフにする
２．ACLの設定を「全てのユーザーに読み取り権限付与」に変更
３．①の設定をオンにする
４．ACLの設定を「全てのユーザーに書き込み権限付与」に変更
→３で①の設定をオンにしたので、４の書き込み権限ははじかれる。
２の読み取り権限のみ付与されている状態。
②任意のアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする
有効にすると、既存のACLの設定を無視して、全てのバケット、またはオブジェクトに対し、パブリックなアクセスが不可能になります。無効にするとACLに従いアクセス可能な状態になります。
ここでも私は「任意の」とは...？となってしまいました。
↓こういうケースがあるかもしれない
１．ブロックパブリックアクセスを全てオフにする
２．ACLの設定を「全てのユーザーに読み取り権限付与」に変更
→全てのバケット、またはオブジェクトに対して、ACLの設定通り読み取り権限が適用される。
３．②の設定をオンにする
→全てのバケット、またはオブジェクトに対して、ACLの設定関係なくアクセスできなくなる。
③新しいパブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする
有効にすると、バケットポリシーまたはアクセスポイントポリシーでパブリックアクセスを許可していればアクセス可能、無許可にしていればアクセス不可能になります。
①のパブリックバケットポリシーまたはアクセスポイントポリシー版です。
④任意のパブリックバケットポリシーまたはアクセスポイントポリシーを介したバケットとオブジェクトへのパブリックアクセスとクロスアカウントアクセスをブロックする
有効にすると、既存のバケットポリシーまたはアクセスポイントポリシーの設定を無視して、全てのバケット、またはオブジェクトに対し、パブリックアクセスとクロスアカウントアクセスが不可能になります。無効にするとバケットポリシーまたはアクセスポイントポリシーに従い、アクセス可能な状態になります。
②のパブリックバケットポリシーまたはアクセスポイントポリシー版です。
全て有効にした場合
全て有効にすると、パブリックアクセスを全てブロックすることができます。
S3のバケット、バケット内のオブジェクトにアクセスできるのは、バケット所有者がアカウント内で認証したユーザーのみに制限されます。
誰からのアクセスも受け付けたくない時は、全て有効にしますが、逆に全ての人からアクセスを受け付けたい時は、全て無効にします。
最後に
今回はWebアプリをS3上に公開する方法を紹介しました。
自分で作ったWebアプリを公開してみたい！と思った方々のお役に立てればと思います。
最後までお付き合いいただき、ありがとうございました！
