Help us understand the problem. What is going on with this article?

AWS S3を使用してHTMLを公開する

概要

本書ではS3のバケットにHTMLをアップロードし、バケットに配置したHTMLをインターネット上に公開できるように設定します。

0. 事前準備

  • AWSのアカウントを作成していること。
  • VSCodeなどのHTMLファイルを作成するエディターをインストールしていること。
    ※本書ではWindows10を使用します。

1. HTMLファイルの作成

S3でHTMLを公開するためには「index.html」「error.html」のファイルが最低限必要です。VSCodeなどのエディターで「index.html」「error.html」を作成します。本書では下記のHTMLファイルを作成しました。

index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>S3テスト</title>
        <style>
            body{
                background-color: #FFD5EC;
            }
            div {
                background-color: #FFEEFF;
                border-radius: 20px;
                border: 3px solid #FF88FF;
                width: 400px;
                text-align: center;
                margin: auto;
            }
            h1 {
                color:#AA0000;
                font-style: italic;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>S3 Test!!</h1>
            <h2>静的htmlをS3で表示します</h2>
        </div>
    </body>
</html>
error.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
        <style>
            body{
                background-color: #BBFFFF;
            }
            div {
                background-color: #EEFFFF;
                border-radius: 20px;
                border: 3px solid #55FFFF;
                width: 400px;
                text-align: center;
                margin: auto;
            }
            h1 {
                color:#000077;
                font-style: italic;
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>Error!!</h1>
            <h2>WEBページを表示できません!</h2>
        </div>
    </body>
</html>

2. S3バケットの作成

  1. AWSにログインし「サービス」→「S3」をクリックする。
    001.JPG

  2. 「バケットを作成する」をクリックする。
    002.JPG

  3. 「名前とリージョン」画面にて下記の内容を入力し、「次へ」をクリックする。

    • バケット名 : (任意の名称を入力)
    • リージョン : アジアパシフィック(東京) 003.JPG
  4. 「プロパティ」画面にて設定する内容がなければ「次へ」をクリックする。
    004.JPG

  5. 「ブロックパブリックアクセス(バケット設定)」画面にて「パブリックアクセスをすべてブロック」のチェックを外し「次へ」をクリックする。
    018.JPG

  6. 確認画面が表示されるので「バケットを作成」をクリックする。
    019.JPG

  7. バケットが作成されたことを確認する。
    020.JPG

3. HTMLファイルの配置

  1. 作成したバケットをクリックする。
    020.JPG

  2. 「アップロード」をクリックする。
    008.JPG

  3. 作成したHTMLファイルを追加する。
    009.JPG

  4. 「index.html」「error.html」ファイルが選択されていることを確認し「次へ」をクリックする。
    026.JPG

  5. アクセス許可設定画面にて下記の内容を選択し「次へ」をクリックする。

    • パブリックアクセス許可を管理する : このオブジェクトにパブリック読み取りアクセス権限を付与する 035.JPG
  6. 「ストレージクラス」画面にて「スタンダード」を選択し、「次へ」をクリックする。
    028.JPG

  7. 確認画面が表示されるので「アップロード」をクリックする。
    029.JPG

  8. 「index.html」「error.html」がアップロードされたことを確認する。
    036 - コピー.JPG

4. Static website hostingの有効化

  1. 上部メニューから「プロパティ」をクリックする。
    024.JPG

  2. 「Static website hosting」をクリックする。
    022.JPG

  3. 「このバケットを使用してウェブサイトをホストする」を選択し、下記の内容を入力する。その後「保存」をクリックする。

    • インデックスドキュメント : index.html
    • エラードキュメント : error.html                 032 - コピー.JPG
  4. 「パケットホスティング」にチェックマークが付いたことを確認する。

033.JPG

5. HTMLの公開設定

  1. 3章でアップロードしたHTMLファイルを選択し「アクション」をクリックする。
    036.JPG

  2. 「公開」をクリックする。
    037.JPG

  3. 確認画面が表示されるので「公開する」をクリックする。
    038.JPG

6. HTMLの確認

  1. 4章の「Static website hosting」画面を表示し、「エンドポイント」に記載されているリンクを任意のブラウザに貼り付ける。
    032.JPG

  2. アップロードしたindex.htmlが表示されたことを確認する。
    041.JPG

  3. S3バケットに存在しないリンク先を入力し、error.htmlが表示されたことを確認する。
    042.JPG

最後に

S3の「Static website hosting」機能を使用することでS3バケットにアップロードしたHTMLファイルをインターネット上に公開することができます。これによって簡単なホームページやポートフォリオの公開ができます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away