はてなブックマーク

NRI OpenStandia Advent Calendar 2020の3日目は、2日目の続きとしてKeycloakのToken Exchangeを活用した話を紹介します。具体的には、AWSのCLIツールなどの利用で必要なAWSアクセスキーの発行をToken Exchange経由で行うというものです。 やりたいこと 皆さんAWSアクセスキーの管理はどのようにされているでしょうか？誤ってGitリポジトリにコミットしちゃって漏洩し、たくさんEC2インスタンスを起動されて高額請求されちゃう、なんていう事故をたまに聞きますよね。ベストプラクティスとしてそもそも発行しない (EC2インスタンスロールなど、IAMロールで制御する)という考え方がありますが、ローカルPCなどから作業したい場合はどうしても発行が必要になります。そのような場合は、有効期限付きの一時的なAWSアクセスキーを使うと漏洩したとき

昨年のAdvent Calendarで書きました「KeycloakのToken Exchangeを活用した一時的なAWSアクセスキーの発行 」の続編ネタです。この中で紹介した aws-cli-oidc というCLIツールの便利な使い方を紹介します。 aws-cli-oidcとは AWS管理コンソールへのログインを、Keycloakなどの外部IdPとSAMLまたはOIDCで連携させている場合に、aws-cli などのAWS向け各種CLIツールで利用可能な一時的なアクセスキーを取得してくれるちょっとしたCLIツールです。このツールの目的や説明は昨年の記事を読んでいただければと思いますが、この手の他のツールと異なり、利用者のクレデンシャルを本ツールに渡さずにアクセスキーを発行できるところがポイントです。AWSと外部IdP間のフェデレーションには、OIDCまたはSAML 2.0が利用できますがその

class Sample extends React.Component { constructor(props) { super(props); this.state = { selected: false; }; this.handleChange = this.handleChange.bind(this); } render() { return ( <input disabled={true} type="radio" checked={this.state.selected} onChange={this.handleChange} /> ); } handleChange(e) { this.setState({ selected: true }); } } disabled={true}をラジオボタンに設定し、クリックしても選択不可な状態にしている。が、Chrome/Fir

はじめに 2018/05/30に、丁度日本でのAWS Summit開催中にALBの組み込み認証機能がリリースされました。この機能を使うと、Amazon Cognito または OpenID Connect (以下、OIDC)に準拠したOpenID Provider (Identity Provider、IdP)と組み合わせることで、ALB配下のアプリケーションを保護することができます。詳しくは、本家のBlog記事の以下を参照されると良いでしょう。 Simplify Login with Application Load Balancer Built-in Authentication 翻訳バージョンはこちら→ Application Load Balancer 組み込み認証によりログインを簡略化 本記事では、この新機能をOIDCに準拠しているOSSのIdentity and Access

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Keycloak by OpenStandiaの21日目は、Keycloakをコンテナ環境で動作させてみようと思う。ただ、単体のDockerコンテナとして動作させるのは非常に簡単で、Docker で始める Keycloakなどの記事で既に紹介されている。そこで今回は、 先月行われた AWS re:Invent 2017 にて発表された AWS Fargate 上で動かす さらに、Keycloak はクラスター構成 (HA構成)とする ついでにCloudFormationでAWS環境の構築を自動化しちゃう をやってみました！ AWS Fa

{ "active": true, "client_id": "l238j323ds-23ij4", "username": "jdoe", "scope": "read write dolphin", "sub": "Z5O3upPC88QrAjx00dis", "aud": "https://protected.example.net/resource", "iss": "https://server.example.com/", "exp": 1419356238, "iat": 1419350238, "extension_field": "twenty-seven" } 上記例のように、IDトークンと異なり、audには受け取り側であるリソースサーバを表す文字列が入ります。client_idにはOAuth 2.0クライアントIDが入りますので、どのOAuth 2.0クライアントに、

Keycloakドキュメントの翻訳ではどうしているかというと、3つ目のテキスト抽出した部分のみを翻訳の方式を採用しています。というのも、現状、毎月のように最新版がリリースされており、ドキュメントもどんどん変わっていく恐れがあると思い、変更に追随しやすい(はず)、翻訳者は翻訳作業だけに集中できる、という点から3つ目の方式を今のところは採用しています。 ソーステキストからのテキスト抽出について 方式3を取る場合、テキスト抽出を行い、翻訳後に元のテキストにマージする仕組みが重要になってきます。というわけで、次はテキスト抽出について述べます。 翻訳対象のソーステキストフォーマット テキスト抽出を行うためには翻訳対象のソーステキストフォーマットが重要なポイントになってきます。OSSドキュメントで利用される代表的なテキストベースのドキュメント作成ツール/マークアップ言語としては以下があります。 Asc

