GCP IAM Explorerを公開した作業ログ

gcp-iam-explorer-263803.web.app


目標

  • IAM Roleの一覧取得
  • IAM Permissionの一覧取得
  • Role×Permissionのマトリクスをいい感じに見れる
  • RoleとRoleのdiffを取れる
  • GAは簡単にいれとく
  • OGPタグもちゃんとする

スコープ外

  • 複数Roleのdiffを取れる
  • APIエンドポイントに必要なPermission一覧取得
  • Permission×Endpointのマトリクスをいい感じに見れる

  • 自動化


github.com

github.com

があるの何?

  1. (APIじゃない)Cloud Client Libraryの方が高級らしい

cloud.google.com


パーミッションの一覧あった

cloud.google.com

2574個


CustomRoleサポートレベルという概念を見つけた

cloud.google.com

2545個

パーミッション網羅していない?


$ cat result.json | jq -r 'map(.includedPermissions) | flatten | .[]' | LANG=C sort -u | wc -l

2601

そしてドキュメントよりもRoleから抽出されたパーミッションの方が多い


342d341
< bigtable.tables.getIamPolicy
347d345
< bigtable.tables.setIamPolicy
933a932
> compute.instances.update
1008d1006
< compute.nodeGroups.update
1493d1490
< datacatalog.entries.list
1496d1492
< datacatalog.entries.updateTag
1502d1497
< datacatalog.entryGroups.update
1570,1577d1564
< dataproc.autoscalingPolicies.create
< dataproc.autoscalingPolicies.delete
< dataproc.autoscalingPolicies.get
< dataproc.autoscalingPolicies.getIamPolicy
< dataproc.autoscalingPolicies.list
< dataproc.autoscalingPolicies.setIamPolicy
< dataproc.autoscalingPolicies.update
< dataproc.autoscalingPolicies.use
2052,2053d2038
< logging.cmekSettings.get
< logging.cmekSettings.update
2185,2196d2169
< networkmanagement.connectivitytests.create
< networkmanagement.connectivitytests.delete
< networkmanagement.connectivitytests.get
< networkmanagement.connectivitytests.getIamPolicy
< networkmanagement.connectivitytests.list
< networkmanagement.connectivitytests.rerun
< networkmanagement.connectivitytests.setIamPolicy
< networkmanagement.connectivitytests.update
< networkmanagement.locations.get
< networkmanagement.locations.list
< networkmanagement.operations.get
< networkmanagement.operations.list

compute.instances.update がroleから抽出出来てないけど、どうやらそんなパーミッションは無い(なくなった?)


IAMのロゴ無いかな

あった

cloud.google.com

SVG and PNG Icons にバッチリ正方形背景透過が


material-uiでAppBarがかぶる問題の解決は theme.mixins.toolbar

github.com

stackoverflow.com


Routerまわり

reacttraining.com

reacttraining.com

いまのところreach-routerがreact-router v6の先取りっぽい

が、 TypeScriptのサポートが微妙

github.com

github.com


Reactのパフォーマンスチューニング調べる

medium.com


勉強会で聞いた React.memoの話

const Button = React.memo((props) => {
  // your component
});

ja.reactjs.org


useCallbackとuseMemoの違いってなんだ?

普通に返り値が違った。関数そのままか、関数の返り値か

Since JavaScript has first-class functions, useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

medium.com


Updateがかかってるかどうか知りたい

React Developer Tools の設定に Highlight Update あった

recruit-tech.co.jp


単なるオブジェクトリテラル定数にuseMemo使うのか?

JSX外で定義しろ。そりゃそうだ

gist.github.com


ESLintは

eslint-config-react の no-bind でアロー関数作って渡すのは検知できる

でもrecommendedでもeslint-config-react-appでも有効にはされてない

関数、オブジェクトリテラル、配列リテラル、全部チェックしてくれるやつ

github.com

(でもマイナー?)


丁寧にやってみたけど、そもそもmaterial-uiのAutocompleteがPure化されてないから結局常時Updateされとる


常にPure化すればいいわけじゃない

そのとおり。

とりあえず全部戻した


for-ofでarray.entries()使うとエラー

Type 'IterableIterator<[number, string]>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.  TS2569

tsconfigのtargetは esnext とかで生成されたほうがいい気がする


長いTableをレンダリングしようとすると遅い

material-ui.com

raect-virtualized を使ったサンプルがドキュメントに

github.com

でも react-window の方がオススメ感ある

https://react-window.now.sh/#/examples/list/fixed-size

github.com

別に普通に react-window でもやれるっぽい

いったん諦めた。

Ctrl-F で検索できなくなるし


react-router スクロール問題

画面遷移後に前の位置のままなのは解決できる

reacttraining.com

でも出来ればブラウザバックしたときは前居たときの位置に戻りたい

developer.mozilla.org

ネイティブでサポートされはじめている?

ライブラリがある が、v4対応の方はPopularityがイマイチ

www.npmjs.com

