s3静的ホスティング+clouddrontによるhttps通信でリニューアルページを設置する

#目的
既存webサービスをデプロイしている
https://sss.red-miso.work/
のURLを工事中リニューアルページに差し替える

##経緯
**SkateSpotSearch**

というwebサービスをrails+webpackerで作成
aws ecs+circleCI+code3兄弟で構築しておりました。
↓こんな感じで
![SkateSpotSearch_drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/44045190-2e4f-3c5f-b7cf-9d5b181bd13d.png)

**フロントとバックエンドを分離するSPA構築にしたい**
ので、
一旦サービスを停止。
URLはそのままにリニューアルページを差し替えたいと思います。
よろしくお願いいたします。

## リニューアルページを作成しておく
最低限
- index.html
があれば良いですが、今回は勉強も兼ねてvue.jsで簡単に作成してみました。

```text:vueでのリニューアルページ作成
vue create .
npm run serve ==>>(localhost:8080で確認できる)
[画像ファイルと文言を整える]
npm run build ==>> 別ディレクトリ/distが作成されます。これをS3にあげますね！
```
↓localhost:8080で見ると、こんな感じですね！
あ、Canvaというおすすめの
[Canva:ロゴ作成サイト](https://www.canva.com/)
があるのでチェックしてみてください！使いやすいですよ！

![スクリーンショット 2021-02-16 19.57.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/738deaae-cd84-ca4a-d49a-087b624ca2b7.png)

## S3で新規バケット作成〜エンドポイントでアクセス可能にしよう

[AWS S3](https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-1)
↑アクセスして、

1. バケットを作成
![スクリーンショット 2021-02-16 20.01.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/36658f89-1958-b7f8-bfeb-b615e6785afe.png)

2. バケット名を２つ作成(ドメイン名とサブドメイン名を)する。
![スクリーンショット 2021-02-16 20.01.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/ba78e907-3f77-6e74-b68f-8eadc0c937db.png)

- red-miso.work
- sss.red-miso.work


### ドメインとは、
定義域という意味ですが
簡単にいうと
私のURLが
https://sss.red-miso.work
ここでいう
**red-miso.work**
がお名前ドットコムなどで購入したドメインです！

### サブドメインとは、
任意で設定可能で、サイトを拡張していくときなどブランディングができ便利です！
route53にて、レコード作成するタイミングで
**sss.red-miso.workからred-miso.workへ**
とアクセスをマッピングする役割があります。
sssを含む、
**sss.red-miso.work**がサブドメインに当たります。



3. ドメイン名（red-miso.work）バケット内で、[タブ]アクセス許可内の

↓パブリックアクセスができるように変更する
![スクリーンショット 2021-02-16 20.20.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/37f37579-d783-2e06-7f3f-85281d31023f.png)

↓バケットポリシーにポリシー追加する
![スクリーンショット 2021-02-16 20.20.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/635ee439-9f3e-2c0b-0600-eb86d82909df.png)

```text:コピーして使ってね！
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3::: **ここにバケット名を入れましょう** "
        }
    ]
}
```

4. ドメイン名（red-miso.work）のバケット内の[タブ]プロパティ内で、静的ホスティングを設定する

↓編集するをクリック
![スクリーンショット 2021-02-16 20.22.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/22a95292-8959-6394-1377-63165a5ec99b.png)

↓以下の通り、設定しましょう
![スクリーンショット 2021-02-16 20.22.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/cfca7cf3-cca2-5f35-d33a-77a0d91f044f.png)

↓ここで参照するファイル名を大文字小文字正確に入力。
私は今回vue.jsプロジェクト内のindex.htmlを読み込むので、指定します。

エラードキュメントは無くても良さそう。
一応、用意しておきましたね。

![スクリーンショット 2021-02-16 20.23.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/fa86500e-9581-d3ef-4bdb-cb3185680c5e.png)


5. ファイルやフォルダのアップロード
index.htmlやerror.htmlなどをアップロードします。

**これにて、[タブ]プロパティのエンドポイントをクリックすれば表示されているかと思います。**
↓ここ
![スクリーンショット 2021-02-16 20.28.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/e917c44f-fe18-e27e-8bc4-ee03aa334dd4.png)

6. サブドメイン名（sss.red-miso.work）のバケットからも閲覧できるようリダイレクト設定をする
7. 
↓以下の通り、設定しましょう
![スクリーンショット 2021-02-16 20.31.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/706b06c8-261d-d57c-4fd6-039a7af0221c.png)

↓アクセス許可やポリシーを追加せずとも、エンドポイントからアクセスができるようになる
![スクリーンショット 2021-02-16 20.32.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/4babcef8-b754-d51f-581e-4e42fae655e8.png)

## Route53にて、ドメイン名（red-miso.work）のS3エンドポイントへリクエストが流れるようにする。

1. Route53ダッシュボードからドメイン名のホストゾーン内へと移動する

![スクリーンショット 2021-02-16 20.34.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/eccd70db-bff3-e7dd-aba6-ddfc95e67ba7.png)
![スクリーンショット 2021-02-16 20.35.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/c322bbe7-40d8-4dc9-d652-e4ce1c11114e.png)

2. レコードの作成

![スクリーンショット 2021-02-16 20.35.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/41b00d2a-1020-db93-b62d-82336ff0d079.png)

↓ここはデフォルト
![スクリーンショット 2021-02-16 20.37.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/bbb62c77-8407-7177-a523-5fc5de051484.png)

↓ここもデフォルトのAタイプを選択
![スクリーンショット 2021-02-16 20.37.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/fe63fe3c-335b-d41f-f217-608b7aa30b3b.png)

↓トラフィックはエイリアスをONに、S3を選択、リージョンを選択、バケット名（ドメイン名）を選択
![スクリーンショット 2021-02-16 20.37.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/881dc1f2-500d-af9c-4628-ccaa081ea4c9.png)

↓シンプルで
![スクリーンショット 2021-02-16 20.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/a5f0dbed-1c7e-cbf2-c6e7-732ba88dfef8.png)

↓OFFに
![スクリーンショット 2021-02-16 20.39.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/a677d764-7862-528c-f472-cfe07457a9a4.png)

以上でレコード作成

**http://red-miso.work**
で閲覧可能となる

## Route53にて、サブドメイン名(sss.red-miso.work)のS3エンドポイントへリクエストが流れるようにする。

＊もし、既存のサブドメイン名のレコードが定義されている場合は削除してから再作成しましょう。

1. レコード作成
↓sssというサブドメインを追加
![スクリーンショット 2021-02-16 20.45.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/865ff351-af44-d033-7e4e-bb23d66bad6c.png)

↓すると、s3バケット名選択肢にsss.red-miso.workが現れる
![スクリーンショット 2021-02-16 20.45.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/d01ab849-ec4e-6e72-b945-15d17efad4e7.png)

以上でレコード作成

**http://sss.red-miso.work**
で閲覧可能となる

# https通信にする。
**cloudfront**を使用する

1. [cloudfrontページ](https://console.aws.amazon.com/cloudfront/home)
にアクセスする。

2. ディストリビューションの作成〜
![スクリーンショット 2021-02-16 20.54.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/e61d8972-ca56-f1ca-0de6-81c090f6319c.png)

↓オリジンドメイン名として、ドメイン名（red-miso.workから始まるs3バケットを選択）
![スクリーンショット 2021-02-16 20.54.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/737a33fd-9ef7-d2a9-5e1b-17426b3fe799.png)

↓他の設定は触らず、代替ドメイン名にドメイン（red-miso.work）を入力。
![スクリーンショット 2021-02-16 20.58.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/32b0485a-8bde-40fd-aa16-4ca985255659.png)

↓一度、AWS ACMで証明書の要求が必要なのでクリック
![スクリーンショット 2021-02-16 20.59.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/4aec375a-3ca8-c68b-3d1d-ba937441f8a2.png)

↓ドメイン名（red-miso.workを入力）
![スクリーンショット 2021-02-16 21.00.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/59468b89-381c-8885-673b-292c1c096156.png)

↓Route53内のドメイン内に、レコードを作成して認証する。
![スクリーンショット 2021-02-16 21.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/80cffdcd-fea5-0bef-eac7-d21aef2e08ff.png)

↓確定とリクエストし、次画面で認証しましょう。
![スクリーンショット 2021-02-16 21.02.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/a8f32cdd-b149-b37b-04b6-76dc986d8d1b.png)

↓ACMで証明書の要求が完了すれば、SSL証明選択できる。
![スクリーンショット 2021-02-16 21.03.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449720/6d637bec-7db2-269b-4f39-b5be50133f0c.png)

以上で、cloudfrontディストリビューションを作成。

**https://sss.red-miso.work**
https化が成功し、アクセスができるようになる。

最後まで、閲覧ありがとうございました！

あとは、SPA化できるようにするだけだな〜