Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
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.

@KosukeOshinari

「AWS Hands-on for Beginners - AWS 上で静的な Web サイトを公開しよう！」をやってみた

Posted at

AWS公式のハンズオン 「AWS Hands-on for Beginners - AWS 上で静的な Web サイトを公開しよう！」をやってみたので手順をこちらに載せていきます。
マネジメントコンソールがアップデートされたことで、動画上の画面と異なる部分が多々あるので参考にしていただけますと幸いです。

S3の静的ホスティングを使ってみる

まず初めにS3の静的ウェブサイトホスティング機能を利用し、簡単なHTMLファイルを公開していきます。

  1. まず初めにAWSマネジメントコンソールにログインします。

  2. 画面左上の検索欄に「S3」と入力し、表示されたS3をクリックします。
    image.png

  3. 「バケットを作成」をクリックします。
    image.png

  4. バケット作成画面が表示されるので、「一般的な設定」の「バケット名」に名前を入力します。
    image.png

    ※注意※
    バケット名に設定する名前は、グローバルでユニークである必要があります。
    Route53でドメインを取得する場合は、取得するドメイン名とバケット名が一致している必要があります。

  5. 「このバケットのブロックパブリックアクセス設定」にて「パブリックアクセスをすべて ブロック」のチェックを外します。
    image.png

  6. 手順5でチェックを外すと注意事項が表示されるので、クリックしてチェックを入れます。
    image.png

  7. そのほかの設定はデフォルトのまま、一番下までスクロールし、「バケットを作成」をクリックします。

  8. バケット一覧画面に戻るので、バケットが作成されたことを確認し、作成したバケットをクリックします。
    image.png

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

  10. 「静的ウェブサイトホスティングを編集」画面にてそれぞれ以下の項目を選択、入力し「変更の保存」をクリックします。

    項目 設定値
    静的ウェブサイトホスティング 有効にする
    ホスティングタイプ 静的ウェブサイトをホストする
    インデックスドキュメント index.html

    image.png

  11. 「アクセス許可」タブを開き、「バケットポリシー」の「編集」をクリックします。
    image.png

  12. 「ポリシー」欄に次の内容をコピーして貼り付け、xxxxxxxxxをバケット名に置き換えます。

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

  13. 「変更の保存」をクリックします。

  14. 「オブジェクト」タブを開き、「アップロード」をクリックします。
    image.png

  15. 「ファイルとフォルダ」の「ファイルを追加」をクリックすると、エクスプローラがポップアップするので、「index.html」ファイルを選択して、「アップロード」をクリックします。
    image.png
    index.htmlファイルの中身は以下の通りとなります。

    <head>
  <meta charset="utf-8">
  <title>はじめての S3 静的 Web サイトホスティング</title>
</head>
<body>
  <div>
    <div class="msg">
      Hello, AWS World!!
    </div>
  </div>
</body>
</html>

  16. 「閉じる」をクリックし、「プロパティ」タブを開きます。

  17. 「静的ウェブサイトホスティング」の「バケットウェブサイトエンドポイント」に記載されているURLをクリックします。
    image.png

  18. ブラウザの新しいタブに以下のような画面が表示されたら、S3を使った静的ウェブサイトの公開が完了となります。
    image.png

Cloud9環境を立ち上げて静的コンテンツを開発する + AWS CLIでS3にファイルをアップロードする

続いて、統合開発環境としてCloud9を利用し、Cloud9上で編集したファイルをS3へアップロードしていきます。

  1. 画面左上の検索欄に「cloud9」と入力し、表示されたcloud9をクリックします。
    image.png

  2. 「Create environment」をクリックします。
    image.png

  3. Nameに任意の名前を入力し、その他の項目が以下の通りであることを確認して、「Create」をクリックします。※記載のない項目はデフォルトのままで問題ありません。

    項目 設定値
    Environment type New EC2 instance
    Instance type t2.micro(1 GiB RAM + 1 vCPU)
    Platform Amazon Linux 2
    Timeout 30 minutes

  4. 作成したCloud9の「Open」をクリックします。立ち上がりに少々時間がかかります。
    image.png

  5. cloud9が起動したら、画面下のターミナルに以下のコマンドを入力し、作業ディレクトリを作成して作成したディレクトリに移動します。

     $ mkdir my-webpage && cd my-webpage

  6. cloud9にもS3にアップロードしたindex.htmlファイルをアップロードします。
    まず、画面左側のフォルダツリーにて先ほど作成した「my-webpage」を選択します。
    image.png

  7. 画面上部の「File」タブを選択し、「Upload Local Files..」をクリックします。
    image.png

  8. 「Select files」をクリックし、エクスプローラで先ほどアップロードした「index.html」を選択すると、Cloud9にファイルがアップロードされます。
    image.png

  9. index.htmlをダブルクリックで開き、中身を一部変更して保存します。
    image.png

  10. 上の手順で編集したindex.htmlファイルを以下のコマンドを実行して、S3にアップロードします。
    <バケット名>の部分は作成したS3バケットの名前に置き換えてください。

     $ aws s3 cp index.html s3://<バケット名>

  11. アップロードが完了したら、以下のバケットウェブサイトエンドポイントのURLへアクセスします。
    <バケット名>の部分は作成したS3バケットの名前に置き換えてください。
    http://<バケット名>.s3-website-ap-northeast-1.amazonaws.com/
    手順9で変更した内容が表示されていれば、アップロードは成功です。

