15分で可用性・耐久性の高い静的WEBサイトを立ち上げる（独自ドメイン）

こんにちは WEB開発チームの山川です！

今日は簡単に、かつ、可用性に優れた静的WEBサイトを立ち上げる方法を説明しようと思います。
プログラム書くの苦手なんだよな～って人でも簡単にできると思うので、そういった方もぜひ読んでみてください！

#こんな人はぜひ読んでみて
独自ドメインの静的WEBサイト急いで作りたいけど
・サーバーの設定（OS/MWのインストール）・管理をしたくない。
・プログラム・コマンド操作が苦手。
・可用性・耐久性を高くしたい！けど、アクセスが少ないときは安くしておきたい（スケーラビリティ）

という方はぜひご覧ください！

#事前準備
・ドメインの取得（今回はお名前.com）
・AWSアカウント


#どうやって作るのか
今回の記事の肝ですが、AWSの『Amazon S3』を使うことで実現します。
『Amazon S3』はAWSが提供しているオブジェクトストレージで、高い耐久性(99.999999999%)とスケーラビリティが魅力です。

#手順
15分以内目指してスタート:timer:!!
##１．S3にバケットを作る
1.1. まず検索画面にて「S3」と検索しS3を選びます。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/defabba6-dd93-3579-f234-3bbce3ea5800.png)



1.2.「バケットの作成」を押下します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/092d1fda-ec30-dd90-6f63-e75c5e961fcb.png)


1.3. バケット名を入力します。
インターネットに公開する必要がありますが、この時点では「パブリックアクセスをすべてブロック」のチェックはつけた状態とします。  
<font color="Red">
※注意 : 独自ドメインを設定する予定の人は、ドメイン名をバケット名としてください。例えば「yamakawasota~~~.jp」というバケット名などです。後で、Route53のホストゾーン設定のときに連携できなくなってしまいます。
</font>
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/1e0b4c49-595e-e63c-91d4-c11452b605dc.png)


1.4. このまま作成します。

##２．ファイルをアップロードする
2.1. 作成したバケット名を押下します。
![20200419135936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/0b21d199-3103-9e5a-99f7-fa05d63fb9b7.png)


2.2. 「概要」タブの「アップロード」を押下します。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/98c20f41-833b-3b73-aa90-60cab4636d1f.png)


2.3. 静的ファイル（html）をアップロードします。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/c1b29af2-b8e6-0cc9-b31d-8460ec658241.png)


##３．ブロックパブリックアクセスを設定する
3.1. 「アクセス権限」タブを開き、「ブロックパブリックアクセス」を押下します。

「編集」から、チェックボックスを外します。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/250a13b8-98d1-5023-8642-934ffcb4dccf.png)



3.2. 「確認」と入力を求められるので、入力します。

 

##４．バケットポリシーを設定する
4.1. 「アクセス権限」タブを開き、「バケットポリシー」を押下します。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/09dde668-93f7-e268-00a7-b6cacebe4b89.png)


4.2. 下記のポリシーを入力します。※バケット名のところは自分のバケット名に直してください。

```
{
   "Version":"2012-10-17",
   "Statement":[{
    "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
      "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::バケット名/*"
       ]
     }
   ]
 }
```

##５．Webサイトホスティング機能をONにする
5.1. 「プロパティ」タブから「Static website hosting」を押下します。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/9a250ab0-0bfa-8897-ae0f-564b23fe06e7.png)


5.2. 「このバケットを使用してウェブサイトをホストする」にチェックをつけて「インデックスドキュメント」にindex.htmlと入力します。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f313232333335352f33343537373730392d36336133.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/d1224e2f-c56f-d925-d299-796c647ba978.png)



##６．確認
6.1. 手順２でアップロードしたindex.htmlを押下します。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/9ba07f67-cf72-357b-e3d8-28bddaf4fdfe.png)


6.2. オブジェクト URLを押下します。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/788e4ba8-526c-70f1-0540-563270d92992.png)


6.3. サイトが表示されたら、公開完了です！

**ここまでで大体、7分〜10分ぐらい:timer:！**

ただ、そのままでは、URLが「～s3-website-ap-northeast-1.amazonaws.com」みたいな感じになっているので、独自ドメインにしたいと思います。

##７.Route53側の設定
7.1. 「ホストゾーンの作成」を押下します。  
以下の内容で設定し、「作成」を押下します。  

| 項目名 | 設定値 |
|:-:|:-:|
|ドメイン名| 取得したドメイン名（サブドメインを設定する場合はここでサブドメインを設定） |
|コメント| 未入力でOK |
|タイプ|パブリックホストゾーン|

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/61a0b968-9659-c485-e359-7898d9f7d240.png)


7.2. 「レコードセットの作成」を押下します。  
以下の設定を行い「作成」を押下します。  

|項目名|設定値|
|:-:|:-:|
|名前| サブドメインを設定しない場合は未入力でOK |
|タイプ| A - IPv4 アドレス  |
|エイリアス| はい（Yes）   |
|エイリアス先| カーソルを合わると「S3ウェブサイトホスティング」にS3のバケット名が表示されていますので選択 |
その他の設定項目もデフォルトのままとします。  

<font color="Red">※注意 ： バケット名がお名前.comで取得したドメイン名と一致しない場合は、選択対象に出てきません。 バケット名はお名前.comで取得したドメイン名にする必要があります。</span>

##８.お名前.com側の設定
8.1. 「ドメイン」タブを選択して、サイドバーから「ネームサーバーの変更」を選択します。

8.2.  ネームサーバーの設定を選択します。

8.3. 「ネームサーバーの選択」から「その他」を選びます。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/bfa98d0c-7084-b863-f953-0ad8c59dfb42.png)
8.4. 「その他のネームサーバーを使う」にチェックをつけて、Route53の画面に戻り、NSレコードの値をコピーします。
![sss.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1223355/5c56c9af-19c6-e899-f662-15ef51e3f031.jpeg)

8.5. お名前.com側にすべてのネームサーバーをコピーしたら「確認」を押下し完了です。
<font color="Red">
※注意 : ネームサーバーの末尾についているドット（.）は消さないとエラーになります。
</font>

8.6. これで登録は完了です！

**ここまでの作業で15分ぐらい:timer:！！**

少しタイムラグはありますが、アクセスすると繋がります。


#おわりに
『Amazon S3』を使ったWEBサイトを作る方法を説明しました。
芸能人とかが、謝罪文書（PDF）をインターネットに公開したりするときに、アクセスが集中してダウンしたとかいう話もあるので、そんなものは、『Amazon S3』にPDFをアップしてしまえばすぐに、高い耐久性・可用性を実現できちゃいます！
使わない場合は月100円程度でおさまるのでいいですが、従量課金で金額は上がるため、金額を抑えたい場合は、制御をかけた方がいいと思います。

最後まで読んでいただきありがとうございました！！