AWSチュートリアル: モジュール 1: 静的ウェブサイトを作成する

AWS (Amazon Web Service) というクラウドサービスが昨今流行りで,就職活動中にもクラウドサービスの経験の有無がよく問われるようになったことを感じた。そこで,クラウドサービスの経験を積むために,AWSで自前のWebサービスを動作させてみる。そのために,AWSのチュートリアルをなぞって,使い方を学ぶ。

AWSのアカウント作成自体は,こちらの「AWS アカウント作成の流れ | AWS」に公式の登録手順があるので,これに従って登録する。

ここでは,公式チュートリアルの「AWS で基本的なウェブアプリケーションを構築する」から,「モジュール 1 – AWS で基本的なウェブアプリケーションを構築する」をなぞり,Amazon S3による静的ウェブサイトの作成方法を学ぶ。

概要

まず,Amazon Simple Storage Service (S3) を設定して静的リソースをホストする。ファイルをAmazon S3に保存するようにする。

Amazon S3での独自ドメインは「Configuring a static website using a custom domain registered with Route 53 – Amazon Simple Storage Service」を参考にする。

S3ではデータを「バケット (bucket)」とよばれるリソース内のオブジェクトとして保存する。そのため,基本的にはこのバケットの設定を行うことになる。

パブリックアクセスでのバケットの作成

まず,Amazon S3コンソールにログインする。

[Create bucket] を選ぶ。

[Create bucket]>[Name and region] 画面が表示される。ここで [Bucket name] にバケット名を入力する。バケット名はAmazon S3全体で共有の名前空間であるため,ドメイン名と同じように一意な名前にする。例えば,今回はsenooken.tutorial1とした。

続いて,[Region] でバケットを配置する地域 (Region) を選ぶ。デフォルトの [Asia Pacific [Tokyo)] のままで問題ない。ここまで入力したら [Next] を選ぶ。

[Configure options] 画面が表示される。チュートリアルでは特に指示がないので,何もせず [Next] を選ぶ。

[Set permissions] 画面が表示される。まず,[Block all public access] の☑を外して,外部からアクセス可能にする。続いて,3番目の [Block public access to buckets and objects granted through new public bucket or access point policies] を☑する。続いて4番目 (一番下) の [Block public and cross-account access to buckets and objects through any public bucket or access point policies] を☑する。

一番上に表示されている公開に関する警告文 [Disabling Block all public access may result in this bucket and the objects within becoming public ] を確認し,[I acknowledge that the current settings may result in this bucket and the objects within becoming public] を☑する。

これにより最終的に以下の通りとなる。

この状態になったら,[Next] を選び,最後の [Review] 画面で右下の [Create bucket] を選んでバケットを作成する。

上記のようにバケットの作成が完了する。

Webサイトのホスト用にバケットを設定

作成したバケットに対して,Webサイトのホスト用の設定を施す。

先ほど作成したバケットを選び,[Properties] タブ>[Static website hosting] を選ぶ。

[Use this bucket to host a website] を選び,入力欄に以下のようにヒントで表示されているファイル名を入力して [Save] を選ぶ。

  • Index document: index.html
  • Error document: error.html

これで静的ウェブサイトホスティングが有効になる。

続いて,[Overview] タブを選び,アップロード用のファイルを作成する。

以下の内容のindex.htmlを作成する。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
    Hello World
</body>
</html>

以下の内容のerror.htmlを作成する。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Error Page</title>
</head>

<body>
    Error Page
</body>
</html>

[Upload] を選び,これらの2ファイルをドラッグドロップする。

[Next] を選ぶ。

[Manage public permissions] から [Grant public read access to this object(s)] を選び,[Upload] を選ぶと以下のようにファイルがアップロードされる。

静的ウェブサイトのテスト

[Overview] に表示されているファイルの内,[index.html] を選ぶ。

[Object URL] の下のリンク (https://s3-ap-northeast-1.amazonaws.com/senooken.tutorial1/index.html) を選ぶと,ファイルの内容 (Hello World) が表示されており,静的Webサイトの動作確認が完了となる。

結論

Amazon S3での静的ウェブサイトの構築方法をなぞった。

基本的にアクセス権限を解除して,ファイルをアップロードするだけの簡単作業だった。

Amazon S3はDropboxのようなオンラインストレージであり,インターネット上に文章を公開する場合は手軽な方法だ。ただ,サーバーを使った処理ができないので,用途は限定的だろう。

ひとまずAmazon S3を用いた静的ウェブサイト構築の基本を学べた。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です