Posts for: #Mermaid

ローカルにコンテナレジストリを構築する

出張する日は寝ないで資料を作ったりバグ修正したりして始発の新幹線の中で寝てた。寝てなくて疲れているせいか、新幹線で寝るのに慣れたのか、わりと2-3時間ぐっすり新幹線で眠れるようになってきた。普通にベッドで寝ても3時間ぐらいしか眠れないので睡眠時間はあまり変わらない。

docker registry の構築

先日の調査 の続き。Deploy a registry server に書いてあることを実際にローカルで検証した。

tls の自己証明書の作成。subjectAltName という設定をするように書いてある。

$ openssl req -newkey rsa:4096 -nodes -sha256 -keyout certs/domain.key -addext "subjectAltName = DNS:myhost.mydomain.example.com" -x509 -days 365 -out certs/domain.crt

basic 認証のための htpasswd の設定。htpasswd とか懐かしいなと思いながら実行した。

$ docker run --entrypoint htpasswd httpd:2 -Bbn user1 secret1 >> dot_htpasswd
$ docker run --entrypoint htpasswd httpd:2 -Bbn user2 secret2 >> dot_htpasswd

docker 社が提供する oss な docker registry サーバーを使って起動する。

$ mkdir /mnt/registry  # docker image を永続化する場所
$ sudo docker run -d \
  --restart=always \
  --name registry \
  -v "$(pwd)"/auth:/auth \
  -e "REGISTRY_AUTH=htpasswd" \
  -e "REGISTRY_AUTH_HTPASSWD_REALM=Registry Realm" \
  -e "REGISTRY_AUTH_HTPASSWD_PATH=/auth/dot_htpasswd" \
  -v "$(pwd)"/certs:/certs \
  -e "REGISTRY_HTTP_ADDR=0.0.0.0:443" \
  -e "REGISTRY_HTTP_TLS_CERTIFICATE=/certs/domain.crt" \
  -e "REGISTRY_HTTP_TLS_KEY=/certs/domain.key" \
  -p 8443:443 \
  -v /mnt/registry:/var/lib/registry \
  registry:2

これで basic 認証付きで https で通信できる docker registry サーバーができた。

外部のマシンから dokcer login しようとすると次のようなエラーが発生する。

$ docker login myhost.mydomain.example.com:8443
Username: user2
Password: ***
Error response from daemon: Get "https://myhost.mydomain.example.com:8443/v2/": x509: certificate signed by unknown authority

Test an insecure registry によると、自己証明書を使って外部からアクセスできるようにするためには docker client 側にさっき作った domain.crt をコピーする必要がある。

linux だとこんな設定。

$ cp domain.crt /etc/docker/certs.d/myhost.mydomain.example.com:8443/ca.crt 

Docker Desktop for Mac を使っている場合はこんな感じ。

> security add-trusted-cert -d -r trustRoot -k ~/Library/Keychains/login.keychain path/to/certs/domain.crt

これで外部からも docker login して任意の docker image を push/pull できるようになる。docker registry サーバーは Let’s Encrypt をサポートしているそうなので How It Works を参照して設定すればよいと書いてあった。

mdbook の初期設定

mdbook は新しい rust のバージョンだとビルドできなかったりするので rustup を使ってローカルに rustc をインストールするのがよいかもしれない。プラグインとしては mdbook-mermaid を使う。

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ ~/.cargo/bin/rustc --version
$ cargo install mdbook mdbook-mermaid

mdbook-mermaid の設定も簡単でドキュメントルート配下に mermaid の js ファイルを配置すると動いた。

$ vi book.toml
[preprocessor.mermaid]
command = "mdbook-mermaid"

[output.html]
additional-js = ["mermaid.min.js", "mermaid-init.js"]

デジタルノマドへの関心

0時に寝て2時に起きて6時に起きた。いまは眠れる状態に落ち着きつつある。

pandoc と mermaid charts の扱い

markdown のドキュメントに mermaid で図を描く機会が増えてきた。markdown を pdf に変換するツールがあって内部的に pandoc を使っている。そのツールで pdf 変換してみたら mermaid 記法がそのままテキストで出力されたので変換するときに図に置き換えられないかを調べてみた。例えば、次のようにして markdown から html に変換できる。

$ pandoc mydoc.md -f gfm -o mydoc.html

次のように mermaid 記法がそのまま出力される。

<pre class="mermaid"><code>flowchart TB

subgraph cr [Container Registry]
  repo[repository]
end
...

mermaid を cli ツールとして mermaid-cli がある。markdown を直接渡しても mermaid のコードブロックを検出して画像変換してくれる。複数あってもよい。これはちょっと驚いた。

