2021-03-27

CloudFront S3のURLにリダイレクトされる

最近よく使うのがCloudFrontとS3の組み合わせです。
WebsitehostingでAngularやVueを公開したい時に便利なんですよね．

仕事でも案件の最初に作ってって言われること多いんですよね。

PM「作っといて～」
自分「はーい」

実際、難しいことは特にないんですよ。
S3のバケット作って、CloudFrontの設定して、
バケットポリシー設定して、、、終わる話ですもん(っ´ω`c)
ただ、どこかで設定をミスっていたりすると
原因が分かりづらいのがこの作業の面倒なところだと思います。

作業手順書を作って、
誰でも作成できるようにしといたとしても
どこかの設定ミスがあったら、S3に到達できなかったり
誰でもアクセスできるような設定になってしまいますよね。
そこでTerraformで一括で作成できるようにしました。
Terraformについては別で記事を書きます。

前置き長くなりましたが、本題です。
いざ、CloudFrontで自動生成されたドメインからアクセスしようとしたら、
S3のWebSitehostingのURLに変わってました・・・(ﾟ∀ﾟ)ﾅﾝﾃﾞ!?

今まで通り作っているはずなのにどうして！？←Terraformで初めて作ったので今まで通りではない。
調べるとS3のバケットが全てのリージョンに反映されるまで１日かかることがあることが判明しました！

正直こんなの初めて知りました。(ﾟ∀ﾟ)←まじこんな
未反映のリージョンでアクセスがあるとデフォルトURL(s3.amazonaws.com)が返されるため、
仕方なく、S3のURLにリダイレクトがかかるとのことでした。

なので、CloudFrontのOrigin Pathに
「<バケット名>.s3-(S3を作成したリージョン).amazonaws.com」を設定すると
勝手なリダイレクトがかからずにCloudFrontのドメインのままアクセスが可能になります。
Ex.東京リージョンなら、「<バケット名>.s3-ap-northeast-1.amazonaws.com」

こんなの普段作成するだけだったら全然気づかないところですね…(ﾟ∀ﾟ)

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

要点整理から攻略する『AWS認定セキュリティ-専門知識』【電子書籍】[ NRIネットコム株式会社 ]
価格：3718円 (2021/3/27時点)

楽天で購入

2021-03-21

Angularで右側からサイドバーを出したいとき

AngularでWebアプリを作成中に
他の機能も追加したいので、
メニューバーを表示させたいなって思いました。

スマホでしか使わない予定なので、
右利きの自分に合わせて
右上のメニューボタンを押すと
右からスッとメニューが出てくるイメージです。
というわけで早速ググってコピペしようと思ったのですが、、、

(ﾟ∀ﾟ)・・・？

ほとんどのサンプルは左上にメニューボタンがあって、
左からスッとメニューが出てきます。
（PCだったら確かにこっちが自然ですよね。）

というわけで、
右側からスッと出すためのメニューの作成手順を記載します。

１．npm install

npm install --save @angular/material @angular/cdk

2.マテリアルの追加

ng add @angular/material

3.コンポーネントの追加

ng generate @angular/material:material-nav --name=sidenav

4.追加したコンポーネントをapp.component.htmlに記載

<app-sidenav></app-sidenav>

※元々app.component.htmlに記載していた内容は
新しく追加したsidenav.component.htmlの
「add component here！」に転記します。

5.sidenav.component.htmlのmat-sidenavタブに
position="end"を追加します。
後はCSSでボタンを右端に移動させたら、完成です。

  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false"
      position="end">