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ファイルをバケットで公開した。