AWSのService Catalogを扱うReactコンポーネント

「AWS Service Catalog React Components」というニッチ感のあるコンポーネントを見つけたので、試してみました。インストール例によってcreate-react-app で作ったプロジェク […]

「AWS Service Catalog React Components」というニッチ感のあるコンポーネントを見つけたので、試してみました。

Table of Contents

インストール

例によってcreate-react-app で作ったプロジェクトに入れます。

$ yarn add aws-service-catalog-react-components

認証周りで必要になるので、以下の二つも追加しましょう。

$ yarn add aws-amplify aws-amplify-react

変更前のコード

create-react-appで作ったデフォルト状態からはじめましょう。~~めんどくさい~~わかりやすさ重視で１ファイルに全部詰め込むスタイルをとります。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

AWS-Amplifyまわりの設定を済ませる

AWSのアクセスキーをフロントのコードに埋め込むのは危険極まりないので、AWS-Amplify経由でアクセス権限を取得します。そのためにAWS-Amplifyの設定をすませましょう。

まずsrc/index.jsにCognito User PoolsとIdentify Poolの情報を入れましょう。

import Amplify from 'aws-amplify';
Amplify.configure({
  Auth: {
      identityPoolId: 'xxxxx',
      region: 'ap-northeast-1',
      userPoolId: 'ap-northeast-1_xxxxxxx',
      userPoolWebClientId: 'xxxxxxxxxxx',
  }
});
 
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

その後、src/App.jsで認証機能を実装するためのHOCを追加します。

import { withAuthenticator } from 'aws-amplify-react';

// 中略

export default withAuthenticator(App);

これでCognito User Poolsを使ってログイン・ログアウトができるようになりました。

プロビジョン済みのプロダクトを表示する

いよいよService Catalogのためのコンポーネントを使いましょう。今回はプロビジョン済みのアイテムを出すところまで試します。まずsrc/App.jsでライブラリを読み込みます。

import { Auth } from 'aws-amplify';
import {
  SCProvisionedProducts,
} from "aws-service-catalog-react-components";

続いて以下のように処理を追加しましょう。

class App extends Component {
  componentDidMount() {
    Auth.currentCredentials().then(credentials => {
      this.setState({ credentials: Auth.essentialCredentials(credentials) });
    });
  }
 
  onLaunchClick() {
    console.log('User clicked Launch button');
  }

最後にコンポーネントをrenderメソッドに追加します。

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <SCProvisionedProducts
            credentials={this.state.credentials}
            onLaunchClick={this.onLaunchClick}
            awsRegion='us-east-1'
          />

これでOKです。

完成イメージ

ちょっとだけCSSで調整しましたが、以下のように表示されます。

Service Catalogを使ってスタックを管理する際、自前でコンソールを作成するよりは、これを使ってある程度まで準備してしまう方が簡単かもしれません。

取り急ぎ今回は以上です。

余談

aws-sdkのCredentialsを使えばCognitoのセットアップなしでも動きます。

import { Credentials } from 'aws-sdk'

// 中略
  render() {
    return (
      <div className="App">
          <SCProvisionedProducts
            credentials={new Credentials(accessKey, secretKey)}
            awsRegion='us-east-1'
          />

外部からアクセスできる場所でこれをやるとどうなるかはお察しください。

ローカルで試すだけの時でも、テストに使ったキーは破棄するくらいの気持ちでいましょう。たいこのひととのやくそく。