🌐

作成したアプリケーションを公開する(AWS)

2023/01/03に公開

手順

S3でバケットを作成

コンソールからs3を開きます。
ページ上部の検索窓で「s3」と打てば見つかります。

「バケットを作成」をクリックします。

一度作ったことがある方は下記の表示になるかと思います。

バケット名は任意です。

他の項目は後で変更可能ですので、一旦下までスクロールし、
「バケットの作成」をクリックします。

バケットが作成されました。

バケットの一覧から作成したバケット名をクリックすることでバケットの詳細や設定の変更等が可能です。

バケットの静的ウェブサイトホスティングを有効化

「プロパティ」タブを開き、一番下までスクロールします。
「静的ウェブサイトホスティング」の編集をクリック

  • 有効にするに変更します。
  • インデックスドキュメントを指定します。ここではindex.htmlにします。
  • その他はデフォルトのままとして、設定の保存をします。

これで独自のURLが発行されます。


403 Forbidden はアクセスする権限がないエラーです。

バケットの公開設定

次にアクセス許可のタブを開き、ブロックパブリックアクセス (バケット設定)の編集を行います。

  • 「パブリックアクセスをすべてブロック」のチェックを外します。
  • 4つのチェックボックスの内、上2つをチェックしておきます。

設定を保存すると、確認のダイアログが表示されるので、内容に従って確認ボタンをクリックします。

パブリックアクセスをすべて ブロックがオフに変わっています。

バケットポリシーを追加

ブロックパブリックアクセスの下にバケットポリシーがあるので、こちらを編集します。
下記のポリシーを張り付けて頂き、「Bucket-Name」の部分をご自身が作成したバケット名に変更して保存します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

ざっくり意味を解説
"Resource": ["arn:aws:s3:::Bucket-Name/"] ・・・指定されたバケットの中すべて
"Action": ["s3:GetObject"] ・・・対象:S3のバケットのファイル
"Effect": "Allow" ・・・許可する
"Principal": "
" ・・・誰にでも

まだファイルをアップロードしていないのでエラーになります。
404 Not Found はファイルが見つからないエラーです。
ここまでの設定でindex.htmlをトップページに指定していますので、
index.htmlをアップロードします。

公開するファイルをアップロード

下記のhtmlを作成し、アップロードします。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Website Home Page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Now hosted on Amazon S3!</p>
</body>
</html>

「オブジェクト」タブを開いてアップロードします。
ページに直接ドラッグしても良いですし、アップロードボタンを押してファイルを選択してもOKです。

アップロードが終わったら先ほどのページを開くと、無事開けるようになりました。

公式ドキュメント

https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html

K2Oシステムテックブログ

Discussion