Netadashi Meetup #4 の発表資料です。 今日の内容 数ヶ月前に ECS、CloudFormation、CodePipeline などのAWSサービスを使い倒して実際に本番運用を開始 工夫したところとか苦労したところを共有 プロジェクト概要 2011年くらいに作られたWebシステムの老朽化対応 OSや各種ミドルウェアのEOLを迎えるため入れ替えたい 国内の割高なクラウドサービス(単なる仮想マシン)を使っていたが、できれば安くしたい 社内でも活用事例の多いAWSを移行先として検討 現行システム あるあるな一昔前のWebシステム? JavaのWebアプリ + スクリプト言語によるバッチ処理(cronによる定期実行) ソースはSVNで管理(10数個のリポジトリ) 課題管理やテーマ管理などはExcelで CI/CDはやっておらず開発者のPCでビルドして手動でデプロイ インフラはEx

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに docker build --build-arg http_proxy=... で認証プロキシを設定すると危険だよ、という情報があまり広まっていない気がしたので書いておく。 なにが問題か？ Dockerのドキュメントより引用です。 Warning: It is not recommended to use build-time variables for passing secrets like github keys, user credentials etc. Build-time variable values are

背景 Qiitaのproxyタグを見てもわかるように、多くのエンジニアがプロキシサーバとの戦いで日々消耗し続けている。とはいえ、主にセキュリティ上の理由でプロキシサーバの利用は必要なことも分かる。 となると、プロキシサーバを意識しなくても(設定しなくても)自動的にプロキシサーバを経由してくれるようになればうれしいよね？ これは透過プロキシと言って昔からある考え方で、QiitaにもProxy環境下での仮想GW構築というすばらしい記事がある。 しかし、上記記事では透過プロキシにredsocks、DNSサーバにpdsndと複数のツールを組み合わせて実現されており、それぞれインストールや設定するのが個人的には面倒というのと、記事中で述べられているとおり、プロキシ経由で53/tcpに接続できない場合に対応できないという制約もあった。 というわけで、今回go言語の勉強も兼ねて自分好みの透過プロキシを自

はじめに Redux + TypeScriptな環境でAction typeに型を定義し、Reducerを型安全に書く方法をTypeScriptのバージョン 1.8 / 2.0 / 2.1 別にまとめてみた。 なお、試したサンプルコードは GitHub にあります。下記の通りTypeScriptのバージョン別にブランチで分けてあります。 TypeScript 1.8版 TypeScript 2.0版 TypeScript 2.1版 また、TypeScript 2.0、2.1はまだリリースされていないので、8/12時点の物を使って確認している(2.0はnpm i typescript@betaで、2.1はnpm i typescript@nextでインストール)。 サンプルの内容 +ボタンをクリックするとカウンタを1つインクリメント -ボタンをクリックするとカウンタを1つデクリメント テキス

Jenkins workflow pluginで色々と試してみたので分かったことをFAQ集として残しておきます。今後もうちょっと使いこなして追加するかもしれません。 ※執筆時のWorkflow pluginの最新バージョンは1.8です。 Wokflow Pluginが対応しているJenkins Pluginは？ COMPATIBILITYにまとめられているのでこちらを参照すると良い。 使えるDSLが良く分からない TUTORIALをまず読もう。ここで代表的なDSLを学ぶことができるはず。 後は個別のドキュメントも参照しよう。 builder, post-build actions SCM あとは困ったらソースを読む。 ～StepというクラスでDSLが実装されているのでこれらを読むとよい。例えば、echoステップのソースはこれだが、引数はString型しか受け取れない仕様であることが分かる。

