AWS/GCPのWeb ConsoleをNativefierで専用アプリにする

sandbox用のAWSアカウントとGCPプロジェクトを作ったついでにそれぞれのWeb管理画面をNativefierで専用アプリにした。

GCPプロジェクトは https://console.cloud.google.com/home/dashboard?project=YOUR_GCP_PROJECT_ID のようにURLのクエリパラメタでタブごとに異なるプロジェクトを表示できるし、
AWSアカウントもswitch roleを使えば複数のAWSアカウント間を行き来できる。

しかし今回sandboxとして以下のようなことをやったので既存のブラウザセッションだとやはり不便。

  • GCPプロジェクトはそもそものGoogleアカウントを新たに作った
  • AWSアカウントはOrganizationを新しく作った

しかし専用アプリにしてしまえばこのように異なるAWSアカウントを同時に使うことも可能、便利。

~/Library/Application Support/ を覗くとプロファイルディレクトリ自体が分かれているのがわかる。
この記事を書き始めた時はアカウントを伏せていたのだけどめんどくさくなったのでそのまま

$ ls -1d ~/Library/Application\ Support/{aws,gcp}*
/Users/hidenori.matsuki/Library/Application Support/aws-console-mazgi-sb-billing-aws-nativefier-8a6ce6/
/Users/hidenori.matsuki/Library/Application Support/aws-console-mazgi-step-aws-nativefier-8a6ce6/
/Users/hidenori.matsuki/Library/Application Support/gcp-console-mazgi-sandbox-nativefier-6d960f/

もう1つ嬉しい点としてはMacの場合Chromeでプロファイルを複数作っても ⌘+TAB でWindowを切り替えることはできないが、Nativefierで作ったアプリならこのように切り替えできる。

Nativefierのインストールはnodeやnpmがあれば npm install -g nativefier するだけなのだが、最近は手元のMacから色々なソフトウェアを追い出したいと思っていて、Dockerコンテナ内に押し込んだ。
Dockerfileとimageはそれぞれ以下に公開している。

DockerイメージはすでにDocker Hubに公開されているので、アプリを作る時は ⬇️ の1行を実行するだけ。
気をつけるポイントとしてはDocker(for Mac)はLinux VMで実行されているので --platform osx のようにプラットフォームを指定しないとLinux版のアプリが作られてしまう。

$ docker run -v $PWD:/pwd -it mazgi/nativefier nativefier --platform osx --counter --bounce --name "AWS Console(mazgi-sb-billing-aws)" console.aws.amazon.com

このように実行したディレクトリ内に各アプリができあがる。