続・静的コンテンツの開発 + AWS CLIでS3に複数のファイルを一括アップロードする

  1. 続いてcloud9で以下の3つのコマンドを実行して、ディレクトリとファイルを作成します。

    $  mkdir img
$  mkdir css
$  touch css/style.css

    <現在のフォルダ構成>
    image.png

  2. フォルダツリー上でimgフォルダを選択した状態で、画面上部の「File」タブを選択し、「Upload Local Files..」をクリックします。

  3. 画像ファイルを選択してアップロードします。
    <現在のフォルダ構成>
    image.png

  4. フォルダツリー上でmy-webpageフォルダを選択した状態で、画面上部の「File」タブを選択し、「Upload Local Files..」をクリックします。

  5. ファビコン用ファイルを選択してアップロードします。
    <現在のフォルダ構成>
    image.png

  6. 続いてindex.htmlを修正して保存します。修正内容は以下の通りです。

    <!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>はじめての AWS</title>
  <link rel="icon" href="favicon.ico"> <!-- 追加 -->
  <link rel="stylesheet" href="css/styles.css"> <!-- 追加 -->
</head>
<body>
  <div>
    <div class="icon"> <!--追加: ここから-->
      <img src="img/lambda.png">
    </div> <!--追加: ここまで-->
    <div class="msg">
      このページでは、AWS について学んだことを書いていきます。
    </div>
  </div>
</body>
</html>

  7. style.cssも修正して保存します。記載内容は以下の通りです。

    body {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.icon img {
  padding-top: 16px;
  padding-bottom: 16px;
}

  8. cloud9で編集したファイルを一括でS3にアップロードするために以下のコマンドを実行します。
    <バケット名>の部分は作成したS3バケットの名前に置き換えてください。

    $  aws s3 cp . s3://<バケット名> --recursive

  9. アップロードが完了すると、S3のバケットにフォルダ、ファイルがアップロードされていることが確認できます。
    image.png

  10. 以下のバケットウェブサイトエンドポイントのURLへアクセスします。
    <バケット名>の部分は作成したS3バケットの名前に置き換えてください。
    http://<バケット名>.s3-website-ap-northeast-1.amazonaws.com/
    ファビコンや画像が表示されていれば、正常にアップロードできたことが確認できます。
    ファビコンが表示されない場合は、キャッシュクリアなどで解消されることがあります。

CloudFrontを使って、画像をキャッシュさせる

  1. 画面左上の検索欄に「cloudfront」と入力し、表示されたcloudfrontをクリックします。
    image.png

  2. 「CloudFrontディストリビューションを作成」をクリックします。
    image.png

  3. オリジンドメインをクリックするとプルダウン表示されるので、作成したS3バケットを選択します。
    image.png

  4. S3バケットを表示すると次のような項目が表示されるので「Webサイトのエンドポイントを使用」をクリックします。
    image.png

  5. その他の設定はデフォルトのまま「ディストリビューションを作成」をクリックします。

  6. 作成が完了するとディストリビューションの一覧に作成したディストリビューションが追加されます。
    　ドメイン名をコピーして、ブラウザの別タブに貼り付けて開きます。
    image.png
    cloudfrontのURLで次のようにページが開けたら、設定完了です。
    ※httpsではなく、httpとなるので注意してください。
    　また、初回は画面の読み込みに時間がかかる場合があります。
    image.png

作成したリソースの削除

cloudfrontの削除

  1. ディストリビューション一覧にて、削除するディストリビューションにチェックを入れ、「無効」をクリックします。ポップアップが表示されるので、「無効」をクリックします。
    image.png

  2. 「削除」ボタンが押せるようになるまで少し時間がかかります。

  3. ディストリビューション一覧にて、削除するディストリビューションにチェックを入れ、「削除」をクリックします。ポップアップが表示されるので「削除」をクリックします。
    image.png

  4. 一覧からなくなっていることを確認し、CloudFrontの削除は完了です。

S3の削除

  1. バケット一覧にて削除するS3を選択し、「空にする」をクリックします。
    image.png

  2. 「完全に削除」と入力し、「空にする」をクリックします。
    image.png

  3. バケット一覧にて削除するS3を選択し、「削除」をクリックします。
    image.png

  4. バケット名を入力し、「バケットを削除」クリックします。
    image.png

  5. 一覧からなくなっていることを確認し、S3の削除は完了です。

cloud9の削除

  1. Cloud9の環境一覧にて、削除する環境を選択し、「Delete」をクリックします。
    image.png

  2. ポップアップが表示されるので「Delete」と入力し、「Delete」クリックします。
    image.png

  3. 一覧からなくなっていることを確認し、Cloud9の削除は完了です。

3
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
Sign upLogin
3
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?