過去のクラウド障害を確認するサイトを作成しました。

クラウドの障害情報は公式サイトから確認できますが、直近の情報しか見れません。そこで、過去の障害情報を確認するサイトを作成してみました。過去1年分ぐらいの確認ができます。

複数クラウドを確認したいという思いから、この名前にしました。


アプリの構成

Webサイト上で提供している情報以外に、JSONで過去の障害情報が取得できます(情報提供元はこちら)。このJSONを成形して表示しているだけではありますが、大きく技術的にはこのあたりがポイントです。

・React + TypeScript
・NorthStar
・CDN + Object Storage + IaC

React + TypeScript

サーバーを構えるのが嫌だったので、SPAとなるようReactを採用しました。

TypeScriptは型があってコーディングスピードがあがりますね。JSONに型定義が必要ですが、その手間をとってもメリットがあるように感じました。

💡
ReactもTypeScriptも詳しくないですが、サンプルソースをちょちょっといじって、完成させることができました。

NorthStar

前から少し注目していたNorthStarを使ってみました。NorthStarとは、

NorthStar aims to be the standard for rapidly prototyping intuitive, meaningful and accessible user experiences. It simplifies your work and ensures consistent, predictable experiences at scale for your customers. With NorthStar, you can focus on innovation and do more with less.
NorthStarは、直感的で意味のあるアクセシブルなユーザー体験を迅速にプロトタイピングするための標準となることを目指しています。作業を簡素化し、一貫性があり予測可能なエクスペリエンスを顧客のために大規模に実現します。NorthStarを使用することで、イノベーションに集中し、より少ない労力でより多くのことを行うことができます。

管理画面がお手軽に作成できるUIライブラリーです。

ライブラリーはGitHubで公開されています。

💡
よくある管理画面が簡単に作成できます。

プロジェクト作成

Getting Startedを参考に実施しました。

mkdir northstar && cd northstar
curl https://northstar.aws-prototyping.cloud/examples/create-react-app.tar.gz | tar -xz && cd create-react-app

これでcreate-react-appでReactプロジェクトの雛形を作りつつ、NorthStarのライブラリーが設定された状態のプロジェクトが作成されます。

続いてこちらのコマンドを実施し、ライブラリーのインストールとWebサーバーの起動ができます。

yarn
yarn start

使用したNorthStarコンポーネント

  • AppLayout

ヘッダーとナビゲーションエリア、メインエリアがあるレイアウトです。よく見る一般的なものですね。

  • ButtonDropdown

ボタンをクリックするとメニューが出てくるものです。

  • Table

テーブル。検索バーをつけたり、チェックをつけた行を対象にアクションを指定したりと、かなりカスタマイズができます。ページングの仕組みも組み込まれていて、一気に取得したデータを分割して表示可能です。また、サーバー側でページングさせることもできるようです。

  • Modal

モーダル形式のポップアップです。今回は、各イベントの詳細をモーダルで出したかったので使用しました。

💡
使いたいものがすでにコンポーネントとして提供されているので、選ぶだけで「っぽい」見た目が実現できました。

コードの一部を紹介

コーディングした部分を紹介します。

  • JSONデータの取得

画面初期表示時にJSONを取得して、取得結果をitemに格納しています。

      useEffect(() => {
          getItems();
      }, [])

      const getItems = async () => {
          fetch('data.json')
          .then(response => response.json())
          .then(json => {
  
              let d : Data = json
  
              d.archive.forEach(function(status){
                  status.displayDate = (new Date(parseInt(status.date)*1000)).toLocaleDateString()
              })
  
              setItems((item) => {
                  return [...item, ...json.archive];
              })
          })
      }
  • Detailボタンの活性/非活性

チェックボックスに一つでもチェックがある場合だけ、Detailボタンを有効にする機能です。

      const tableActions = (
          <Inline>
              <Button disabled={selectedItems.length !== 1} onClick={onDetailClick} variant="normal">
                  Detail
              </Button>
          </Inline>
      );
  • モーダル文言のセット

チェックボックスが変わるたびに最新のDetail情報を保持するようにしました。もう少しいい方法があればなと思いましたが、、、

      const handleSelectionChange = (items: any[]) => {
          if (!(selectedItems.length === 0 && items.length === 0)) {
              setSelectedItems(items);
              const tmp:Status = items[0] 
              setDetail(() => tmp.description)
          }
      };
💡
完成したコードはそれほど長くはないのですが、結構試行錯誤しました。React特有の書き方やライフサイクルがありますね。

CDN + Object Storage + Iac

作成したアプリはIacでデプロイできるようにしました。

  • まずはバケットを新規作成します。
  • 次はCDNディストリビューションの作成です。JSONへ同一ドメインでアクセスするように2つ目のオリジンとして登録しています。
  • 最後にアプリのソースコードをObject Storageにデプロイします。
    const bucket = new aws_s3.Bucket(this, 'website', {
    })
    new aws_cloudfront.CloudFrontWebDistribution(this, 'webdistribution', {
      originConfigs: [
        {
          s3OriginSource: {
          s3BucketSource: bucket,
          originAccessIdentity: new aws_cloudfront.OriginAccessIdentity(this, 'oai',{})
          },
          behaviors : [ {isDefaultBehavior: true}],
        },
        {
          customOriginSource: {
            domainName: 'status.aws.amazon.com',

          },
          behaviors: [{pathPattern: 'data.json'}]
        }
      ],
      defaultRootObject: 'index.html'
    })
    new aws_s3_deployment.BucketDeployment(this, 'deploy', {
      sources: [aws_s3_deployment.Source.asset('../app/build/')],
      destinationBucket: bucket
    })

できてしまえば簡単です。ここにたどり着くまでにドキュメントとのにらめっこです。

💡
IaCも便利です。とても簡単に環境構築ができてしまいます。

ソースコード

ソースコード全文はGitHubで公開しています。


以上、障害情報を確認するサイトの作り方でした。