Chapter3(番外) s3のバケットでHTMLとCSSファイルの公開

今回は、Chapter3で用いたCLIバケットを用いて、HTMLファイル及びCSSファイルを公開した。

HTML、CSSファイルの準備

まずは、HTMLファイルとCSSファイルを準備する。今回は、以下のHTML、CSSファイルを用いる。

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="boxA">
            <div class="header1">
                header(left)
            </div>
            <div class="header2">
                header(right)
            </div>
        </div>
        <div class="boxB">
            <div class="box1">
                <div class="box1-1">
                    menuber1
                </div>
                <div class="box1-2">
                    menuber
                </div>
                <div class="box1-1">
                    menube2
                </div>
            </div>
            <div class="box2">
                <div class="box2-1">
                    title
                </div>
                <div class="box2-2">
                    Hello World!
                    <br>I love Iketani Ran.
                </div>
            </div>
        </div>
        
    </body>
</html>

CSSファイル

.boxA::after {
    content: "";
    display: block;
    clear: both;
  }
.boxB::after {
    content: "";
    display: block;
    clear: both;
  }
.header1	{float: left;
	width: auto}
.header2	{float: right;
    width: auto}
.boxA {padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 40px;
    font-weight: bold;
    color:#ff9100;
    background-color: rgb(255, 217, 0);
}
.boxB {
    padding-top:20px;
}
.box1	{
    float: left;
    border:soild;
    width: 200px;
    border: 4px solid;
    border-color:#a5a5a5;
    padding-right: 5px;
    padding-bottom: 100%;
}
.box1-1 {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 100%;
    font-size: 30px;
    font-weight: bold;
    color:#ff9100;
    background-color: rgb(255, 217, 0);
}
.box1-2 {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}
.box2	{float: left;
    width: 83%;
    padding-left: 20px;
}
.box2-1	{padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right:100%;
    background-color: rgb(255, 217, 0);
    color:#ff9100;
    font-size: 30px;
    font-weight: bold;
}
.box2-2	{padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;}

これをブラウザで表示すると、このように表示される。これを、バケットで表示する。

バケットの作成

次は、Chapter3と同じ方法でバケットを作成する。今回は、ir604というバケットを用意した。

そして、念のためバケット一覧を確認し、ir604バケットがあることを確認した。

HTML、CSSファイルのアップロード

準備は整ったため、早速アップロードを行う。まず、htmlファイルとcssファイルが存在する箇所まで移動。

その後、両方のファイルを同じバケットにアップロードした。これも、Chapter3でやったことと同じ方法で行う。

これでアップロードされたはずなので、早速バケットを覗いてみる。htmlファイルとcssファイルがアップロードされていることが確認できた。

ついでにUbuntuの方でも確認してみた。こちらもChapter3と同じ方法で確認することが可能である。

HTMLファイルの表示

これで、アップロードも終わったため、早速、オブジェクトURLにアクセスし、ファイルを表示してみる。

すると、このような表示がされた。

どうやら、アクセス許可をどうにかする必要があるとのことなので、バケット詳細ページまで戻り、アクセス許可のタブをチェックする。

まず、最初にチェックする箇所は、ブロックパブリックアクセスのページである。もしこれがすべてブロックにチェックが入っていれば、全て外しておく。今回は、チェックは入っていなかったため、このまま変更を保存した。

次にチェックする箇所は、バケットポリシーである。ここで、公開設定などを設定する。

早速ポリシー編集画面にアクセスし、以下のようなコードを追加した。

バケット名の箇所には、作成したバケットであるir604の名前を入れた。

すると、アクセス許可状態が公開に変化した。

この状態で再度オブジェクトURLにアクセスした。すると、以下のような表示がされ、HTMLファイル及び、CSSファイルが公開されていることが確認できた。

バケット内のファイルのダウンロード

おまけとしてバケットにアップロードしたファイルをダウンロードする方法を試してみる。非常に単純で、

とすれば、バケットにアップロードしたファイルをすべてインストールすることができる。実際に実行してみると、以下のように表示された。これで、ダウンロードされたことが確認できた。

バケットの削除

やることは終わったため、バケットを削除する。こちらもChapter3と同じ方法でバケットを削除した。こうして、HTMLファイルとCSSファイルをバケットで公開した。