tubone24の投稿 - Crieit

負荷テストツールK6をTypeScript+Dockerで動かすためのテンプレートを作る

2022-04-26T23:06:22+09:00

k6とは？

k6 はGo製のOSS負荷テストツールで普通のHTTPの他、HTTP/2, gRPC, WebSocketなどにも対応した高機能なテストシナリオ作成がJavaScriptで実施できる手軽さとGrafanaを使ったパフォーマンスレポートが魅力の製品です。

以前はloadimpactと呼ばれていました。こちらのほうが馴染みある人が多いのではないでしょうか？また、K6のクラウド版を使ったことありますー！という方もいらっしゃるのではないでしょうか？

私個人としては、この手の負荷試験ツールは長らくLocustを愛用してきてそれなりに複雑なテストシナリオを作ってきた経験もあるのですが、時代の流れ的にこっちのほうがいいのではないかと思い浮気することにしました。

使い心地

K6をMacやEC2などで作ったLinux上に構築する方法はググればたくさん出てくるのでここでは割愛しますが、まず非常に簡単に環境が構築できる。 この点はしっかり強調しておきたいです。

MacならHomebrew入っていれば、

brew install k6

で完了ですからね。環境構築は超簡単です。

シナリオファイルの作成もJavaScript ES6対応&公式ドキュメント比較的充実しているので、ある程度JavaScript触ったことのある人であればノーストレスで実装できそうです。

また、細かいニーズのシナリオ作成についてはGitHubレポジトリのサンプルコードがかなり参考になります。

なので、正直普通に使う分にはこの記事で紹介することなんてあんまりないのです。ここまで読んでくれた皆さん、ごめんなさい。

ロマン

完全Dockerコンテナ上で実行

とはいえ、これで終わりならわざわざブログを書くこともないので早速ちょっとした改良をしていきます。

まず、完全Dockerコンテナ上での実行です。

開発チームの皆さんがMacを使っている会社さんなら不要な気もしますが中にはWindowsやLinuxを使っている人が混在している開発現場もありそうで、そういった現場で「はい。K6入れておいてね」はちょっと不親切です。かといって、全OSのマニュアルを用意するのもつらいです。

また、負荷テストはネットワークの安定したサーバー上で実行することもしばしばでMacで動くのに負荷テスト用サーバーで動きません！みたいになるのも悲しいです。そもそも専用のサーバーを立てるのもめんどくさいのでDocker Image化してDockerコンテナ管理サービスでサクッと実行させるのが賢そうです。なんならCIに組み込んで、パイプライン上で実行させるとかも面白そうです。

もちろんK6公式もぬかりなくDocker Imageを用意してます。ただ、あくまでもこちらのImageはk6単体のImageなのでパフォーマンス可視化をするには別途InfluxDBとGrafanaを立ち上げる必要があります。

なので、まとめて環境をDocker composeしてしまいましょう。

もちろん、本来は結果をきちんと残しておくためにInfluxDBとGrafanaを永続化する必要がありますが、今回はテスト実行なのでInfluxDB永続化は行いません。永続化することにしました。代わりにInfluxDBのcleanコマンドを実装する形にしました。本格的に負荷テスト環境を作るならAWS ECSであればデータボリュームをAmazon EFS ボリュームとかで管理すると幸せになれる気がします。

次のようなdocker-compose.ymlを作るだけで完成です。楽でいいですねdocker compose。

version: '3.8'

services:
  influxdb:
    image: influxdb:1.8
    ports:
      - "8086:8086"
    environment:
      - INFLUXDB_DB=k6
    networks:
      - k6net
      - grafanaNet
    volumes:
      - ./influxdb:/var/lib/influxdb

  k6:
    image: grafana/k6:latest
    networks:
      - k6net
    ports:
      - "6565:6565"
    environment:
      - K6_OUT=influxdb=http://influxdb:8086/k6
    volumes:
      - ./tests/scripts:/scripts

  grafana:
    image: grafana/grafana:latest
    ports:
      - "3000:3000"
    environment:
      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
      - GF_AUTH_ANONYMOUS_ENABLED=true
      - GF_AUTH_BASIC_ENABLED=false
    volumes:
      - ./grafana:/etc/grafana/provisioning/
    networks:
      - grafanaNet
networks:
  k6net:
    driver: bridge
  grafanaNet:
    driver: bridge

やっていることは超基本的なこととしてnetworkを切ってサービス名でInfluxDBにアクセスできるようにする点くらいなのですが、k6のenvironmentで、

    environment:
      - K6_OUT=influxdb=http://influxdb:8086/k6

とやってあげることで実行結果をInfluxDBに出力します。

公式ドキュメントのように環境変数でなく実行時の引数で設定できます。

これで、https://localhost:3000にアクセスすることで実行結果を可視化できるようになりました。

TypeScriptでテストシナリオを書けるようにする

加えて、シナリオファイルのTypeScript化を実施します。

公式ドキュメントによるとGoのJavaScript VMがES5にしか対応してないのでES6で書いたテストシナリオはどうやらK6のなかでES5に変換してから実行しているらしいです。

K6のgo.modを見てみると使っているJavaScript VMはgojaみたいですね。

逆に、compatibility-mode=baseというオプションを使ってES5のテストファイルを渡してあげた場合、ES6への変換の手間がなくなるので実行時間とメモリの使用量が改善され、パフォーマンスが改善されるとのことです。

じゃあせっかくならTypeScript=>ES5のトランスパイルを実施して実行時はcompatibility-mode=baseオプションを指定すれば、テストシナリオをTypeScriptで実装しつつパフォーマンス面でも有利に働きそうです。

とりあえず公式に載っている例を参考にwebpack.config.jsをゴリっと書くことにしました。

babelってトランスパイルしてしまったのでこれ型チェックとかしないかもな...と思いつつ公式がそうやっているからそのまま真似していくつかplugin追加しただけです。

あと、target webで出力してますがsourcemapを出してしまうとK6で読み込めないよエラーが出るので出力させないです。(ちょっとハマった)

さらに、今回はおそらく使わないと思いましたがcopy-webpack-pluginを使ってテスト用のassetをdistディレクトリにコピーする形にしてます。こうしておくことで、ファイルのアップロードみたいなテストケースも書けるようになりそうです。多分。

と思って色々試行錯誤していたら公式に実装例があり、ほぼやりたいことがそれでできていたので結局それをパクることにしました..。

Template to use TypeScript with k6

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const GlobEntries = require('webpack-glob-entries');