$ git clone git@github.com:mermaid-js/mermaid-cli.git
$ cd mermaid-cli
$ yarn add @mermaid-js/mermaid-cli
$ npx mmdc --version
9.1.7
$ npx mmdc -i mydoc.md -o mydiagram.png
Found 2 mermaid charts in Markdown input
 ✅ ./mydiagram-1.png
 ✅ ./mydiagram-2.png

cli でできるなら何とでもなるんじゃないかともう少し調べていたら次の gist をみつけた。

pandoc filters という仕組みがあって、pandoc の ast を操作するためのインターフェースを提供している。その仕組みを使って mermaid の変換を行う mermaid-filter を誰かが作ってくれていた。このツールをインストールして次のように pandoc を実行すると base64 でエンコードした画像を使って html に変換できた。

$ npm i -g mermaid-filter
$ pandoc mydoc.md -F mermaid-filter -f gfm -o mydoc.html
$ vi mydoc.html
<p>システム構成図</p>
<p><img src="data:image/png;base64,iVBORw0KGgoAAAANSU...EnAAAAAElFTkSuQmCC" alt="" /></p>

mermaid-cli を使うか mermaid-filter を使うかは要件や好みにもよるけど、すでにツールがあるので組み合わせれば何とかできそうというところまで確認した。

コワーキングのオンラインイベント

月例のカフーツさんのオンラインイベントに参加した。先月の所感はここ 。いとうさんが岩手県普代村のコワーキングスペースに行ってきてそのお話しから始まった。私はまだ岩手県に行ったことすらないんやけど、めっちゃ田舎の、断崖絶壁の眺めのよい高台にある国民宿舎にコワーキングスペースがあるらしい。

研修の講師として、いとうさんは呼ばれてワークショップをしたらしい。参加者が付箋に課題を書き出してグループワークするといった作業に不慣れで、グループ内で話しはしているものの、あまり付箋に書いてくれなかったとかぼやいていた。地域おこし協力隊 として19歳の隊員が参加者にいたらしい。19歳で地域おこし協力隊になれるの?といとうさんが驚いていた。どうやら年齢は自治体の募集要項次第らしく、たまたま普代村の要項が18歳以上で自治体もまさかそんな若い人がくるとは思ってなかったと19歳の隊員が活躍していたという。若いから頭の回転も速いし活発でワークショップもてきぱきとこなしていたらしい。

先月のお仕事探しでマネージャー実績のない私を雇う会社はほぼないという現実に直面した。いまのお仕事を終えた後で、地域おこし協力隊の要件を私が満たすなら課題管理を実践する場として行ってみてもいいかもしれないなと話しを聞いていて少し思った。ソフトウェア開発に特化した課題管理しかできないというスコープの狭さが私のスキルの欠点でもある。仮に地域おこし協力隊としてなにかに役立てられるなら、そのスコープをさらに広げられる可能性も出てくる。

それから次の記事の話題に移っていった。Nomad List というデジタルノマド向けポータル兼 sns のようなサイトを紹介してくれた。

試しに kobe のスコアをみてみる。現時点のランキングは1182位と低い。日本はこの2年ほどコロナ禍で鎖国していたからノマドを受け入れてないのでどの都市もランキングは下がっているらしい。ざっとみてスコアがよくないのは次の項目。神戸に住んでいる私の感覚とも合致しているのでこのスコアは一定の信頼ができると思う。神戸の大半のお店は21時までには閉まるし、スタートアップ企業なんか数えるほどしかいない。とはいえ、全体としてはスコアは良好だし世界に誇れる都市の1つとしてデジタルノマドを受け入れる器はあると思う。

  • Cost
  • Vulnerability to climate change
  • English speaking
  • Nightlife
  • Free WiFi in city
  • Startup Score

あと 徳島県美馬市脇町 の町興しのようなコワーキングやデジタルノマド向けの取り組みの話しがあって関心をもって聞いていた。徳島県なら実家から近い。こんな場所あったんやと聞いていた。このサイトで紹介されているのどけやさんというゲストハウスはいつ行っても外国人がいるといとうさんが話されていた。そう言われると本当なんやろか?と確かめに行きたくなる。たぶん実家から車で1時間もあれば行けそうな気がする。

ログおじさん

23時に寝て3時半に起きて眠れそうになかったからそのまま5時からオフィスで作業してた。

システム構成の検討

コンサルタントから顧客要件のヒアリングを行い、プロダクトを提供するインフラのシステム概要を mermaid で書いた。オンプレとクラウド環境のそれぞれを同じコンテナアプリケーションで動かすための構成を検討した。クラウド環境の一例として aws の構成を考えていて、https と http のプロトコル変換のようなことをするには api gateway を経由しないといけないと考えていたら、alb に証明書を設定して api gateway なくてもいけるとはらさんに教えてもらった。昔からできたそうで、なぜか私が長い間ずっと勘違いしていた。また時間があるときに自分でもやってみようと思う。

