もりはやメモφ(・ω・ )

AWSのマルチアカウントのWebコンソールをブラウザのシングルウィンドウで操作する on Firefox

約 4 分で読めます AWS小ネタ

Firefoxのadd-onを使って複数のAWSアカウントを1つのブラウザの1つのウィンドウ内で操作するメモです。

最初にまとめ

本記事では以下を紹介しています。Firefoxおよび関連Add-onを利用しました。

背景

AWSを用途や環境や費用などの境界のために異なるアカウントを作成するマルチアカウント戦略は一般的なものとなりました。

AWS マルチアカウント管理を実現するベストプラクティスとは ? - builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS

しかしAWSのWebコンソールをマルチアカウントで開くにはシングルのウィンドウではできません。 別のアカウントを同じウィンドウ内で、別のタブとして開いてしまうと以下のエラーが発生してしまいます。 AWS error - Please sign in again

この問題の対策として私および周辺では以下のどちらかの方法を取ってきました。

  • Chromeのprofileを複数作成して、それぞれのprofileで別のAWSアカウントのWebコンソールを開く
  • 複数のブラウザ(Chrome, Firefox, Safari, Edge, etc…)を使用して、それぞれのブラウザで別のAWSアカウントの(略)

これについては先日のJAWS-UG 福岡 #12で飛び込みLTをしてきたのでスライドをご覧ください。

I have a problem when operating AWS with multiple accounts | PDF

余談として、普段は神奈川在住な私が福岡に行った理由を会社ブログへ投稿したのでこちらも紹介です。

福岡出張で素敵なコミュニケーションをしてきた話 - Oisix Creator’s Blog（オイシックスクリエイターズブログ）

解決策

以下の3つの画像から使用感が伝わるでしょうか。3つのアカウントがそれぞれ上述のエラーなく1つのウィンドウに収まっていて、特徴的なカラーリングに変わっています。

  • Audit(赤色)
  • Log Archive(紫色)
  • morihaya(緑色)

aws multi accounts in a single window aws multi accounts in a single window aws multi accounts in a single window

Add-on “Multi-Account Containers” でタブの分離

FirefoxのAdd-on “Multi-Account Containers” を利用すると、タブのグループを別のコンテナとしてグルーピングし、異なるAWSアカウントを扱うことができます。

GitHub - mozilla/multi-account-containers: Firefox Multi-Account Containers lets you keep parts of your online life separated into color-coded tabs that preserve your privacy. Cookies are separated by container, allowing you to use the web with multiple identities or accounts simultaneously. · GitHub

READMEの冒頭から引用すると以下とあります。

The Firefox Multi-Account Containers extension lets you carve out a separate box for each of your online lives – no more opening a different browser just to check your work email!

記載には"work email"とありますが、このAdd-onのおかげで別のAWSアカウントのために異なるブラウザを開く必要もなくなります。デフォルトでは4つのコンテナが用意されていますが、コンテナ名の変更やコンテナを増やすことも可能です。

このAdd-onの存在は上述したJAWS-UG福岡のLT後に教えていただきました。(雑な)アウトプットをしたところ上質なインプットを頂けた素晴らしい体験でした。改めてJAWS-UG福岡の素晴らしい場に感謝します。

Add-on Firefox Extension for AWS SSO による表示名の簡略化とカラー変更

FirefoxのAdd-on “Firefox Extension for AWS SSO” を利用すると、AWS SSOのデフォルトではわかりづらいアカウントの表示名をわかりやすいものに変更にしつつ、アカウント名の色を正規表現と色の組み合わせでヒットさせて変更することができます。

GitHub - yaggytter/chrome-extension-awssso at forfirefox · GitHub

このAdd-onによる変化は以下の画像を見比べていただければ分かります。

  • 上: AWS SSOデフォルトの表示でアカウント名ではなくログインユーザ名が表示
  • 下: Add-onによってアカウント名の表示と、指定したカラーに変化している

Extension for AWS SSO Extension for AWS SSO

カラー変更はAdd-onのPreferencesに以下のような指定を行うことで可能です。正規表現によるパターンマッチと、カラーパレットの色名による指定が可能ですので非常に柔軟に指定できると言えます。

{
	"^Audit$": "red",
	"^Log Archive$": "purple",
	"^morihaya$": "darkgreen",
	"^SomeStrings.*": "darkblue"
}

まとめ

以上、Firefoxと2つのAdd-onを用いて以下を達成した話でした。

  • “1つのブラウザ(Firefox)“の
  • “1つのウィンドウ"内で
  • “複数のAWSアカウント"を
  • “間違いを避けるためにデザインカラーを変化"させ
  • “AWS SSOのわかりづらい表示もわかりやすく"した

aws multi accounts in a single window

この方法がProfileや異なるブラウザによって使い分けることに対して優れているかと言えば「それぞれの好み次第」だと考えていますので、選択肢の一つとして知っておくのも悪くない程度に留めていただければと思います。

それでは良いAWSマルチアカウント操作を！