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

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

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

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

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

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

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

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

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

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

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




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

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

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

(゚∀゚)・・・?

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

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

1.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">


こんな簡単におしゃれなサイドバーが出来るのって
かなりすごいですよね(っ´ω`c)


【s3】不明なエラー

S3で初めてWebSiteHostingやろうとしまして、
S3のコンソールを開いて、バケット作って、、、、

、、、あれ?(∩´∀`)∩

バケット一覧のところが「不明なエラー」になってる・・・。
あ、権限足りないのか。
IAMにS3FullAccess追加して、もっかいトライ!

、、、、あれ?(*´▽`*)

「不明なエラー」続いている。。。
よくよく見たら他のサービスでもこうなってる(´;ω;`)ウゥゥ
権限も正しいのニおかしくない?
ここまで来て思い出しました。

そういえばrootアカウントの設定って終わってたっけ?

rootアカウントでも見れない!というか登録を依頼された!
結局、rootアカウントで登録が終わっていないことが原因でした!
rootアカウントで適当なサービスにアクセスすると登録画面が出てくるので、試しましょう!

※IAMはなぜか登録画面が出てこないので、
 注意してください。(気づけなかった理由)


アサヒ生ジョッキ缶

花粉が厳しい季節ですね〜(´・ω・`)
例年鼻がめちゃくちゃ来るんですが
今年は喉と頭がやられて辛いです…(´・ω・`)

3月、4月は辛い期間になりそうですが、
今年初旬から楽しみなニュースを見ました(๑•﹏•)

4月からアサヒの生ジョッキ缶が販売になります♪
ビールがよりもハイボール派の方でも
開けた瞬間に泡が発生するのは
見てみたいもんじゃないでしょうか!(っ´ω`c)!

(*・~・*)<別に普通の缶ビールをグラスに注げはいいんじゃない?

バカおっしゃい!(╯°□°)╯︵ ┻━┻
例えグラスで入れたとしても
店で飲むビールと家で飲むビールでは
何かが違うんじゃ(っ´ω`c)!

何か…特別な何かがあるはずなんです
今回の生ジョッキ缶がこの特別な何かを補うとは限らないですが
宅飲みに飽きてしまった方は
ぜひ購入して新しいビールに驚いてくださいΣ(っ´ω`c)

typescriptをコマンドプロンプトで実行

.jsをコマンドプロンプトで実行する時みたいに

node xxx.js

でtypescriptを実行したい時はないでしょうか?

typescriptの動きを少し実験したいだけなのに、
Angularでng new xxxxxみたいにアプリをわざわざ作るのなんて面倒ですよね。

そこでコマンドプロンプトで実行するための
手順を下記に記載します。

0.Nodejsをインストールします。
https://nodejs.org/ja/download/

1.コマンドプロンプトで以下を実行

npm install -g typescript

コマンドプロンプトで.tsファイルを実行

tsc xxxx.ts

これだけで実行できます。
簡単にtypescriptの動作を確認するだけだったら
これだけで済みますΣ(っ´ω`c)

Power Automate Desktop 触ってみた

Power Automate Desktopが無償化されたことで実際に触ってみました。

昔UiPathを少しだけ触ってRPAを学びました。
あの時はプログラムを組んだほうが確実な動作をするし,
フローを作るのも慣れないと機能がありすぎてめんどいなって思いました…。
作るのも面倒な上に費用も結構高いとか…。

だけど、Power Automate Desktopは
AzureやOutlookとも連携が出来る上に
他のRPA製品と変わらないレコーディング機能があるので、
相当便利だと思います。

もちろん、確実な動作をするには
プログラムを組んだり、CLIで操作する方がいいです。
ただ、どうしてもコマンドベースで作業できないこともありますよね。
それに対してRPAにできるかを試せますし、
今後応用をきかせやすいですね。

Power Automate Desktop 入門

Power Automate Desktop 入門

【勉強】勉強する前に…

大学受験でも,社会人になってからも
勉強しないといけなくて辛いですね(っ´ω`c)。
限られた時間の中で勉強スケジュールを決めて、
目標を決めてコツコツ勉強していく…。

目標に届かなかったり,スケジュール通りできなくて
挫折することもあるんじゃないでしょうか?

予定通り進まないのは当然なんです。
勉強している範囲がたまたま不得意範囲だったり,
勉強以外でやらないといけないことがあって
スケジュール通りできなかったり…。

だから上手くいかないことを想定して
目標やスケジュールを決めなきゃいけないんです。
例えば、少し高めの目標にしたり、
少し短めのスケジュールにして、上手くいかなくても余裕が持てるようにするんです。

何のために高い目標にしておくか、
何のためにタイトなスケジュールを立てるか、
「予定通り進まないから」という理由を
明確に理解しておくことが重要ですね。