# 暮らしステーションサブディレクトリの配置について
Amplifyの前段にCloudfrontを構える設定をした事例から同じことができるのか実験する。
[参照の事例](https://qiita.com/w2or3w/items/1b2fdc5cc88298fd059f)
↑のようにすることで表示ができるのではないかと判断してテストをしてみる。
今回は影響範囲が大きすぎる（カスタムドメインの消去、Route53からも消去する）ために自分のプライベートアカウントでテストを行った。
### 実験
暮らしステーションはデフォルトの設定でネットワークの作成をしていると予想できるので、その方法を真似してAmplifyネットワークを作成する。
testの配下にサブディレクトリのAmplifyサイトを配置する。
#### 結果
403エラーとなってアクセスが阻止されてしまう。
URLの書き換えなどは確認できなかったので、CDNが流した先で403エラーを返されたことになる。
Amplifyによって403を返された可能性は高い。
デフォルトでは、参照事例と同じなので、エラーがなくファイルの取得が成功する。
#### 問題点、まとめ
結果は特定のドメインの依存は解決できるが、階層を下げることでしか全てを表示することはできなそう。
ネットワークの中をどのように識別するかで考えると、URLがその識別子に当たります。
Amplifyが生成しているドメインに到達すれば確かに表示はできるが、その場合。
ソースコードまたは、lambdaで指定されているURLは階層が1つ上になります。(例えば、Clossdomain)
こちらの問題は階層を下げるか地道に階層が上にあるURLの書き換えをしていくしか表示はできない。
追記
↓はAmplifyのデフォルトの設定でできるCDNです。
暮らしステーションはCDNがAmplifyによって作成されるので暮らしステーションのネットワークはカスタマイズをしていると思います。
[Amplify公式](https://docs.amplify.aws/cli/hosting#custom-domain-redirects-and-more)
Amazon S3 and Amazon Cloudfront
の設定でサイトをホスティングしている可能性が高いです。
#### 階層を結局下げて表示しないといけない。
例えばAmplifyの表示されるiconがroot/favicon.iconだった場合。
CloudfrontでAmplifyに流すだけでは、favicon.iconが上の階層にアクセスしてしまう。
↓がその様子で、表示のfavicon.iconは上の階層のiconを取得してしまってる。
また、今回の事例でも、階層が下がった場合にのみ表示ができていない。
Cloudfrontは階層を跨いでコンテンツの取得ができないので、Amplifyのドメインに直接アクセスしようとも、Cloudfrontが1階層上のコンテンツを探っている可能性はある。
現時点で要件を満たすためには、階層を↓によって階層を直接下げる方法のみが検討できる方法です。
https://aws.amazon.com/jp/blogs/mobile/deploy-a-vuejs-app-with-aws-amplify-console-using-cloudformation/
#### 相談したいこと。
- Cloudformationでしか、階層を下げる方法はないのか？
（自分が調べた限りはCloudformmationの方法しかなかったので何かアドバイスが欲しい。）
- コンパスさんにデプロイの手法を聞きたい。
S3, Cloudfrontのワークフローでのデプロイをしているのか確証がない。
AmplifyのソースコードをCloudformationを使ってデプロイした事例は調べたところ見つかってないです。
[Cloudformation amplifyのドキュメント](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/AWS_Amplify.html)
## 今後どのように進めるのか？
Cloudformation→Amplify consoleを使うことはできる。
[事例としてもある。](https://qiita.com/eijikominami/items/2ab3be0ed9417fe39d65)
[公式でも初回されている。](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-resource-amplify-app.html)
Amplify→Cloudformationをいじる方法は事例が発見できていない。
codeで行っていることは、使用するリソースの指定をしている。
実際のプロビジョニンング↓はAmplifyのSDKが自動的にCloudformationを作成している。
```
"StackId": "arn:aws:cloudformation:ap-northeast-1:697218682574:stack/amplify-lifestation-prod-134831/45f83260-cf27-11eb-9221-0a949bedb38d"
```
考えられる方法
1
amplify.ymlでbuildの設定ができるからここで行う。
これができるのであれば簡単にできそう。
build時のコマンドの設定などをしているので、ここでカスタマイズできるのかはわからない。
2
cloudformationのプロビジョニングを自分で行い。
ARNをamplify/team-provider-info.jsonにスイッチしてしまう。
しかし、こちらの方法は全てが理解できていないが、おそらくサポートしていなさそう。
[参考](https://github.com/aws-amplify/amplify-cli/issues/4233)
3
Cloudformationをトリガーにできるように書き換える。
### Amplify
暮らしステーションがもしAmplify CLIを使用している場合。
↓のテンプレートでデプロイを行っているはず。
こちらを変更する方法はないか？
（例えば、amplify.ymlでここを変更できるとか）
そもそも階層下げる場合には、Defult(*)に何を持ってくるか問題
Defult(*)は絶対に必要で空はできない。
https://github.com/aws-amplify/amplify-cli/blob/master/packages/amplify-category-hosting/lib/S3AndCloudFront/template.json
cloudformation (multiple originのテンプレート)
```
{
"AWSTemplateFormatVersion" : "2010-09-09",
"Resources" : {
"myDistribution" : {
"Type" : "AWS::CloudFront::Distribution",
"Properties" : {
"DistributionConfig" : {
"Origins" : [ {
"Id" : "myS3Origin",
"DomainName" : "mybucket.s3.amazonaws.com",
"S3OriginConfig" : {
"OriginAccessIdentity" : "origin-access-identity/cloudfront/E127EXAMPLE51Z"
}
},
{
"Id" : "myCustomOrigin",
"DomainName" : "www.example.com",
"CustomOriginConfig" : {
"HTTPPort" : "80",
"HTTPSPort" : "443",
"OriginProtocolPolicy" : "http-only"
}
}
],
"Enabled" : "true",
"Comment" : "Some comment",
"DefaultRootObject" : "index.html",
"Logging" : {
"IncludeCookies" : "true",
"Bucket" : "mylogs.s3.amazonaws.com",
"Prefix" : "myprefix"
},
"Aliases" : [ "mysite.example.com", "yoursite.example.com" ],
"DefaultCacheBehavior" : {
"TargetOriginId" : "myS3Origin",
"ForwardedValues" : {
"QueryString" : "false",
"Cookies" : { "Forward" : "all" }
},
"TrustedSigners" : [ "1234567890EX", "1234567891EX" ],
"ViewerProtocolPolicy" : "allow-all",
"MinTTL" : "100",
"SmoothStreaming" : "true"
},
"CacheBehaviors" : [ {
"AllowedMethods" : [ "DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT" ],
"TargetOriginId" : "myS3Origin",
"ForwardedValues" : {
"QueryString" : "true",
"Cookies" : { "Forward" : "none" }
},
"TrustedSigners" : [ "1234567890EX", "1234567891EX" ],
"ViewerProtocolPolicy" : "allow-all",
"MinTTL" : "50",
"PathPattern" : "images1/*.jpg"
},
{
"AllowedMethods" : [ "DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT" ],
"TargetOriginId" : "myCustomOrigin",
"ForwardedValues" : {
"QueryString" : "true",
"Cookies" : { "Forward" : "none" }
},
"TrustedSigners" : [ "1234567890EX", "1234567891EX" ],
"ViewerProtocolPolicy" : "allow-all",
"MinTTL" : "50",
"PathPattern" : "images2/*.jpg"
}
],
"CustomErrorResponses" : [ {
"ErrorCode" : "404",
"ResponsePagePath" : "/error-pages/404.html",
"ResponseCode" : "200",
"ErrorCachingMinTTL" : "30"
} ],
"PriceClass" : "PriceClass_All",
"ViewerCertificate" : { "CloudFrontDefaultCertificate" : "true" }
}
}
}
}
}
```
### 使い方
↓イメージ図
- 暮らしステーションの構成をCloudformationで構築しなおす。
デプロイしたインフラストラクチャーを移行する。
定義が完成したら、それをアップロードする形でもプロビジョニングできる。
Sign in with Wallet
Connect another wallet