0
0

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 1 year has passed since last update.

AWS S3を使ってWebページを外部から見れるように(公開)する

Last updated at Posted at 2022-09-20

現在知り合いのWebページを保守運用しているのだが、新たにWebページを作成する必要ができた。
そのため、以前と同じ方法で公開しようとしたのだが、だいぶ前に公開していたこともありほとんど覚えていない。
なので、備忘録も兼ねてここに記載します。

前提として

すでにHTMLファイルとCSSファイルは作成済みです。

主にこちらの記事を参考にさせていただきました!
https://opt-p.co.jp/blog/aws/post-693/#outline__3_4

というか、上記のページだけで大丈夫でしたね(笑)

S3でバケットの作成

  1. S3からバケットを作成をクリック
  2. バケット名には自分が取得したドメイン名を入力
  3. AWSリージョンは東京or大阪を選択
  4. 「このバケットのブロックパブリックアクセス設定」で「パブリックアクセスをすべて ブロック」のチェックを外す
  5. 「パブリックアクセスのブロックをすべてオフにすると、このバケットとバケット内のオブジェクトが公開される可能性があります。」のはチェックを入れる
  6. バケットを作成をクリック

以上でバケットの作成は完了

静的ウェブサイトホスティングの設定

  1. 先ほど作成したバケットをクリック
  2. プロパティタブをクリック
  3. 「静的ウェブサイトホスティング」の編集をクリック
  4. 「静的ウェブサイトホスティング」は「有効にする」を選択
  5. 「ホスティングタイプ」は「静的ウェブサイトをホストする」を選択
  6. 「インデックスドキュメント」は公開したいWebサイトのホームとなるページ名を入力
  7. 「変更の保存」をクリック

以上で静的ウェブサイトホスティングの設定は完了

バケットのアクセスポリシーの設定

  1. アクセス許可タブを選択
  2. バケットポリシーの編集押し、以下のポリシーを設定
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
}

3.変更の保存をクリック

以上でバケットのアクセスポリシーの設定完了

htmlファイル等をアップロード

  1. オブジェクトタブを選択
  2. アップロードをクリック
  3. ファイルを追加をクリック
  4. アップロードしたいファイルを選んでアップロード

以上でファイルのアップロード完了

Webページへのアクセスを確認

  1. プロパティタブを選択
  2. 「静的ウェブサイトホスティング」にある「バケットウェブサイトエンドポイント」のURLをクリック

無事Webページが表示されました!

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?