const ScrollToTop: React.FC = () => {
  const history = useHistory()

  React.useEffect(() => {
    if (history.action === "PUSH") {
      window.scrollTo(0, 0);
    }
  }, [history.location.pathname, history.action]);

  return null;
}

でいいのでは?? 遷移したときだけリセット、ブラウザバック・フォワードだと維持


eslint-config-react-app.ts へのoverridesが、 自分で定義した plugins を上書きしている感

package.json : "extends": "plugin:prettier/recommended" packages/web/package.json : "extends": ["react-app", "prettier/@typescript-eslint"]

という状況で、rootで指定した plugin:prettier/recommended が認識されてないように見える

packages/batch/package.json : "extends": "eslint:recommended"

としてる方は問題ない

わかった

config-react-app で root: true が指定してあるからだ・・・

eslint-configパッケージの方で root: true 指定してくるのって一般的なのか・・・?

もしそうならmonorepoとかでネストしたeslistコンフィグ書くときはサブディレクトリでは root: false を明記すべきなのかとかって気になってくるけど


plugin:@typescript-eslint/recommended-requiring-type-checking

github.com

monorepoの場合、ルートで tsconfigRootDir 以外まで設定して、子パッケージの .eslintrc.jstsconfigRootDir: __dirname


@typescript-eslint/prefer-regexp-exec

ESLint本体でリジェクトされたルールがtypescript-eslintで採用されて、しかもrecommended入りしている・・・

github.com

github.com

typescript-eslint、JSレイヤのルールには関与せずTSでだけ架せれるルールだけ扱う、的なポリシーは特に無い感じなんだろうか


いまさらだけどcss propsって、なんでstyle属性をそのまま使うのよりいいんだ?

reactjs.org

but using the style attribute as the primary means of styling elements is generally not recommended.

非推奨だった

でもなんで?

reactjs.org

Are inline styles bad?

CSS classes are generally better for performance than inline styles.

パフォーマンスが悪い?

ループで何回も描画とかならわかるけど、一箇所でだけ描画されるような要素なら違いなさそう

コンポーネントの設計として、呼び出され方に制限はかけず、どこで何回使われるかわからない想定でいろということかな


GitHubのアイコン

これのためだけにFontAwesome入れるのは違うと思うのでSVGだけ取ってきたい

公式には.aiと.epsだけで、svgに変換してみたらなんか4種類の画像入りなファイルだった・・・

simpleicons.org

から取得


SVGに色をつけたい

そもそもちゃんと理解してなかったけど、 fill はインラインSVGにしか使えない模様

で、

import example from "./example.svg"

じゃなく

import { ReactComponent as Example } from "./example.svg"

でインライン展開されるReactComponentが取得できた・・・

こういうのをSVGRっていうのね

github.com


svgを囲むaタグの高さがsvgのサイズに一致しない

svg: 24 a: 16

aタグをdisplay: blockにしても

a: 29

svgもdisplay: blockにしたらOKだった

なるほど


GAの「業種」設定って目標のテンプレートに影響するだけだったのか


Firebase Analyticsをローカルで止める方法

とりあえずCreateReactAppのserviceWorkerで使ってるのとおなじ isLocal関数コピペして防いでおいた


support.google.com

測定機能の強化、はFirebase Analyticsだとどうやるんだ

データストリームの設定は「Firebase のストリーム設定」となっていて操作できない

github.com

github.com

ソース公開されてるのか

たぶん出来ない感

Webの場合、Firebase側のトラッキング方法は無視して連携されたGAを直接使ったほうがいいのでは・・・?

そうする


OGP対応

実行時のmetaタグの操作はreact-helmet

でも配信時には影響しないのでTwitterCardには効果がない

prerender.io

docs.netlify.com

それ用のサービスやNetlifyを使うという手

create-react-app.dev

Pre-Rendering into Static HTML Files

medium.com

CRAのページからのリンク

www.npmjs.com

weekly: 4,129 dependents: 9

www.npmjs.com

Heavily inspired by prep and react-snapshot, but written from scratch.

weekyly: 7,162 dependents: 17

react-snapshotに載ってるAlternatives

www.npmjs.com

weekly: 27,382 (gatsbyの影響だろう)

github.com

いいまとめ

www.npmjs.com

weekly: 7,433

www.npmtrends.com


react-snap で行ってみる

なにもトラブルなく動いたすごい


metaタグがreact-helmetで変更されない

<meta property="og:title" content="Compare : GCP IAM Explorer">

のまま

<meta property="og:title" content="Compare : GCP IAM Explorer" data-react-helmet="true"> がheadの末尾に追加されてた

data-react-helmet="true" がついてないものには触らない模様

prerenderingするのでindex.htmlから消してしまえば良い

data-react-helmet="true" をつければindex.htmlに書いたやつを拾ってくれはしそう


firebase hostingで末尾スラッシュ無しに統一したい

firebase.google.com

"trailingSlash": false


firebase hostingで404を返す

react-snapでprerenderingしているので初期化時にSPA用としてセットアップして作られたrewriteルールを消せばOK


公開