module.exports = {
  mode: 'production',
  entry: GlobEntries('./tests/scripts/*.ts'),
  output: {
    path: path.join(__dirname, 'dist'),
    libraryTarget: 'commonjs',
    filename: '[name].js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  target: 'web',
  externals: /^(k6|https?\:\/\/)(\/.*)?/,
  stats: {
    colors: true,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyPlugin({
      patterns: [{
        from: path.resolve(__dirname, 'tests/assets'),
        noErrorOnMissing: true
      }],
    }),
  ],
  optimization: {
    minimize: false,
  },
};

tsconfig.jsonも特に特徴はないですが、targetはes5にしてます。

{
  "compilerOptions": {
    "target": "es5",
    "moduleResolution": "node",
    "module": "commonjs",
    .....
  }
}

これでwebpackコマンドを実行することできちんとES5に変換されたテストシナリオのJavaScriptファイルがdist配下に出力されるようになりました。

実行してみる

Docker composeにしてますので、必要なコンテナをupで立ち上げたのち、k6だけ個別にrunします。runするときにdist配下のテストファイルを標準入力として指定すればOKです。

ddocker compose up -f
docker compose run k6 run --compatibility-mode=base - < ./dist/httpGet.js

無事実行できました！

asset cookieAuthServerSession.js 5.3 KiB [emitted] (name: cookieAuthServerSession)
asset httpGet.js 2.63 KiB [emitted] (name: httpGet)
runtime modules 1.83 KiB 8 modules
orphan modules 451 bytes [orphan] 4 modules
built modules 2.52 KiB [built]
  ./tests/scripts/cookieAuthServerSession.ts + 4 modules 2.38 KiB [not cacheable] [built] [code generated]
  ./tests/scripts/httpGet.ts + 1 modules 141 bytes [not cacheable] [built] [code generated]
webpack 5.35.1 compiled successfully in 619 ms
failed to get console mode for stdin: The handle is invalid.
failed to get console mode for stdin: The handle is invalid.
failed to get console mode for stdin: The handle is invalid.

          /\      |‾‾| /‾‾/   /‾‾/
     /\  /  \     |  |/  /   /  /
    /  \/    \    |     (   /   ‾‾\
   /          \   |  |\  \ |  (‾)  |
  / __________ \  |__| \__\ \_____/ .io

  execution: local
     script: -
     output: InfluxDBv1 (http://influxdb:8086)

  scenarios: (100.00%) 1 scenario, 1 max VUs, 10m30s max duration (incl. graceful stop):
           * default: 1 iterations for each of 1 VUs (maxDuration: 10m0s, gracefulStop: 30s)


running (00m00.9s), 0/1 VUs, 1 complete and 0 interrupted iterations
default ✓ [ 100% ] 1 VUs  00m00.9s/10m0s  1/1 iters, 1 per VU

     data_received..................: 21 kB 24 kB/s
     data_sent......................: 519 B 574 B/s
     http_req_blocked...............: avg=734.31ms min=734.31ms med=734.31ms max=734.31ms p(90)=734.31ms p(95)=734.31ms
     http_req_connecting............: avg=161.49ms min=161.49ms med=161.49ms max=161.49ms p(90)=161.49ms p(95)=161.49ms
     http_req_duration..............: avg=169.36ms min=169.36ms med=169.36ms max=169.36ms p(90)=169.36ms p(95)=169.36ms
       { expected_response:true }...: avg=169.36ms min=169.36ms med=169.36ms max=169.36ms p(90)=169.36ms p(95)=169.36ms
     http_req_failed................: 0.00% ✓ 0        ✗ 1
     http_req_receiving.............: avg=2.71ms   min=2.71ms   med=2.71ms   max=2.71ms   p(90)=2.71ms   p(95)=2.71ms
     http_req_sending...............: avg=49µs     min=49µs     med=49µs     max=49µs     p(90)=49µs     p(95)=49µs
     http_req_tls_handshaking.......: avg=381.41ms min=381.41ms med=381.41ms max=381.41ms p(90)=381.41ms p(95)=381.41ms
     http_req_waiting...............: avg=166.6ms  min=166.6ms  med=166.6ms  max=166.6ms  p(90)=166.6ms  p(95)=166.6ms
     http_reqs......................: 1     1.105208/s
     iteration_duration.............: avg=903.84ms min=903.84ms med=903.84ms max=903.84ms p(90)=903.84ms p(95)=903.84ms
     iterations.....................: 1     1.105208/s

Done in 6.27s.

Locustに勝るとも劣らないかなりしっかりとしたレポートが出ますね！

yarn scriptに何とかして取り込む

まぁこれで完成なのですが、ちょっとまだ不満点があります。 docker compose runコマンドを打つ前にwebpackコマンドを実行しないといけない点です。

どうせならテスト実行一発でトランスパイル=>実行と移ってほしいのでyarn scriptを書いていきます。

今回実装するまで知らなかったのですが、yarn scriptに引数を渡すときコマンドの途中に引数の文字列を入れたいとき、ちょっと難しかったです。サクッとできるかなと思ったのですが。

結局、次のようにshellから0番目の引数を取って実行するという無茶苦茶実装にしました。こうすれば、 yarn start testFile で実行できます。

start": "sh -c \"webpack && docker compose run k6 run --compatibility-mode=base - < ./dist/${0}.js\"",

GitHub Actionsに組み込んでみる

最後にGitHub Actionsに組み込んでみることにします。

とはいってもGitHub Actionsは普通にdocker composeできるのであまり気にするところはなさそうです。

強いて言えば、docker compose runする際に-Tオプションをつけないと、コンソールが戻ってこないので無限に動いてしまいます。ちょっとだけ詰まりました。

name: Test Scenario
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      - name: setup config
        run: mv tests/config/configExample.ts tests/config/config.ts
      - name: Setup test Env
        run: |
          yarn install
          docker-compose up -d
          yarn build
      - name: run
        # In GitHub Actions, if pseudo-tty is assigned in case of docker compose run,
        # container execution will continue and step will not be completed, so disable it with -T option.
        run: docker compose run -T k6 run --compatibility-mode=base - < ./dist/httpGet.js

完成

というわけでこちらが完成したテンプレートです。

K6 with TypeScript on Docker

これからK6をプロジェクトで導入したいなと思っている人は上記をテンプレートとしてご活用いただければ幸いです。

参考

スーパー完全無料でRSSをSlackに投稿できるやつを作った

2021-06-27T09:05:46+09:00

皆さん、どうやって技術ネタ、キャッチアップしてますか？

皆さんはどうやって日々日進月歩な技術ネタをキャッチアップしてますか？

私はよく企業や個人が書いている技術ブログから情報を得ることが多いです。本当に技術ブログって手軽なのにすごい勉強になりますよね。

皆さん、どうやってブログ記事を通知してますか？

ブログ記事確認はもちろん定期的にブログに訪問するのが一番ですが、なかなか時間の取れない中でそれは酷なので何かしら皆さん工夫していると思います。

ブログの更新にあわせてTwitterを更新してくれる企業様であれば、Twitterのフォローをすればいいかもしれませんが、必ずしもそうでもないかもしれませんし、Twitterのフォローには技術以外の話題も飛び交うので、集中して記事を確認することも難しいかもしれません。

そういったときに役立つのがRSSです。RSSとはRich Site Summaryの略で、ニュースやブログなど各種のウェブサイトの更新情報を配信するための仕組みやXMLフォーマットのことです。

RSSの更新を定期的に取得し、記事更新を教えてくれるRSSリーダーは皆さんお世話になっている人も多いのではないでしょうか？

私もGoogle Chromeに拡張としてRSSリーダーを入れていた時期もありました。

問題点

RSSリーダーを使って技術ブログの更新を検知する方法はおそらくデファクトスタンダードだと思いますが、個人的にちょっと問題点がありました。

それは、通勤時間の時間をうまく使ってキャッチアップするのが面倒ということです。

携帯にPCと同じRSSを登録するのがめんどくさい
RSSリーダーを開かない
- 電車に乗っているとTwitterやSlackを開いている時間がほぼ全て
- Kindleで読書するのも細かく乗り換えがあって中断が多く発生するためストレス
(RSSリーダーによって違うのかもしれませんが)タイトルを見て中身を判断するのが難しい

このような悩みがあるため、私はSlackの/feed機能を使ってRSSを購読してました。

が、しかしこれもまたもや問題点。Slackの無料ワークスペースには、Appsが10個までしか登録できないのです。(/feedもAppsを消費します)

Slackには他にもAppsをいくつか作って入れているため、実際登録できるRSSは5個くらいになってしまいちょっと心もとない感じになってしまいました。

IFTTTはどうなの？

ちょっと詳しい人だと「じゃあIFTTT」はどうなんです？という意見が聞こえてきそうですが結果的にこちらも不採用。

理由は上記とほぼ同じで、無料版だと設定できる数に制限があるためこちらもあえなく不採用。

というより、お金出せよって声が聞こえてきますね。

じゃあ作ろっか

ということで、作ります。

要求は次の通りのことを満たす必要があります。

無制限にRSSを登録できること
更新がある場合のみSlackに投稿すること
SlackもAppsを消費しないこと(Custom Integration)
できれば内容を要約したものや、OGP画像も一緒に投稿して記事の選別に役立てられる付加機能を作ること

feedparser

今回は時間もない中だったのでサクッとPythonで作っていきます。

RSSの購読にはfeedparserを使うと便利です。

RSS2.0だけでなく、Atomや古いRSSの形式でも難なく読み込んでくれます。

import feedparser
entries = feedparser.parse('http://feedparser.org/docs/examples/rss20.xml')
for e in entries:
    print(e.title)
    print(e.link)
    print(e.summary)

Entry Itemへのアクセスはイテレーターになっているので取り出しもかんたんです。

RSSのEntry Itemの取り出しはこれで進めます。本当にかんたんでありがたい。

さらに便利なのはpublished_parsedという項目がEntry Itemから取れます。

こちら、RSSのpublished_dateをdatetimeオブジェクトにパースしてくれます。

おかげで、フォーマット差分をあまり意識することなく、更新差分チェック実装ができました。

ステート管理

RSSには記事の作成日付(Publish Date)があり、RSSの取得のたびに差分チェックとして活用することができます。

なので、以前取得した記事のPublish Dateを記憶して、更新があった場合のみ記事を取得するようにしたいのですが、それには何かしらのDB、もしくはデータ保存する仕組みが必要となります。

今回は無料という縛りがあるため、当初はGitHubのレポジトリ上にステートファイルをコミットするようにしようとも思ったのですが、コミットが伸び過ぎてしまうのは色々問題なのでやはりDBを使いたいです。

HarperDB

HarperDBは、データ管理を容易にすることに重点を置いた分散型データベースで、ジョインを含むNoSQLとSQLをサポートしています。

NoSQLでSQLがかけるのは便利ですね！！

日本ではあまり聞きませんが、dev.toとかだとちょこちょこ話題に上がっております。

こちらのHarperDB、HarperDB Cloud Instanceというマネージドサービスも提供されており、インスタンスタイプを選ぶだけで、手軽にHarperDBを使うことができるようになっております。

え？でもお高いんじゃない？そんな声が聞こえてきますね。

なんと、今だけかもしれませんがHarperDB Cloud Instanceの一番最小のInstance構成だと無料で使うことができます！これは嬉しいですね。

Name	Value
RAM	0.5GB
DISK	1GB
VERSION	3.0.0
IOPS	3000

正直今回の使い方ではこのレベルで十分です。

Python上でのHarperDB操作も専用のライブラリが用意されているためかんたんに実装できます。

HARPERDB_URL = os.getenv("HARPERDB_URL")
HARPERDB_USERNAME = os.getenv("HARPERDB_USERNAME")
HARPERDB_PASSWORD = os.getenv("HARPERDB_PASSWORD")
HARPERDB_SCHEMA = os.getenv("HARPERDB_SCHEMA", "prd")
FILEPATH = "entry.csv"

db = harperdb.HarperDB(
    url=HARPERDB_URL,
    username=HARPERDB_USERNAME,
    password=HARPERDB_PASSWORD,)

test = db.search_by_hash(HARPERDB_SCHEMA, "last_published", [name], get_attributes=["time"])
for t in test:
    print(t["time"])

このようにNoSQLライクにHash Attributeを使って検索する感じで実装できます。もちろんValue引きも可能です。(遅くなるのかは不明だがNoSQLなら全走査になりそうなので多分遅い)

UpdateやInsertも同様な感じで実施できます。

ef insert_last_published(name: str):
    db.insert(HARPERDB_SCHEMA, "last_published", [{"name": name, "time": 123456789}])
    return 123456789


def update_last_published(name: str, time: int):
    result = db.update(HARPERDB_SCHEMA, "last_published", [{"name": name, "time": time}])
    return result

また、便利だなと思ったのはやはりSQLでの走査です。

def get_entry_urls():
    return [{"name": x["name"],
             "url": x["url"],
             "icon": x["icon"]} for x in db.sql(f"select * from {HARPERDB_SCHEMA}.entry_urls")]

といった具合にテーブルの＊Selectやジョインなんかも書くことができます。テーブル全体をなめたいとき、これは楽でいいですね。

また、CSV load機能もあり、CSVをHarperDBに食わせることもできちゃったりします。

今回はこちらの機能はRSSのEntryURL登録機能として便利に使用させていただきました。

import os
import harperdb

HARPERDB_URL = os.getenv("HARPERDB_URL")
HARPERDB_USERNAME = os.getenv("HARPERDB_USERNAME")
HARPERDB_PASSWORD = os.getenv("HARPERDB_PASSWORD")
HARPERDB_SCHEMA = os.getenv("HARPERDB_SCHEMA", "prd")
FILEPATH = "entry.csv"

db = harperdb.HarperDB(
    url=HARPERDB_URL,
    username=HARPERDB_USERNAME,
    password=HARPERDB_PASSWORD,)

db.csv_data_load(HARPERDB_SCHEMA, "entry_urls", FILEPATH, action="upsert")

無料開発で一番ネックになるのがDBですが、正直これだけで大概のアプリは作れてしまうのではないでしょうか？

OGP画像を得るには？

OGPとはOpen Graph Protocolの略で、TwitterやFacebookにURLリンクを貼り付けると出てくるあれです。

実際OGP作成を実装された方ならわかりますが、OGPはHTMLのHeaderに決まりきったmetaタグを記載して表現しております。

Slackのattachmentsに入れる画像はOGPのImageから取るようにします。

opengraph-py3

PythonでOGPを解析するならopengraphライブラリが便利です。ただし、

pip install opengraph

でインストールするとPython2用のライブラリがインストールされてしまいまともに動かないので、

pip install opengraph_py3

でインストールするようにします。

使い方もかんたんで、opengraph_py3.OpenGraphでインスタンスを作ってあげれば、ogp["image"]にOGPイメージURLが保存されます。

一点注意としてopengraphは裏でBeautifulSoapが動いているようで、Headerのないページに対してOGPを取得しようとするとAttributeErrorが出てしまうので例外処理を入れております。

本家にPR出すか迷いましたが、2017年から更新がないので骨折り損になりそうなので、やめておきます。

import opengraph_py3

def get_ogp_image(link: str):
    try:
        ogp = opengraph_py3.OpenGraph(url=link)
        if ogp.is_valid():
            return ogp["image"]
        else:
            return ""
    except AttributeError as e:
        logger.debug(f"No Head contents: {e}")
        return ""

Favicon

できれば、Slack投稿するときに技術ブログのアイコンをブログごとに変えたいなと思ったので、Faviconを取る実装も入れます。

Pythonにはfavicon取るためのライブラリfaviconがあります。

使い方も超かんたんで、favicon.getで取得したオブジェクトの配列0番目が一番大きなfaviconなのでそれを取るだけです。

import favicon
def get_favicon(link):
    icons = favicon.get(link)
    if len(icons) == 0:
        return ""
    else:
        return icons[0].url

キーワード抽出

さて、今回の醍醐味のキーワード抽出ですがこちらもかんたんに実装できます。

pytermextractという専門用語抽出ツールと形態素解析ライブラリjanomeを組み合わせることでかんたんに実現できます。

janomeは本当に便利で、特にCIに乗っけてぐるぐるしたい人にはmecabをインストールする必要も辞書をコンパイルする必要もなく、pipで一発入れれば使えるので重宝しています。

pytermextractはPyPI登録されているライブラリではないのでインストールは公式サイトから落としたZIPを展開しsetup.pyから行います。

また、janomeもpipでインストールします。

unzip pytermextract-0_01.zip
cd pytermextract-0_01
python setup.py install

pip install janome

まずは、キーワード抽出したいテキストをjanomeのTokenizerにかけて、結果を頻出度から単名詞の左右の連接情報スコア(LR)を算出し、

重要度スコアとしてはじき出す、という仕組みらしいです。とは言っても私にはよくわからなったのでサンプルコード丸パクリです。

得られる結果は{"単語": スコア}となってますので、こちらをスコア順にリバースソートして上位6位を取得する形にしました。

しょうもない知識ですが、janomeのTokenizerインスタンス作るところは処理コストがちょっと高いので、リファクタでモジュールトップレベルでの宣言にしてます。

from janome.tokenizer import Tokenizer
import termextract.janome
import termextract.core

t = Tokenizer()

def extract_keyword(text):
    tokenize_text = t.tokenize(text)
    frequency = termextract.janome.cmp_noun_dict(tokenize_text)
    lr = termextract.core.score_lr(
        frequency,
        ignore_words=termextract.janome.IGNORE_WORDS,
        lr_mode=1, average_rate=1)
    term_imp = termextract.core.term_importance(frequency, lr)
    score_sorted_term_imp = sorted(term_imp.items(), key=lambda x: x[1], reverse=True)
    logger.debug(f"keywords: {score_sorted_term_imp}")
    return score_sorted_term_imp[:6]

RSSのSummaryTextでは精度がでない、そりゃそうじゃ。

見出し通りですが、当初はfeedparserから取得できるEntry ItemのSummaryをpytermextractに食わせてましたが、SummaryTextが短すぎて全く期待する動作になりませんでしたので、BeautifulSoupを使って、実際の記事の本文を取得しpytermextractに食わせる実装に変更しました。

from bs4 import BeautifulSoup
import urllib.request as req

def extract_html_text(url):
    res = req.urlopen(url)
    soup = BeautifulSoup(res, "html.parser")
    p_tag_list = soup.find_all("p")
    return " ".join([p.get_text() for p in p_tag_list])

本文はpタグと判断しfind_allするちんけな実装です。ごめんなさい。

Slack投稿

いよいよSlack投稿部分の作成です。

Slack投稿はCustomIntegrationのIncoming Webhookで作ります。

なので、Slack attachmentが使えます。

特質したことはないのですが、OGP画像はimage_urlに、faviconはauthor_imageにキーワードはfieldsに入れてます。

GitHub Actions化

最後にGitHub Actionsに載せて、定期実行させます。

その前にの#harperdbでも書いたとおり、RSS追加時のHarperDBへのEntry追加の定義を書いていきます。

特定のファイルに更新があった場合のみ動くGitHub Actionsを作る場合は、 on_pushなどの条件にpathsを入れることで実現できます。これだけです。

on:
  push:
    branches:
      - main
    paths:
      - "entry.csv"
  pull_request:
    branches:
      - main
    paths:
      - "entry.csv"

また、定期実行にはschedule cronが便利です。

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  schedule:
    - cron: "*/30 * * * *"

完成

ということでできました。

entry.csvに書いたRSS feedを30分ごとに確認しにいき、前回よりpublish_dateの更新があったばあいはOGP, favicon, キーワード付きでSlack投稿します。

レポジトリはこちらです。

https://github.com/tubone24/tech_blog_spider

ForkするとGitHubA　ctionsがうまく発火しないっぽいので、もし利用する際はgit cloneして自身のレポジトリに再Pushして使っていただければと思います。

結論

HarperDBを使って何でもつくれそうな予感がするこの頃です。

React Hook FormとGetform.ioを使って、お問い合わせフォームを作ろう！

2021-03-09T01:32:10+09:00

React Hook Formが便利らしいと聞いたので使ってみることにしました。

React Hook Form

皆さん、React Hook Formを知ってますか？

最近トレンドに乗っかってきた、FormをReact Hooksで簡単に作ることのできる代物です。

特徴として、Hooksを使って簡単にFormが作れる、そして再レンダリングが最小限に抑えられているのでパフォーマンスも高い、らしいです。

Getform.io

Getform.ioはフォームのバックエンドを提供するすばらしいサービスです。

詳しくはこちらの過去記事をご確認いただければと思います。

React Hook Form + Getform.io

合体！

だめ～となるかと思いましたがうまいことできました。

今回はこちらの2技術を使って、お問い合わせフォームを作っていきます。

実コード

こんな感じのコンポーネントができました。

import React, {useState} from "react";
import { useForm } from "react-hook-form";
import Button from "./button";
type Inputs = {
  name: string,
  email: string,
  subject: string,
  message: string,
};

const ContactForm = (): JSX.Element => {
  const [serverState, setServerState] = useState({ submitting: false, status: {ok: false, msg: ""} });
  const { register, handleSubmit, errors } = useForm();
  const handleServerResponse = (ok: boolean, msg: string) => {
    setServerState({ submitting: true, status: { ok, msg } });
  };
  const onSubmit = (data: Inputs, e: any) => {
    const formData = new FormData();
    formData.append("name", data.name)
    formData.append("email", data.email)
    formData.append("subject", data.subject)
    formData.append("message", data.message)
    fetch('https://getform.io/f/8xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
      method: 'POST',
      body: formData
    })
      .then(() => {
        e.target.reset();
        handleServerResponse(true, "Submitted!");
      })
      .catch((error) => {
        alert(error)
        console.error(error)
        handleServerResponse(false, error.toString());
      });
  }

  return (
  
    
    Your Name

    
    {errors.name && This field is required}
    
    
    
     Your email

    
    {errors.email && This field is required and only email format}
    
    
    
    
      Subject

    
      {errors.subject && This field is required}
    
    
    
    
      Message

              {errors.message && <span>This field is required</span>}
    </label>
    </p>
      <Button dark={serverState.submitting && serverState.status.ok} disabled={serverState.submitting && serverState.status.ok}>
        { serverState.submitting && serverState.status.ok ? serverState.status.msg: 'Submit'}
      </Button>
  </form>
);
}

export default ContactForm
</code></pre>

<h2 id="解説"><a href="#%E8%A7%A3%E8%AA%AC">解説</a></h2>

<h3 id="準備"><a href="#%E6%BA%96%E5%82%99">準備</a></h3>

<p>まず、フォームの項目に該当するTypeを作ります。</p>

<pre><code class="typescript">type Inputs = {
  name: string,
  email: string,
  subject: string,
  message: string,
};
</code></pre>

<p>今回は名前、email、題名、メッセージを設定します。</p>

<p>次に<strong>React Hook Form</strong>のuseFormを使って<strong>register</strong>などを作っていきます。正直これができれば基本的な機能は8割くらい完成です。</p>

<pre><code class="typescript">const { register, handleSubmit, errors } = useForm<Inputs>();
</code></pre>

<p>とりあえず用意するのは、formのrefに設定する<strong>register</strong>、onSubmitをコントロールできる<strong>handleSubmit</strong>、requireを検査できる<strong>errors</strong>です。</p>

<p>ほかにも、form全体の項目検査のformState.isValidなども使うことができます。</p>

<h3 id="Submit"><a href="#Submit">Submit</a></h3>

<p>そして肝心な送信(Submit)部分ですがこちらは<a target="_blank" rel="nofollow noopener" href="https://blog.tubone-project24.xyz/2021/02/13/netlify-github-action#getformio">前記事</a>とほぼ同じように<strong>onSubmit</strong>に合わせて処理する関数を用意して、formの<strong>onsubmit属性</strong>に渡してあげればいいだけです。</p>

<p>........いいだけですが一つ注意として、渡す際に<strong>handleSubmit</strong>で関数をラップしないと、form情報がうまく取れない、ということです。忘れずに設定してくださいませ。</p>

<pre><code class="typescript"> <form onSubmit={handleSubmit(onSubmit)}>
 </form>
</code></pre>

<p>またGetform.ioへのPOSTはJSONではなく<strong>mulitpart/form-data</strong>で渡さないと行けないので、FormDataにappendする形でFormのデータを差し込みます。</p>

<pre><code class="typescript">  const onSubmit = (data: Inputs, e: any) => {
    const formData = new FormData();
    formData.append("name", data.name)
    formData.append("email", data.email)
    formData.append("subject", data.subject)
    formData.append("message", data.message)
    fetch('https://getform.io/f/8xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', {
      method: 'POST',
      body: formData
    })
      .then(() => {
        e.target.reset();
        handleServerResponse(true, "Submitted!");
      })
      .catch((error) => {
        alert(error)
        console.error(error)
        handleServerResponse(false, error.toString());
      });
  }
</code></pre>

<p>また、第二引数として、formのeventが取得できます。おそらくEventは<strong>React.BaseSyntheticEvent</strong>だとは思うのですがうまく型が通せなくて悩みだしてしまいましたのでとりあえずanyにしてしまいました。</p>

<p>一応、<a target="_blank" rel="nofollow noopener" href="https://github.com/react-hook-form/react-hook-form/discussions/4376">こちら</a>で質問は投げてますが英語がへたくそで誰も答えてくれそうにありませんね。</p>

<p>特にeventでデータを取る必要はなさそうですが、たとえば送信時にFormの内容をリセットするなどの処理を書きたいときは</p>

<pre><code class="typescript">        e.target.reset();
        handleServerResponse(true, "Submitted!");
</code></pre>

<p>とやってあげればOKです。</p>

<h3 id="Formを書く"><a href="#Form%E3%82%92%E6%9B%B8%E3%81%8F">Formを書く</a></h3>

<p>さて、あとは普通のFormを作るようにJSXを書いていきます。</p>

<p>唯一違うところはinputやtextareaのref属性にregisterをつけなければいけないですが、それだけで大丈夫です。</p>

<pre><code class="typescript">      <textarea
        name="message" placeholder="Something writing..." rows={6} cols={25} ref={register({required: true })}/>
</code></pre>

<p>ちなみに、registerのパラメーターで、必須項目やパターンの検査もできます。</p>

<pre><code class="typescript">    <input
      name="email"
      type="email"
      placeholder="Enter your email"
      ref={register({ pattern: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i, required: true })} />
</code></pre>

<p>また、検査が通っていないときに警告メッセージを出すのはerrorsをつかうことで実現できます。</p>

<pre><code class="typescript"> {errors.subject && <span>This field is required</span>}
</code></pre>

<p>Form部分をすべて実装するとこんな感じです。</p>

<pre><code class="typescript">  <form onSubmit={handleSubmit(onSubmit)}>
    <p>
    <label>Your Name<br/>
    <input
      name="name"
      placeholder="Enter your name"
      type="text"
      ref={register({ required: true })} />
    {errors.name && <span>This field is required</span>}
    </label>
    </p>
    <p>
    <label> Your email<br/>
    <input
      name="email"
      type="email"
      placeholder="Enter your email"
      ref={register({ pattern: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i, required: true })} />
    {errors.email && <span>This field is required and only email format</span>}
    </label>
    </p>
    <p>
    <label>
      Subject<br/>
    <input
      name="subject"
      type="text"
      maxLength={30}
      placeholder="Subject here..."
      ref={register({required: true })} />
      {errors.subject && <span>This field is required</span>}
    </label>
    </p>
    <p>
    <label>
      Message<br />
      <textarea
        name="message" placeholder="Something writing..." rows={6} cols={25} ref={register({required: true })}/>
        {errors.message && <span>This field is required</span>}
    </label>
    </p>
      <Button dark={serverState.submitting && serverState.status.ok} disabled={serverState.submitting && serverState.status.ok}>
        { serverState.submitting && serverState.status.ok ? serverState.status.msg: 'Submit'}
      </Button>
  </form>
</code></pre>

<p>もう完成です。実に簡単ですね。</p>

<p>React Hook Formを使わないと、<a target="_blank" rel="nofollow noopener" href="https://blog.tubone-project24.xyz/2021/02/13/netlify-github-action#getformio">前記事</a>のように、formのonChangeのたびに、setStateしなきゃいけないのですが、すっきり実装できました。</p>

<p>React Hook Formを使わないと</p>

<pre><code class="typescript">  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

(中略)
                  <input
                    type="text"
                    name="name"
                    className="form-control"
                    maxLength="30"
                    minLength="2"
                    required
                    placeholder="Enter your name"
                    onChange={this.handleChange}
                  />
</code></pre>

<p>となります。</p>

<p>出来上がりはただのFormですのでかっこいいCSSを当ててくださいね。</p>

<p></p>

<h2 id="結論"><a href="#%E7%B5%90%E8%AB%96">結論</a></h2>

<p>楽に実装できたので余った時間は担当<strong>ウマ娘</strong>に捧げます。</p>
</article>
<article>
<h1>Next.jsとVercelとRecoilとMaterial Tableを使ってAWSのステータスダッシュボードを作ってみた話</h1>
<p>2021-03-01T01:31:55+09:00</p>
<h2 id="AWSのステータス確認難しいよね"><a href="#AWS%E3%81%AE%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E7%A2%BA%E8%AA%8D%E9%9B%A3%E3%81%97%E3%81%84%E3%82%88%E3%81%AD">AWSのステータス確認難しいよね</a></h2>

<p>AWSを使ったことのある人ならばわかると思いますが、公式がAWSの障害情報を掲載する<a target="_blank" rel="nofollow noopener" href="https://status.aws.amazon.com/">AWS Service Health Dashboard</a>があまり使いやすくないです。</p>

<p></p>

<p>それぞれのリージョンの障害がRSSで配信される形式になっているのですが、わざわざRSSを登録するのもめんどくさいし、Slackとかの連携に乗っけるのもそれはそれで便利なのですが、そもそもSlackを見ていないほかの人でも障害情報を共有したいです。</p>

<p>実は、AWS Service Health Dashboardの情報はJSONで取得することができます。</p>

<p><a target="_blank" rel="nofollow noopener" href="https://status.aws.amazon.com/data.json">https://status.aws.amazon.com/data.json</a></p>

<p>こちらのJSONを活用して勉強がてら使いやすいダッシュボードを作っていきます。</p>

<h2 id="クビになるぞ！"><a href="#%E3%82%AF%E3%83%93%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%9E%EF%BC%81">クビになるぞ！</a></h2>

<p>最近、これといった新しい技術に触れておらず、このままだとクビになりそうなので、そろそろ重い腰を上げてNext.jsを勉強することにしました。</p>

<p>また、Next.jsを使う場合はVercelが便利だよーとのことですので、こちらも使っていきます。</p>

<h2 id="Next.js"><a href="#Next.js">Next.js</a></h2>

<p>Next.jsではpages/api配下に格納したコードについては、サーバーサイドとして振る舞います。</p>

<p>クライアントから直接status情報がかかれたJSONを読みとってもよかったのですが、HTMLの面倒なサニタイジング処理やら、値の補完など面倒なことはサーバーサイドに持ってこようということで、<br />
statusJSONを取得して、フロントに返却するサーバーコードを書いていきます。</p>

<p>次のようなコードになりました。</p>

<pre><code class="typescript">import { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'

export interface AwsStatusResp {
  archive: AwsStatusArchive[]
}

export interface AwsStatusArchive {
  service_name: string
  summary: string
  date: string
  status: string
  details: string
  description: string
  service: string
}

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  axios
    .get<AwsStatusResp>('https://status.aws.amazon.com/data.json')
    .then((resp) => {
      const handlerResp = resp.data.archive.map((x) => ({
        // eslint-disable-next-line @typescript-eslint/camelcase
        service_name: x.service_name,
        summary: x.summary,
        region: x.service.includes('management-console')
          ? 'global'
          : x.service.split('-').slice(1).join('-') === ''
          ? 'global'
          : x.service.split('-').slice(1).join('-'),
        date: x.date,
        status: x.status,
        details: x.details,
        service: x.service.includes('management-console')
          ? 'management-console'
          : x.service.split('-')[0],
        description: x.description
          .replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '')
          .replace(/ /g, '\n'),
      }))
      res.statusCode = 200
      // eslint-disable-next-line no-console
      console.log(handlerResp)
      res.json(handlerResp)
    })
    .catch((error) => {
      console.error(error.response)
      res.statusCode = error.response.status || 500
      res.statusMessage = error.response.statusText || 'InternalServerError'
      res.json({ error: error.response.statusText || 'InternalServerError' })
    })
}

export default handler
</code></pre>

<p>注意点として、必ずハンドラーはexport defaultを指定してあげないこと以外はいたって直感的なコードとなっております。</p>

<p>Vercelに載っけるとわかるのですが、こちらのコード、Lambdaにデプロイされることになります。たしかに見覚えある感じですね。</p>

<p>また、Next.jsと関係ないのですが、axiosのレスポンスに型がつけられるって知ってましたか？</p>

<pre><code class="typescript">export interface AwsStatusResp {
  archive: AwsStatusArchive[]
}

export interface AwsStatusArchive {
  service_name: string
  summary: string
  date: string
  status: string
  details: string
  description: string
  service: string
}

  axios
    .get<AwsStatusResp>('https://status.aws.amazon.com/data.json')
    .then((resp) => { ..........
</code></pre>

<h2 id="Material Table"><a href="#Material+Table">Material Table</a></h2>

<p>Material UI準拠のテーブルとして、Material Tableなるものがありましたので今回採用することにしました。</p>

<pre><code class="typescript">import MaterialTable from 'material-table'
import tableIcons from '../components/tableIcons'

<MaterialTable
          icons={tableIcons}
          columns={[
            { title: 'Service Name', field: 'service_name' },
            { title: 'Service', field: 'service', width: 10 },
            { title: 'Region', field: 'region', lookup: regionNameMapping },
            { title: 'Summary', field: 'summary' },
            {
              title: 'Date (' + dayjs.tz.guess() + ')',
              field: 'date',
              render: (rowData) => (
                <div>
                  {dayjs
                    .unix(Number(rowData.date))
                    .format('YYYY-MM-DDTHH:mm:ssZ[Z]')}
                </div>
              ),
              defaultSort: 'desc',
              type: 'string',
            },
            {
              title: 'Status',
              field: 'status',
              lookup: statusMapping,
            },
          ]}
          data={aws}
          detailPanel={[
            {
              tooltip: 'Details',
              render: (rowData) => {
                return (
                  <>
                    <div className="title">{rowData.summary}</div>
                    <div className="description">
                      {dayjs
                        .unix(Number(rowData.date))
                        .format('YYYY-MM-DDTHH:mm:ss')}{' '}
                      {rowData.service_name}
                    </div>
                    <div className="code">{rowData.description}</div>
                  </>
                )
              },
            },
          ]}
          options=<span>{</span><span>{</span>
            filtering: true,
            grouping: true,
            exportButton: true,
            exportFileName: 'exported',
            headerStyle: {
              backgroundColor: '#e77f2f',
              color: '#FFF',
            },
          <span>}</span><span>}</span>
          isLoading={loading}
          actions={[
            {
              // Issue: https://github.com/mbrn/material-table/issues/51
              //@ts-ignore
              icon: tableIcons.BarChartIcon,
              tooltip: 'Show Bar Chart',
              isFreeAction: true,
              disabled: loading,
              onClick: async () => {
                setShowGraph(!showG)
              },
            },
            {
              // Issue: https://github.com/mbrn/material-table/issues/51
              //@ts-ignore
              icon: tableIcons.Refresh,
              tooltip: 'Refresh Data',
              isFreeAction: true,
              disabled: loading,
              onClick: async () => {
                setLoading(true)
                await getAwsStatus()
              },
            },
          ]}
          title={
            <div className="header">
              
              <a href="https://aws-health-dashboard.vercel.app/">
                AWS Health Dashboard
              </a>
            </div>
          }
        />
</code></pre>

<p>使い方もシンプルかつ比較的高機能でいい感じです。</p>

<p>いい感じですが後述するRecoilとの相性問題とDatetimeの扱いが微妙なのがツラミでした。</p>

<p>本当はDate型を渡してあげるとSearchableの際、カレンダーでの絞り込みができるのかなと思ったのですが、こちらがうまくいきませんでした。</p>

<p>あと、微妙に型もおかしく例えば、actionsはactionを複数指定することができるはずですが、型チェックで怒られるので、仕方なくts-ignoreしてます。</p>

<p>あなたが直せばいいじゃんアゼルバイジャンって言われそうですが、めんどくさくなってしまいIssueだけあげてしまいました。申し訳ねぇ...。</p>

<p><a target="_blank" rel="nofollow noopener" href="https://github.com/mbrn/material-table/issues/2762">https://github.com/mbrn/material-table/issues/2762</a></p>

<h2 id="Recoil"><a href="#Recoil">Recoil</a></h2>

<p>RecoilとはReactの新しい状態管理ライブラリで、いわゆるReact HooksでGlobal Storeを作ろうというものです。</p>

<p>基本的な使い方はまず、storeとしてatomという共有ステートを作成します。</p>

<p>atomのkeyはプロジェクトで一意にする必要がありますが、今回はそこまで大規模なプロジェクトではないのでawsとかいうクソ名をつけてます。</p>

<p>storeなので、store/aws.ts として格納します。</p>

<pre><code class="typescript">import { atom } from 'recoil'

const awsState = atom({
  key: 'aws',
  default: [
    {
      // eslint-disable-next-line @typescript-eslint/camelcase
      service_name: 'Auto Scaling (N. Virginia)',
      summary: '[RESOLVED] Example Error',
      date: '1542849575',
      status: '1',
      details: '',
      description:
        'The issue has been resolved and the service is operating normally.',
      service: 'autoscaling',
      region: 'us-east-1',
    },
  ],
  dangerouslyAllowMutability: true,
})

export default awsState
</code></pre>

<p>次にステートを共有したいコンポーネントのルートにRecoilRootを設置します。</p>

<p>Next.jsの場合、_app.tsxが全ページのルートにあたるのでここに置けばいいですね。</p>

<pre><code class="typescript">import { AppProps } from 'next/app'
import Head from 'next/head'
import { RecoilRoot } from 'recoil'
import React from 'react'

const App = ({ Component, pageProps }: AppProps) => (
  <>
    <RecoilRoot>
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <title>AWS Health Dashboard</title>
      </Head>
      <Component {...pageProps} />
    </RecoilRoot>
  </>
)

export default App
</code></pre>

<p>そして、利用するときはuseRecoilStateをReact Hooksのように利用するだけです。簡単ですね。</p>

<pre><code class="typescript">import React, { useState, useEffect } from 'react'
import { useRecoilState } from 'recoil'
import awsState from '../store/aws'
import showGraph from '../store/showGraph'
import axios from 'axios'
import dayjs from 'dayjs'

dayjs.extend(utc)
dayjs.extend(timezone)

const Alert = (props: AlertProps) => {
  return <MuiAlert elevation={6} variant="filled" {...props} />
}

export const Table = (): JSX.Element => {
  // 20200112: dangerouslyAllowMutabilityでできた
  const [aws, setAws] = useRecoilState(awsState)
  const [showG, setShowGraph] = useRecoilState(showGraph)
  const [loading, setLoading] = useState(true)
  const [slackBarOpen, setSlackBarOpen] = React.useState(false)
  const [apiErrorMsg, setApiErrorMsg] = React.useState('')
  useEffect(() => {
    getAwsStatus()
    setLoading(false)
  }, [])
  const getAwsStatus = () => {
    axios
      .get('/api/aws')
      .then((resp) => {
        setAws(resp.data)
        setLoading(false)
      })
      .catch((error) => {
        console.error(error.response)
        setSlackBarOpen(true)
        setApiErrorMsg(error.response.statusText || 'Error')
        setAws([])
        setLoading(false)
      })
  }
</code></pre>

<p>stateの読み込みはgetterから、書き込みはsetterから行います。</p>

<p>React Hooksに慣れていれば簡単ですね。</p>

<h2 id="思わぬ落とし穴 Material TablesでRecoilが使えない"><a href="#%E6%80%9D%E3%82%8F%E3%81%AC%E8%90%BD%E3%81%A8%E3%81%97%E7%A9%B4+Material+Tables%E3%81%A7Recoil%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84">思わぬ落とし穴 Material TablesでRecoilが使えない</a></h2>

<p>Recoilのatomは基本値の書き換えはset stateを使うことが求められます。ですが、material tablesはテーブルを作るときにdataにIDの書き込みが発生するようでそのままだと怒られてしまいます。</p>

<pre><code>Cannot add property tableData, object is not extensible
</code></pre>

<p>これの解決策はRecoilにstateへの直接的な書き換えを許可することです。こちらはatomのoptionでdangerouslyAllowMutabilityを有効にすることで解決できます。</p>

<pre><code class="typescript">import { atom } from 'recoil'

const awsState = atom({
  key: 'aws',
  default: [
    {

    },
  ],
  dangerouslyAllowMutability: true,
})
</code></pre>

<p>これがわかるのに半日くらい使っちまいました。</p>

<h2 id="Chart.js"><a href="#Chart.js">Chart.js</a></h2>

<p>さて、無事にRecoilでstateの共有ができたのでせっかくなので別コンポーネントも作ります。</p>

<p>意味があるかどうか不明ですが、AWSの障害発生状況を可視化してみようと思います。</p>

<p>ということで、採用したのがChart.js。</p>

<p>次のようにデータを渡すだけできれいめなグラフを書いてくれます。</p>

<pre><code class="typescript">import { useRecoilValue } from 'recoil'
import awsState from '../store/aws'
import React from 'react'
import {
  regionNameMapping,
} from './const'
import BarGraph from './barGraph'

export const AlertPerRegion = (): JSX.Element => {

  const aws = useRecoilValue(awsState)
  const labels = Array.from(
    new Set(aws.map((data) => regionNameMapping[data.region]))
  )
  const data = []
  for (const r of labels) {
    data.push(
      aws
        .map((data) => regionNameMapping[data.region])
        .reduce((total, x) => {
          return x === r ? total + 1 : total
        }, 0)
    )
  }
  return (
    <div className="container">
      <BarGraph labels={labels} data={data} title="Alert per region" />
    </div>
  )
}
</code></pre>

<p>どうでもいい実装ですが、各グラフを一覧で見れる画面を用意し、実際のグラフは遷移先で表示するようにしてます。</p>

<p></p>

<p></p>

<h2 id="Vercelにデプロイ"><a href="#Vercel%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">Vercelにデプロイ</a></h2>

<p>さて、実装ができたので後はVercelにあげるだけです。</p>

<p>もうここはほとんど書くことがないのですが、Next.jsで作ったアプリケーションはVercelでレポジトリと使っているフレームワークを設定するだけで簡単にデプロイ出来てしまいます。</p>

<p>これはすごい。</p>

<h2 id="完成"><a href="#%E5%AE%8C%E6%88%90">完成</a></h2>

<p>ということで、AWS Health Dashboardが完成しました。</p>

<p>アクセスすると、Next.jsのapiをコールし、AWSのstatusを取得加工したものを返却します。</p>

<p>フロントでは受け取ったデータをRecoilのatomに格納しつつ、material tableで表として描画します。</p>

<p>また右上のグラフボタンを押すことで色々な切り口の可視化を行うことができます。</p>

<p><a target="_blank" rel="nofollow noopener" href="https://aws-health-dashboard.vercel.app/">https://aws-health-dashboard.vercel.app/</a></p>

<p>できれば使う場面にならないことを祈りつつ、ご活用いただければとおもいます。</p>

<h2 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h2>

<p>食わず嫌いでやらなかったNext.js+Recoilをやってみましたが、楽しく実装ができました。</p>

<h2 id="2021/02/20追記"><a href="#2021%2F02%2F20%E8%BF%BD%E8%A8%98">2021/02/20追記</a></h2>

<p>2021/02/19～20にかけて起きた<a target="_blank" rel="nofollow noopener" href="https://status.aws.amazon.com/rss/ec2-ap-northeast-1.rss">AWS EC2障害</a>ですが、本ダッシュボードでは更新がされませんでした。</p>

<p>どうやら、data.jsonはRSSとは違い、同期的に更新されないようです。</p>

<p>大変ご迷惑をおかけしました。改めて、改修しRSS更新にも対応できるように頑張ります。</p>
</article>
<article>
<h1>Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう！</h1>
<p>2021-02-20T15:13:23+09:00</p>
<h1 id="Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう！"><a href="#Netlify%E3%81%AE%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E9%96%93%E3%82%92GitHub+Actions%E3%81%A70%E6%99%82%E9%96%93%E3%81%AB%E3%81%97%E3%81%A6%E6%9C%88%E6%9C%AB%E3%81%AE%E3%83%92%E3%83%A4%E3%83%92%E3%83%A4%E3%81%8B%E3%82%89%E8%A7%A3%E6%94%BE%E3%81%95%E3%82%8C%E3%82%88%E3%81%86%EF%BC%81">Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう！</a></h1>

<h2 id="Netlify"><a href="#Netlify">Netlify</a></h2>

<p>みなさんもご存じ超便利ありがたサービスNetlifyですが、<strong>無料で使ってる貧民</strong>には毎月とある悩みがでてきます。</p>

<p><em>今月のビルド時間は残り○○分</em></p>

<p></p>

<p>NetlifyはGitHubのレポジトリと連携して、フロントのビルドを実行した上で、デプロイするという超便利機能があるのですが、このビルドを回すのに時間の制約があり、</p>

<p>無料民だと月300分となっております。(それ以上はPro版月19ドル課金すれば問題なく使えます。課金も経験済み)</p>

<p>300分あれば大丈夫そう、とそう思う気もしなくなくもないですが、</p>

<p>複数レポジトリにわたってNetlifyを使っていたり、Gatsby.jsで画像をたくさん使っていて<strong>Sharp</strong>の画像リサイズに時間がかかったり、<strong>Dependabot</strong>で定期的にPRが出てPreview deployが発生したりすると<br />
案外ぎりぎりだったりします。</p>

<p></p>

<p>なので、私のような貧民は月末になると、Netlifyのビルド時間が気になって<strong>このブログの記事を書かなくなったり</strong>、<strong>サイトリファクターのペースが落ちて</strong>しまいます。</p>

<p>特にブログ更新は顕著で、例えば今書いている記事も通勤の電車の中でスマホから書いているわけなので、細かくコミットを打って保存したいのですが、コミットを打ってプッシュしてしまうと、ビルドが走ることになるので、WIPでのコミットが億劫になり、結果的に家のようなまとめてプッシュできるような作業スペースがある場所でないと、<br />
ブログを書かなくなってしまいました。</p>

<p>せっかく<a target="_blank" rel="nofollow noopener" href="https://blog.tubone-project24.xyz/2019-09-01-netlify-and-gatsby#cms%E3%81%AE%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">Netlify CMS化</a>した意味がないですね。</p>

<h2 id="この悩みGitHub Actionsにお任せください"><a href="#%E3%81%93%E3%81%AE%E6%82%A9%E3%81%BFGitHub+Actions%E3%81%AB%E3%81%8A%E4%BB%BB%E3%81%9B%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84">この悩みGitHub Actionsにお任せください</a></h2>

<p>ということでこの悩み、GitHub Actionsで解決してみたいと思います。</p>

<p>なんか工務店のCMみたいな表現になってしまいました。</p>

<p></p>

<h2 id="Netlifyのビルド時やっていることを洗い出して自前でやってみる"><a href="#Netlify%E3%81%AE%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E3%82%84%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E6%B4%97%E3%81%84%E5%87%BA%E3%81%97%E3%81%A6%E8%87%AA%E5%89%8D%E3%81%A7%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">Netlifyのビルド時やっていることを洗い出して自前でやってみる</a></h2>

<p>基本的にNetlifyがビルド時やってることは、例えばGatsby.jsであれば、gatsby buildコマンドを実行し、特定のディレクトリー(大概は./public)に配置されたビルド済みJSをデプロイする動きなので、<br />
それをそっくりGitHub Actionsに移行すればいいのですが、Netlifyがビルド済みJSに対して後処理(PostProcess)を実行してるパターンもあります。</p>

<p>私の場合、JSやイメージを最適化してくれる<strong>Asset optimization</strong>とFormタグに属性をつければ勝手にFormを作ってくれる<strong>Form detection</strong>の二つが設定されていましたのでそれぞれまず無効化します。</p>

<p>Form detectionの解説は<a target="_blank" rel="nofollow noopener" href="https://blog.tubone-project24.xyz/2019/09/30/netlify-form">こちら</a>を参照ください。</p>

<p></p>

<p></p>

<p>こちら、Netlifyで実施してくれなくなりますので、こちらで実装し直す必要があります。</p>

<h2 id="gatsby-plugin-minify"><a href="#gatsby-plugin-minify">gatsby-plugin-minify</a></h2>

<p>Asset optimizationのうち、JSやCSSのminiferは<a target="_blank" rel="nofollow noopener" href="https://www.gatsbyjs.com/plugins/gatsby-plugin-minify/">gatsby-plugin-minify</a>を使うことでhtmlやJS、CSSをminifyできます。</p>

<p>インストールはいつも通りNPM(yarn)から</p>

<pre><code>npm install gatsby-plugin-minify
</code></pre>

<p>使い方はgatsby-config.jsのpluginsに次のように設定すればできます。</p>

<pre><code>    {
      resolve: 'gatsby-plugin-minify',
      options: {
        caseSensitive: false,
        collapseBooleanAttributes: true,
        useShortDoctype: false,
        removeEmptyElements: false,
        removeComments: true,
        removeAttributeQuotes: false,
        minifyCSS: true,
        minifyJS: true,
      },
    },
</code></pre>

<p>minifyCSSとminifyJSをtrueにすることにより、CSSについては<a target="_blank" rel="nofollow noopener" href="https://github.com/jakubpawlowicz/clean-css">clean-css</a>、JSについては<a target="_blank" rel="nofollow noopener" href="https://github.com/mishoo/UglifyJS">UglifyJS</a>を使って一緒にminifyされます。また、gatsby-plugin-minifyの裏側は<a target="_blank" rel="nofollow noopener" href="https://github.com/kangax/html-minifier">html-minifier</a>をgatsby-node.jsでpostbuildで全掛けしているだけなので、細かいオプションは<a target="_blank" rel="nofollow noopener" href="https://github.com/kangax/html-minifier#options-quick-reference">html-minifier</a>で設定できる感じです。</p>

<p>ちなみに、気を付けないといけないのが<strong>removeAttributeQuotes</strong>のオプションをfalseにすること。</p>

<p>これをtrueにすると、HTMLタグ内のアトリビュートにダブルクオートが入らなくなりちょっとファイルが軽くなるのですが、<a target="_blank" rel="nofollow noopener" href="https://berss.com/feed/Find.aspx">berss.com</a>のようにサイトのRSSリンクを取得するようなシステムでうまく読み込めなくなってしまい、サイト更新が最悪通知できなくなってしまう現象が発生しました。</p>

<p>これで1日使ってしまった...。</p>

<p>RSSのリンクをページのLinkとして仕込んでいる人は要注意です。</p>

<h2 id="imgurを使うことで、画像ホスティングとリサイズを同時にやっちゃう"><a href="#imgur%E3%82%92%E4%BD%BF%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%80%81%E7%94%BB%E5%83%8F%E3%83%9B%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A8%E3%83%AA%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E5%90%8C%E6%99%82%E3%81%AB%E3%82%84%E3%81%A3%E3%81%A1%E3%82%83%E3%81%86">imgurを使うことで、画像ホスティングとリサイズを同時にやっちゃう</a></h2>

<p><a target="_blank" rel="nofollow noopener" href="https://imgur.com/">imgur</a>というサービスがあります。</p>

<p>主にRedditとかGifをあげるための画像ホスティングサービスとして有名なのですが、こちらを使うことで簡単に画像のリサイズとホスティングを実現できるため、このブログではimgurを使ってます。</p>

<p>画像URLの後ろに画像サイズに合わせたキーワードを入れることで実現できます。</p>

<p>例えばこちらのURLの画像を</p>

<pre><code>[https://i.imgur.com/Wfz9G0B.png](https://i.imgur.com/Wfz9G0B.png)
</code></pre>

<p>160x160にリサイズするには後ろに<strong>b</strong>をくっつけます。</p>

<pre><code>[https://i.imgur.com/Wfz9G0Bb.png](https://i.imgur.com/Wfz9G0Bb.png)
</code></pre>

<p>これで、画像最適化も完了です。</p>

<h2 id="getform.io"><a href="#getform.io">getform.io</a></h2>

<p><a target="_blank" rel="nofollow noopener" href="https://getform.io/">Getform.io</a>はフォームのバックエンドを提供するすばらしいサービスです。</p>

<p>便利なインテグレーションを使うには有料版が必要ですが、フォームに投稿されたら指定したメールアドレスに通知メール飛ばす、くらいのことであれば無料でできます。</p>

<p>これで、NetlifyのForm detectionを置き換えていきます。</p>

<p>まず、新しいフォームを作ると、FormのAction先URLが発行できます。</p>

<p>Formの作り方は下記のブログにわかりやすく纏めてあったので参照いただければと思います。</p>

<p><a target="_blank" rel="nofollow noopener" href="https://blog.nakamu.life/posts/getform-io">https://blog.nakamu.life/posts/getform-io</a></p>

<p>さて、Formができたらチュートリアルに沿ってそのまま、FormタグのactionにこちらのURLを設定してもいいのですが、GetFormは無料版だと、<strong>Form投稿後のThanksページが設定</strong>できません。</p>

<pre><code class="html"><!--
* Add your getform endpoint into "action" attribute
* Set a unique "name" field
* Start accepting submissions
-->
<form action="{getform-endpoint}" method="POST">

  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">Send</button>

</form>
</code></pre>

<p></p>

<p>まぁこれでも十分なのですが、せっかく<strong>React</strong>を使ってるので、裏側でgetform.ioのURLをPOST fetchしながら、actionsで定義した自分のThanks URLに飛ばすように指定しましょう。</p>

<p>まずは、Formに<strong>onSubmit</strong>を設定します。</p>

<p>```typescript{numberLines: 1}{5}<br />
        <form
              name="contact"
              method="post"
              action="/thanks/"
              onSubmit={this.handleSubmit}
            ><br />
                <label><br />
                  <span className="icon-user" /> Your name<br /><br />
                  <input
                    type="text"
                    name="name"
                    className="form-control"
                    maxLength="30"
                    minLength="2"
                    required
                    placeholder="Enter your name"
                    onChange={this.handleChange}
                  /><br />
                </label><br />
              </p></p>

<pre><code><br />そして、別途にonSubmitで発火する関数を定義します。

```typescript
  handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    fetch('https://getform.io/f/xxxxxxxxxxxxxxxxxxxxxxxxx', {
      method: 'POST',
      body: Contact.encode({
        'form-name': form.getAttribute('name'),
        ...this.state,
      }),
    })
  }
</code></pre>

<p>Formの送信なので、fetchでは<a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/ja/docs/Web/API/FormData">FormData</a>に要素をappendしたものを送信しないといけません。</p>

<pre><code>  static encode(data) {
    const formData = new FormData();
    // eslint-disable-next-line no-restricted-syntax
    for (const key of Object.keys(data)) {
      formData.append(key, data[key]);
    }
    return formData;
  }
</code></pre>

<p>繰り返しになりますがReactではFormで、actionのほか、onSubmitを関数としてすることができます。</p>

<p>ただし、onSubmitが押されたタイミングで、Formの入力項目をPOST Fetchで渡さないといけないので、Formの入力で発生するchangeEventごとに、Formの値をstateとして保存しておくようにします。</p>

<p>```typescript{numberLines: 1}{1-7,21}<br />
  handleChange(e) {<br />
    this.setState({ [e.target.name]: e.target.value });<br />
  }</p>

<p>handleAttachment(e) {<br />
    this.setState({ [e.target.name]: e.target.files[0] });<br />
  }</p>

<p>(中略)</p>

<pre><code>            <label>
              <span className="icon-user" /> Your name<br />
              <input
                type="text"
                name="name"
                className="form-control"
                maxLength="30"
                minLength="2"
                required
                placeholder="Enter your name"
                onChange={this.handleChange}
              />

            </label>
          </p>
</code></pre>

<pre><code><br />また、onSubmitを使ってしまうと、Form規定のactionでは飛ばなくなるので自前でGatsbyのnavigateを使ってPost処理が終わったらThanksページに飛ぶようにします。

```typescript{numberLines: 1}{11-12}
  handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    fetch('https://getform.io/f/897f187e-876d-42a7-b300-7c235af72e6d', {
      method: 'POST',
      body: Contact.encode({
        'form-name': form.getAttribute('name'),
        ...this.state,
      }),
    })
      .then(() => navigateTo(form.getAttribute('action')))
      .catch((error) => alert(error));
  }
</code></pre>

<p>これでGetForm無料版でも自前のThanksページを作ることができます。</p>

<p></p>

<h2 id="GitHub Actionsでビルドとデプロイ"><a href="#GitHub+Actions%E3%81%A7%E3%83%93%E3%83%AB%E3%83%89%E3%81%A8%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">GitHub Actionsでビルドとデプロイ</a></h2>

<p>ここまで来たらあとはGitHub Actionsでビルドとデプロイを行うだけです。</p>

<p>masterブランチへのPRでPreviewデプロイ、masterへのコミットで本番デプロイをするように2つactionsを作ります。</p>

<p>まずはPreviewデプロイ</p>

<pre><code class="yaml">name: DeployToNetlifyPreview
on:
  pull_request:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: $<span>{</span><span>{</span> runner.OS <span>}</span><span>}</span>-build-$<span>{</span><span>{</span> hashFiles('**/package-lock.json') <span>}</span><span>}</span>
          restore-keys: |
            $<span>{</span><span>{</span> runner.OS <span>}</span><span>}</span>-build-
            $<span>{</span><span>{</span> runner.OS <span>}</span><span>}</span>
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: npm install and build
        env:
          GATSBY_GITHUB_CLIENT_SECRET: $<span>{</span><span>{</span>secrets.GATSBY_GITHUB_CLIENT_SECRET<span>}</span><span>}</span>
          GATSBY_GITHUB_CLIENT_ID: $<span>{</span><span>{</span>secrets.GATSBY_GITHUB_CLIENT_ID<span>}</span><span>}</span>
          GATSBY_ALGOLIA_SEARCH_API_KEY: $<span>{</span><span>{</span>secrets.GATSBY_ALGOLIA_SEARCH_API_KEY<span>}</span><span>}</span>
          GATSBY_ALGOLIA_INDEX_NAME: $<span>{</span><span>{</span>secrets.GATSBY_ALGOLIA_INDEX_NAME<span>}</span><span>}</span>
          GATSBY_ALGOLIA_APP_ID: $<span>{</span><span>{</span>secrets.GATSBY_ALGOLIA_APP_ID<span>}</span><span>}</span>
          GATSBY_ALGOLIA_ADMIN_API_KEY: $<span>{</span><span>{</span>secrets.GATSBY_ALGOLIA_ADMIN_API_KEY<span>}</span><span>}</span>
          FAUNADB_SERVER_SECRET: $<span>{</span><span>{</span>secrets.FAUNADB_SERVER_SECRET<span>}</span><span>}</span>
        run: |
          npm install
          npm run build
      - name: Deploy to netlify
        run: npx netlify-cli deploy --dir=./public > cli.txt
        env:
          NETLIFY_AUTH_TOKEN: $<span>{</span><span>{</span> secrets.NETLIFY_AUTH_TOKEN <span>}</span><span>}</span>
          NETLIFY_SITE_ID: $<span>{</span><span>{</span> secrets.NETLIFY_SITE_ID <span>}</span><span>}</span>
      - name: Cat cli.txt
        run: |
          cat cli.txt
          sed -i -z 's/\n/\\n/g' cli.txt
      - name: Post Netlify CLI Comment
        env:
          GITHUB_TOKEN: $<span>{</span><span>{</span> secrets.GITHUB_TOKEN <span>}</span><span>}</span>
          URL: $<span>{</span><span>{</span> github.event.pull_request.comments_url <span>}</span><span>}</span>
        run: |
          curl -X POST \
               -H "Authorization: token ${GITHUB_TOKEN}" \
               -d "{\"body\": \"$(cat cli.txt)\"}" \
               ${URL}
</code></pre>

<p>node setupやnpm install, buildはいつも通りです。</p>

<p>GitHub ActionsではSecretを指定することができますので、Algolia searchやFaunaDBのAPIキーはシークレットとしてビルド時の環境変数で渡してます。</p>

<p>ちなみに、環境変数で<strong>GATSBY_XXXX</strong>としておくと、ビルドされたJSにも環境変数が入る形になります。（JSから環境変数を使う場合はこれを忘れないこと。）これ結構詰まるポイント。</p>

<p>デプロイには<a target="_blank" rel="nofollow noopener" href="https://docs.netlify.com/cli/get-started/">netlify-cli</a>を使います。</p>

<p>必要な環境変数はサイトIDとAUTH TOKENです。</p>

<p>ちょっと特徴として、netlify-cliでデプロイが成功すると、<strong>デプロイURLが標準出力</strong>に出ますので、それをいったん適当なtextファイルに書き出し、</p>

<p>PRコメントにもURLを送るようにしています。</p>

<p>GitHub Actionsの素晴らしいところは、GITHUB TOKENについては、特に設定しなくてもsecrets.GITHUB_TOKENで取り出すことができますので簡単にPRコメントに送信できます。</p>

<pre><code class="yaml">      - name: Deploy to netlify
        run: npx netlify-cli deploy --dir=./public > cli.txt
        env:
          NETLIFY_AUTH_TOKEN: $<span>{</span><span>{</span> secrets.NETLIFY_AUTH_TOKEN <span>}</span><span>}</span>
          NETLIFY_SITE_ID: $<span>{</span><span>{</span> secrets.NETLIFY_SITE_ID <span>}</span><span>}</span>
      - name: Cat cli.txt
        run: |
          cat cli.txt
          sed -i -z 's/\n/\\n/g' cli.txt
      - name: Post Netlify CLI Comment
        env:
          GITHUB_TOKEN: $<span>{</span><span>{</span> secrets.GITHUB_TOKEN <span>}</span><span>}</span>
          URL: $<span>{</span><span>{</span> github.event.pull_request.comments_url <span>}</span><span>}</span>
        run: |
          curl -X POST \
               -H "Authorization: token ${GITHUB_TOKEN}" \
               -d "{\"body\": \"$(cat cli.txt)\"}" \
               ${URL}
</code></pre>

<p>次に本番へのデプロイです。</p>

<pre><code class="yaml">name: DeployToNetlifyPRD
on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
      - name: Cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: $<span>{</span><span>{</span> runner.OS <span>}</span><span>}</span>-build-$<span>{</span><span>{</span> hashFiles('**/package-lock.json') <span>}</span><span>}</span>
          restore-keys: |
            $<span>{</span><span>{</span> runner.OS <span>}</span><span>}</span>-build-
            $<span>{</span><span>{</span> runner.OS <span>}</span><span>}</span>
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: npm install and build
        env:
          GATSBY_GITHUB_CLIENT_SECRET: $<span>{</span><span>{</span>secrets.GATSBY_GITHUB_CLIENT_SECRET<span>}</span><span>}</span>
          GATSBY_GITHUB_CLIENT_ID: $<span>{</span><span>{</span>secrets.GATSBY_GITHUB_CLIENT_ID<span>}</span><span>}</span>
          GATSBY_ALGOLIA_SEARCH_API_KEY: $<span>{</span><span>{</span>secrets.GATSBY_ALGOLIA_SEARCH_API_KEY<span>}</span><span>}</span>
          GATSBY_ALGOLIA_INDEX_NAME: $<span>{</span><span>{</span>secrets.GATSBY_ALGOLIA_INDEX_NAME<span>}</span><span>}</span>
          GATSBY_ALGOLIA_APP_ID: $<span>{</span><span>{</span>secrets.GATSBY_ALGOLIA_APP_ID<span>}</span><span>}</span>
          GATSBY_ALGOLIA_ADMIN_API_KEY: $<span>{</span><span>{</span>secrets.GATSBY_ALGOLIA_ADMIN_API_KEY<span>}</span><span>}</span>
          FAUNADB_SERVER_SECRET: $<span>{</span><span>{</span>secrets.FAUNADB_SERVER_SECRET<span>}</span><span>}</span>
        run: |
          npm install
          npm run build
      - name: Deploy to netlify
        run: npx netlify-cli deploy --prod --dir=./public
        env:
          NETLIFY_AUTH_TOKEN: $<span>{</span><span>{</span> secrets.NETLIFY_AUTH_TOKEN <span>}</span><span>}</span>
          NETLIFY_SITE_ID: $<span>{</span><span>{</span> secrets.NETLIFY_SITE_ID <span>}</span><span>}</span>
</code></pre>

<p>ほとんど同じですが、netlify-cliでdeployコマンドに --prodオプションを入れることで、本番環境へデプロイされます。</p>

<pre><code class="yaml">      - name: Deploy to netlify
        run: npx netlify-cli deploy --prod --dir=./public
        env:
          NETLIFY_AUTH_TOKEN: $<span>{</span><span>{</span> secrets.NETLIFY_AUTH_TOKEN <span>}</span><span>}</span>
          NETLIFY_SITE_ID: $<span>{</span><span>{</span> secrets.NETLIFY_SITE_ID <span>}</span><span>}</span>
</code></pre>

<h2 id="結論"><a href="#%E7%B5%90%E8%AB%96">結論</a></h2>

<p>これで、Netlifyのビルド時間は0になり、精神的に安心できるようになりました。</p>

<p></p>

<p>リファクタや記事の執筆もはかどっていいですね！！</p>
</article>
</main></body></html>