はじめに 接続先サーバ側を変更できるのであれば公開鍵認証方式をおとなしく使いましょう。 どうしてもパスワード認証方式を使わないといけない場合は、接続クライアント側にソフトウェアをインストール可能ならSSHPassを使いましょう。巷にはexpectコマンドを使った方法があふれていますが、インストール可能な環境ならSSHPassのほうが良い (参考: sshにパスワードで自動ログインするならexpectよりもsshpassを使おう サーバ側もクライアント側も変更がどうしてもできない…残念ながら大人な事情でそういうこともあります。そんな時は本記事が参考になるかと思います。 実現方式 sshにはSSH_ASKPASSという仕組みがあります。以下、引用。 SSH_ASKPASS パスフレーズを入力する際、ssh が端末から起動されているとssh はパスフレーズをその端末から要求します。ssh が制御

はじめに Bitbucket BrowserというBitbucket ServerのViewerをReactで作っていて、機能追加に伴い非同期処理部分がだんだん辛くなってきたので、勉強も兼ねてredux-sagaを使ってみたらどう改善されるのか試してみた。 なお、Bitbucketにはプラグイン機構があるのでプラグインとして実装するのが王道なのだが、Bitbucketが提供するREST APIを呼び出すだけで簡易的なViewerなら十分作れそうなので、HTML/JS/CSSのみで作っている。 使用ライブラリ 細かいライブラリも含めた使用バージョンは下記のとおり。なお、アプリケーション全体はTypeScriptで書いている。 "dependencies": { "babel-polyfill": "^6.9.0", "bulma": "0.0.26", "font-awesome": "^4

はじめに 以前書いたGolangのGin/bindataでシングルバイナリを試してみた(+React)の続きです。今回はReactのサーバサイドレンダリングを追加で試してみました。なお、Golangで使えるJavaScriptエンジンはいくつかありますが、今回はgo-duktapeを使っています。サイトにベンチマークが記載されておりそこそこ速そうです。また、go-duktapeの作者の方がgo-starter-kitというEcho + Reactのサーバサイドレンダリングのサンプルを作ってくれているため、こちらを参考にしてGin向けに作ってみました。 作ったもの https://github.com/wadahiro/gin-react-boilerplate/tree/server-side-rendering にあります。 ディレクトリ構成 前回とほぼ同じです。前回から変更した、ポイン

はじめに Go言語と言えばシングルバイナリが魅力の一つですが、Webサーバとして利用する際のHTML/JS/CSSといったリソースは自動的には埋め込められません。やりたければ別途、go-bindataなどのツールを使って実行ファイルに埋め込む必要があります。今回、Go言語のGinを使ったWebアプリのシングルバイナリ化を試してみたので簡単に紹介する。 なお、埋め込むリソースとなるクライアント側はFacebook Reactを使ったアプリになっています(お試しなのでHello Worldと表示するだけですが...)。Reactのサーバサイドレンダリングは今回は試していませんが、go-duktapeを使えばGo言語でもできそうなので別途試してみたいと思っています。 作ったもの https://github.com/wadahiro/gin-react-boilerplate にあります。 ディ

webpackによるビルドを高速化するための設定がいくつかあるのでそれらの効果を(雑にですが)測ってみました。 なお、ビルド時間の測定には手前味噌ですが、React.js用のGridコンポーネントであるGriddleをBootstrapデザインにするgriddle-react-bootstrapのexamplesアプリを使用しています(動いている物はこちらから見れます)。使用ライブラリは下記のpackage.jsonの通り。TypeScriptで書いているので、webpack + ts-loaderでビルドしています。Babelは使用していませんが傾向はたぶん同じになるかと思います。 "devDependencies": { "cross-env": "^1.0.7", "ts-loader": "^0.7.2", "typescript": "^1.8.2", "webpack": "^

tsdが非推奨になったので代わりに推奨されているtypingsに移行した。typingsについてはすでに詳細な記事がQiitaでも書かれているのでこちらを見ると良い。 TypeScriptのtsdが非推奨になったので、typingsへ移行 TypeScriptの型定義管理ツールTypingsについて 本記事ではtsconfig.jsonの注意点についてだけ補足として書いておく。 tsconfig.jsonの注意点 tsconfig.jsonでexcludeを使ってビルドしている場合は、適切に設定しないとerror TS2300: Duplicate identifierが大量に発生してしまうので注意。原因は、typingsで型定義をインストールすると、typings/browser/...とtypings/main/...にそれぞれ型定義がインストールされるため、二重に自動的に読み込まれて

はじめに モダンブラウザならJavaScriptでファイルダウンロード処理を実現することができます。SPA(シングルページアプリケーション)など、クライアント側にデータを持つようなアプリケーションであればサーバアクセスなしにメモリの内容からファイルを生成してダウンロードさせることができます。 実装方法 やり方は リンクのHTML5のdownload属性を使用してダウンロードファイル名を設定 File APIのBlobを使用してデータを作成 window.URL.createObjectURLでBlobからURLを生成しそれをリンク先に設定 とするだけです。これでChromeとFireFoxはいけます(download属性のブラウザ実装状況を見るとを見ると、試せていないですがEdgeとOperaもいけそう)。加えてIEをサポートする場合は、IE10/11であればwindow.navigato

はじめに Webpackでビルドしてできあがったバンドルが、気付いたらサイズが超でかいよ！！ なんて時の犯人探しに役立つかもしれないTips。 webpack --display-modules で分析 webpackコマンドの実行時に--display-modulesオプションを付けると、インクルードしたnode_modulesやbower_components配下のモジュールについても詳細情報がわらわらと出力されるようになる。ここにサイズも出力されている。 $ webpack --display-modules Hash: 20265560bd210ea64e82 Version: webpack 1.12.12 Time: 7110ms Asset Size Chunks Chunk Names bundle.js 2.76 MB 0 [emitted] main [0] multi

はじめに React.jsを使って業務アプリをSPAで作ってみたので、知見というか体験談を共有したいと思う。なお、業務アプリという分野におけるReact.jsの利用に関しては、React.js Advent Calendar 2015に「業務系アプリの実装だからこそReact使おうぜ」 という記事もあるのでそちらも合わせて読んでおこう。 アプリケーションの特徴 業務アプリといっても色々あると思うが、今回のアプリケーションでは以下のような特徴があった。 Formによる入力項目が多い＆バリデーション 画面遷移がかっちり(遷移途中の画面にいきなりアクセスや戻ることは不可) アクセスコントロールがある CRUD操作が多い 表形式でデータを表示 IEをサポート 以下、それぞれについて詳細を書いていく。 Formによる入力項目が多い＆バリデーション 業務アプリといえばFormの入力項目の多い、というイ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?