# フロントエンド本番環境への移行手順書

前提：
- 現在本番環境が稼働している。
- Cloudfront（Distribution ID E1OYUOPMLY2ESK）に暮らしステーションはデプロイをすることになる。
- Behaviorsによって暮らしステーション<https://www.happy-bears.com/llife-station/>に振り分けを行う。
- 暮らしステーションはS3にパス移行を向ければOK
- サブディレクトリの場合はURL末尾にindex.htmlの付与をしないといけない。
- リクエストに Origin: hostを付与しないといけない。
- 返すレスポンスにAccess-Control-Allow-Origin: *を付与させる。
- URLの正規化をする。<www.happy-bears.com/llife-station/>に一意に統一する。

↑要件を満たす。

### Cloudfront
- Behaviorsに/llife-station＊を設定すれば終わりで、ここにあらかじめに作成している。CloudfrontFunctionの関数をアタッチすればいい。
- S3コンテンツの配置＞Behaviorsの設定＞index.htmlの関数のアタッチをする。
- トリガーを二つ設定して、そのトリガー二つに関数をアタッチ。
- レスポンスに関しては、クロスオリジンの設定をする関数をアタッチしておく。

## 本番当日の手順。
1.　時間はいつでも良い。（影響範囲が、www.happy-bears.com/llife-station/ のURLパスが表示されない程度であるから。）
2.　S3のバケットポリシーを全て非公開にして、許可ポリシーを追加

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E1EOIOJ2J6NK3B"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::kurashi-staging-s3/*"
        }
    ]
}

3. OAIをDistribution ID E1OYUOPMLY2ESKで発行してそれをS3のポリシーに追加する。
4. Cloudfrontのオリジンの登録をする。S3のarn
5. Behaviorsに追加しよう。/llife-station*>>S3origin
6. Cloudfront Functionのコンソール画面にいき関数の登録をする。
7. テストで考えられるパターンを全て試す。
7.1 正規化の部分では
↓のDmainに関して試す。

www.happy-bears.com/lifestation/
happy-bears.com/lifestation/
happy-bears.com/lifestation
www.happy-bears.com/lifestation

7.2 index.htmlの検証。
Webの静的コンテンツに対しては、index.htmlの付与がついているのかを確認しないといけない。

7.3 origin:hostの設定を確認する。

7.4 Responseにオリジンヘッダーが付与されているのかを検証する。

 Access-Control-Allow-Origin: *

8. 挙動の検証。
10. Behaviorsの編集を押して、作成した、関数をアタッチする。
11. 少し待ち、Cloudfrontの状態が通常になったら、<www.happy-bears.com/llife-station/>にアクセス。
12. 動作確認後終了。
13. 問題がある場合は現稼働のサイトを確認して影響があるかを確認する。
14. 影響がある場合は設定を一旦戻す。
15. 影響がない場合は原因の特定をする。
16. トラブルシュート
17. 疎通確認が取れるまで11から繰り返す。
18. 完了

### 問題が起きた場合

#### 考えられる失敗。
- 現稼働コーポレートサイトに影響がすることは基本ないと思う。
- なので、考えられる失敗としては、403かクロスオリジンということになる。
- 暮らしステーションが表示されないということのみである。
-　index.htmlの付与がうまくできていない場合も考えられる。

#### トラブルシュート
リクエストID値を控えておく
X-Amz-Cf-Id ヘッダーの値、S3 へ直接アクセスされた際の x-amz-request-id ヘッダー、x-amz-id-2 ヘッダーの値。
これらの値をAWSサポートに投げて現状の解析をしてもらう。

Location
	https://www.kurashidemo.happy-bears.com/ 
Server
	CloudFront
Via
	1.1 06f6824c0d57ccd48408cb017c7bce76.cloudfront.net (CloudFront)
X-Amz-Cf-Id
	D175cfWebiKmK-mBVLCBLiX4gN5uEu3nbpg3aIgX-TYh5FRFyoVcng==
X-Amz-Cf-Pop
	NRT12-C2
X-Cache
	Redirect from cloudfront

まずは疎通の確認をする。

DNS周りの名前解決

dig +noall +ans www.happy-bears.com/llife-station/

一応Cuelもしておく

curl -sLI www.happy-bears.com/llife-station/

[Amazon S3 から HTTP 403: Access Denied エラーをトラブルシューティングする](
https://aws.amazon.com/jp/premiumsupport/knowledge-center/s3-troubleshoot-403/)

[CloudFront がデフォルトのルートオブジェクトを返さない場合のトラブルシューティング](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-default-root-object-subdirectory/)
↑基本的にはS3かクラウドフロントで跳ね返されることがほとんどであるからこちらのどれに当てはまるかでトラブルシュートを行うのがいい。