Logger の再実装

プロダクトのコアな部分の実装は私がみた方がよいだろうと考えていて、そのうちの1つ Logger の設計がよくなかったので私が作り直した。といっても cybozu-go/log を使った薄いラッパーを設けただけ。チームメンバーからどこでエラーが起きているか追跡しにくいという声があったのでログ出力したところのソースコードの情報を出力しようと考えた。ググればたくさん出てくる。スタックフレームにアクセスする標準パッケージとして runtime を使うとできる。runtime.Caller と runtime.Callers は似て非なる関数のようでファイル名と行番号だけでよければ Caller を使った方がシンプルになると思う。関数名もほしかったら Callers を使ったスタックフレーム自体から取得する必要がある。

func Trace(skip int) (file string, funcName string) {
  pc := make([]uintptr, 15)
  n := runtime.Callers(skip, pc)
  frames := runtime.CallersFrames(pc[:n])
  frame, _ := frames.Next()
  _file := frame.File[strings.Index(frame.File, sourceRepositoryPath)+8:]
  file = fmt.Sprintf("%s:%d", _file, frame.Line)
  return file, frame.Function
}

この情報を cybozu-go/log の map に追加するようなログ関数を提供するようにした。cybozu-go/log は標準の log パッケージに足りないところだけを追加していて、そのシンプルさと拡張性の高さを私は気に入ってよく使っている。私が気に入っているのでもっと有名になってほしい。

前のお手伝いでもログ基盤を含めて Logger を作っていて、またいまも Logger を作り直していて、気付いたら私は Logger やログ出力に一家言あるような、ログおじさんになりつつある。

まずは定例会議から言語化する

23時ぐらいに寝て2回ぐらい起きて7時に起きた。やっぱり家だとうまく眠れない。

mermaid の er 図

メンバーが mermaid の Entity Relationship Diagrams でデータモデルの図を書いてくれてレビューしてた。見た目もすっきりしていて、テキストも書きやすい方だと思うので印象はよかった。gitlab でもリポジトリや wiki で mermaid で書いた図を表示できた。

定例会議の進め方

マネージャーっぽいお仕事の1つとして定例会議を週に1回行う。スクラムにあるデイリースクラムのような、毎日メンバー全員を集める会議するのが私は好みではない。そんなことしなくても定例会議が週1で 1on1 が週1回ならば5日のうち2回は話すし、あと個別の打ち合わせも1-2回やれば十分に話す機会を得られると考えている。定例会議の進め方というドキュメントを一通り書いてみた。私が忘れたときに見返したり、実際にやってみてよかったこと・わるかったことを振り返りながら改善するための、基準として設けた。基準があるから改善できる。最初の1-2ヶ月ぐらいはうまく成果がでなくて悩むことも想定しつつ、過去に書いたドキュメントがそういうときの拠り所になる場合もある。

資料作りと抜け・漏れ防止

marketplace への公開

pull request と push イベントに対応して基本機能は実装できたとみなし、v1 のタグ/ブランチを作成して marketplace に公開した。backlog と連携するカスタム action はすでにいくつかあるのだけど、pull request か push イベントのどちらかしか対応していなかったり、説明が日本語で書かれていて日本人向けしか対象としていないものしかない。グローバル向けの今後も要件次第で拡張可能なカスタム action はこれしかないと、ポジショントークも含めて言っておこう。ちょうどこみやさんも関心をもっているのでまた機会があれば使い方の説明とかやりますよと伝えた。まずは会社のメンバーに紹介してくれるらしい。使ってくれる人が増えると嬉しいなぁ。

リリース作業をしていてその内容について mermaid 記法を使って簡単なフローチャート図やシーケンス図も書いてみた。感覚的には plantuml で書くのと大差ないので github がサポートしているネットワーク効果を考えると、今後は mermaid を積極的に活用していくのもよいかもしれない。

打ち合わせ資料の作成

先日 第3期のふりかえり は行ったが、第4期の展望はできなかったので次回の打ち合わせのための資料を作った。今期も普通に業務委託をするだけではあるものの、今後のキャリアのために grpc の開発/運用経験を積む必要があることに気付いた。他人に話す機会があって、そのための資料を作ってみて、当たり前の抜け・漏れに自分自身で気付けるというのが思考の外在化のよいところと言える。誰かに指摘されればすぐ気付くことを自分自身で気付くのは意外と難しかったりする。特定技術を狙って案件を探すのはあまりうまくいかない。本来はビジネスがあって、それを実現するために技術を選ぶのであって、その逆ではないから。周りの友だちや知人に聞いてみるかなぁ。