概要
本書ではS3のバケットにHTMLをアップロードし、バケットに配置したHTMLをインターネット上に公開できるように設定します。
0. 事前準備
- AWSのアカウントを作成していること。
- VSCodeなどのHTMLファイルを作成するエディターをインストールしていること。
※本書ではWindows10を使用します。
1. HTMLファイルの作成
S3でHTMLを公開するためには「index.html」「error.html」のファイルが最低限必要です。VSCodeなどのエディターで「index.html」「error.html」を作成します。本書では下記の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>
<!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バケットの作成
-
AWSにログインし「サービス」→「S3」をクリックする。
-
「バケットを作成する」をクリックする。
-
「名前とリージョン」画面にて下記の内容を入力し、「次へ」をクリックする。
- バケット名 : (任意の名称を入力)
- リージョン : アジアパシフィック(東京)
-
「プロパティ」画面にて設定する内容がなければ「次へ」をクリックする。
-
「ブロックパブリックアクセス(バケット設定)」画面にて「パブリックアクセスをすべてブロック」のチェックを外し「次へ」をクリックする。
-
確認画面が表示されるので「バケットを作成」をクリックする。
-
バケットが作成されたことを確認する。
3. HTMLファイルの配置
-
作成したバケットをクリックする。
-
「アップロード」をクリックする。
-
作成したHTMLファイルを追加する。
-
「index.html」「error.html」ファイルが選択されていることを確認し「次へ」をクリックする。
-
アクセス許可設定画面にて下記の内容を選択し「次へ」をクリックする。
- パブリックアクセス許可を管理する : このオブジェクトにパブリック読み取りアクセス権限を付与する
-
「ストレージクラス」画面にて「スタンダード」を選択し、「次へ」をクリックする。
-
確認画面が表示されるので「アップロード」をクリックする。
-
「index.html」「error.html」がアップロードされたことを確認する。
4. Static website hostingの有効化
-
上部メニューから「プロパティ」をクリックする。
-
「Static website hosting」をクリックする。
-
「このバケットを使用してウェブサイトをホストする」を選択し、下記の内容を入力する。その後「保存」をクリックする。
- インデックスドキュメント : index.html
- エラードキュメント : error.html
- 「パケットホスティング」にチェックマークが付いたことを確認する。
5. HTMLの公開設定
-
3章でアップロードしたHTMLファイルを選択し「アクション」をクリックする。
-
「公開」をクリックする。
-
確認画面が表示されるので「公開する」をクリックする。
6. HTMLの確認
-
4章の「Static website hosting」画面を表示し、「エンドポイント」に記載されているリンクを任意のブラウザに貼り付ける。
-
アップロードしたindex.htmlが表示されたことを確認する。
-
S3バケットに存在しないリンク先を入力し、error.htmlが表示されたことを確認する。
最後に
S3の「Static website hosting」機能を使用することでS3バケットにアップロードしたHTMLファイルをインターネット上に公開することができます。これによって簡単なホームページやポートフォリオの公開ができます。