10
2

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.

2日目は S3 を使って静的ページを公開する記事を書きます。

1日目に CSS の記事を hoge さんが書いてくれたので、 HTML、 CSS は書けたけど、外部に公開するにはどうすればいいの?って人向けに AWS の S3 を使って簡単に静的ページを公開する手順を記事にしました。

この記事の目的

  • S3 を使って自作した静的ページを公開できるようになる

(AWS の UI はたまに変わるのでご注意ください。)

静的ページと動的ページ

  • 静的ページ
    • リクエストに対して、 HTML ファイルなどをそのまま返す
    • クライアント側で実行されるスクリプト(JavaScript など)を含めることもできる
  • 動的ページ
    • リクエストに対して、サーバ側で処理をした結果を返す
    • サーバー側スクリプト (PHP、 Ruby、 Java など) の実行環境が必要

S3 とは

  • 容量無制限のストレージサービス
    • データのバックアップやログの保管場所など様々な用途に利用される
  • 静的ページのホスティング機能がある

手順

バケットを作成する

S3 コンソールに移動し、バケットを作成をクリック

image.png

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f35363761363737332d653634662d363831382d623433352d3332363563393637623833652e706e67.png

バケット名を入力し、リージョンを指定する

  • バケット名は一意なものにする必要がある
  • Route 53 で取得したドメイン名で公開したい場合は、ドメイン名と同じ名前で作成する(今回ドメインの取得は範囲外)

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f35643933313662352d373835612d646561372d626465312d6362383864656266393739642e706e67.png

パブリックアクセスを全てブロック のチェックを外す

今回は静的ウェブサイトホスティングを行いたいため、パブリックアクセスを許可する必要がある

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f61393561326239662d386232352d396233632d356166392d3639636132633031393038652e706e67.png

バケットの作成 をクリック

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32623131376561642d393930642d653638332d626566322d3363373938323233333866642e706e67.png

Web サイトホスティングを有効化

S3 コンソールから作成したバケットをクリック

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f64303136343339332d383837332d333339652d353436612d3633383365643234356166332e706e67.png

プロパティ静的ウェブサイトホスティング を編集

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32356633336461612d646263622d663933662d336435302d3037343931636431316266382e706e67.png

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f38613261333739612d386535392d313039622d373438332d3162383334626539616433642e706e67.png

静的ウェブサイトホスティングを有効にして、インデックスドキュメントを index.html に設定し、変更の保存をクリック

インデックスドキュメントはユーザーがウェブサイトのルートにアクセスした際に返されるページ
例えば、インデックスドキュメントを指定したwww.example.com というドメインのサイトがあった場合、
http://www.example.comにアクセスした場合は index.html が返される

これを設定していない場合、index.html を見るには http://www.example.com/index.html にアクセスする必要がある

静的ホスティングの場合は、サイトのトップページを設定するのが一般的

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f39386139353963642d386238632d353139352d366133612d6335313262633639343563342e706e67.png

アクセス権限を編集

同じく作成したバケットをクリックし、アクセス許可 のタブを選択する

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32666430383031332d343465302d313566662d663037372d3039313739336164643466362e706e67.png

バケットポリシーの編集をクリックし、次の json を貼り付けて、変更の保存 をクリック
( json は公式のチュートリアルから取得した)

  • Bucket-Name は自分が作成したバケット名に書き換える必要がある
  • 今回の場合は、myawsbucket-1667481997になる
  • json の先頭にスペースなどが入っているとエラーになるので注意
  • Policy has invalid resource というエラーが表示された場合は、バケットポリシー内のバケット名がバケット名と一致していることを確認
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Bucket-Name/*"
            ]
        }
    ]
}

バケットにある全てのファイルの取得を全ユーザーに許可しているような内容

image.png

問題なければバケットが公開されていることがわかる

image.png

ファイルのアップロード68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f61646332633432302d356235312d353166352d643534312d3034353437393833363564612e706e67.png

オブジェクト タグに戻り、アップロード を選択

image.png

適当な index.html をローカルで作成して、アップロード

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>静的 Web サイトホスティング</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div>
    <div>
      Hello!!
    </div>
  </div>
</body>
</html>

アップロード をクリック

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f61646332633432302d356235312d353166352d643534312d3034353437393833363564612e706e67.png

image.png

プロパティ へ移動し、静的ウェブサイトホスティング から バケットウェブサイトエンドポイント を取得し

image.png

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f37383764623161332d363535362d323134362d313562332d3033626135666362653635342e706e67.png

エンドポイントへブラウザからアクセスすると index.html が取得できていることがわかる

image.png

ディレクトリの作成

ディレクトリを作成して、 index.html から読み込むことも可能

フォルダの作成 から css フォルダを作成して、style.css をアップロード

image.png

image.png

style.css
div {
  color: red;
}

ページをリロード or 再度アクセスすると css が適応されていることがわかる

image.png

同じように画像を読み込むことも可能。

終わり

次回の記事は @Nyokki さんが MySQL 関連の記事を上げてくれるそうです!!
去年も同じ流れだった気がする。)

10
2
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
10
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?