Next.js + Auth0でLogin handler failedのエラーを解消する

Next.js + Auth0で認証機能を実装しようとして、nextjs-auth0をセットアップしつつ、このドキュメント通りにやっていたら、AUTH0_ISSUER_BASE_URL の設定を間違えていて以下のエラーが出ていた。

LoginHandlerError: Login handler failed. CAUSE: Discovery requests failing for http://localhost:3000, expected 200 OK, got: 404 Not Found

上のauth0のドキュメントでは AUTH0_ISSUER_BASE_URL='https://{yourDomain}' との記述だったので、http://localhost:3000を指定したのだけど、どうやらこれはhttps://YOUR_AUTH0_DOMAIN.auth0.comを記述するのが正しいらしい。というわけでAuth0の該当アプリケーションのページからDomainの部分をコピーしてきてhttps://oinume.us.auth0.comのように指定すればOK。というかnextjs-auth0にはそのように記載されていたのではじめからこっちを読んでおけばよかった...

multipassでAnsibleの動作確認用のVMを作る

モチベーション

趣味で開発しているプロダクトのためにVPSを立てていて、Ansibleで各種ミドルウェアの設定をしているんだけど、VirtualBoxのApple Silicon への対応が微妙なのでmultipassを使ってVMを立てる＋Ansible Playbookを流してセットアップするということをやってみたのでそのメモ。

multipassでVMを立ち上げる

まず初めにssh用の秘密鍵と公開鍵を生成する。multipassでVMを立ち上げるときはデフォルトでSSH用の鍵を生成してくれるけど、Ansibleでsshするときの鍵を作っておく。

ssh-keygen -t rsa -b 4096 -C multipass -f multipass

次に、以下のようなcloud-init.ymlを作成する。

users:
  - default
  - name: multipass
    sudo: ALL=(ALL) NOPASSWD:ALL
    ssh_authorized_keys:
      - "ssh-rsa <上で生成した公開鍵>"

multipass launchでVMを立ち上げる時に、--cloud-init オプションで先ほどのcloud-init.ymlを指定する。これを行うことでmultipassユーザーの authorized_keys に上で作成したSSHの公開鍵がセットされる。

multipass launch -n vps -c=1 -m=1G -d=5G --cloud-init=cloud-init.yml

次にVMのIPアドレスを確認する。

multipass info vps

Name:           vps
State:          Running
IPv4:           192.168.64.13
Release:        Ubuntu 22.04.2 LTS
Image hash:     f6b5b3a980f2 (Ubuntu 22.04 LTS)
CPU(s):         1
Load:           0.20 0.11 0.04
Disk usage:     1.4GiB out of 4.7GiB
Memory usage:   151.3MiB out of 962.5MiB
Mounts:         --

Ansibleのinventoryファイルを以下のようにする。

[local]
default ansible_host=<上で調べたIP> ansible_port=22 ansible_user='multipass' ansible_ssh_private_key_file='multipass'

最後にansible-playbookを実行する。

ANSIBLE_SSH_ARGS='-o IdentitiesOnly=yes -o ControlMaster=auto -o ControlPersist=60s' ansible-playbook  --inventory-file=ansible/inventory/multipass  --timeout=30 -v -D ./ansible/hoge.yml

multipassのコマンドメモ

• multipass transfer : VMからファイルをコピーする or ホストからVMにファイルをコピーする
• multipass shell : VM内にシェルでログインする

新しいLinuxの教科書

whisper.cppで文字起こしをやってみた

自分の備忘録としてのやってみた系の話。OpenAIが提供するモデルを使って文字起こしをするC++実装のwhisper.cppを試してみた。

環境

Apple M1 MacBook Air 2020 (Memory 16GB)

uname -a

Darwin hogehoge.local 22.3.0 Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:35 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8103 x86_64

whisper.cppのビルド

以下のコマンドを実行してビルドする。

git clone https://github.com/ggerganov/whisper.cpp.git
cd whisper.cpp
make

ビルドが成功すると、カレントディレクトリに main という名前のバイナリが出来上がる。

モデルのダウンロード

次にモデルのダウンロードをしておく。

./models/download-ggml-model.sh large

文字起こしする音声ファイルのwavファイルを用意

• whisper.cppはwavファイルしか受け付けないので、ffmpegで動画ファイルをwavにする。
• ちょうど手元に会社で公開している勉強会の動画があったので、これを使ってみる
• あと長いので最初の2分間だけを抽出。

ffmpeg -i ~/Downloads/2023-02-13.mp4  -ar 16000 -to 120 2023-02-13.wav

whisper.cppで文字起こし

先ほど出力したwavファイルからwhisper.cppを使って文字起こしする。

./main -m models/ggml-large.bin -f 2023-02-13.wav -l auto

注意点

• -m でダウンロードしたモデルファイルを使う。largeだと精度が高い
• -l auto を指定しないと日本語の文字起こししてくれないので指定する。もしくは-l jaでもOK

文字起こしの結果。ちなみに2分の音声ファイルを文字起こしするのに82秒ぐらいかかっている。

[00:00:00.000 --> 00:00:01.000]  お願いします
[00:00:01.000 --> 00:00:02.000]  お願いします
[00:00:02.000 --> 00:00:11.120]  はい 本日 Dpエンジニアリングまで 第60回始めていきたいと思います
[00:00:11.120 --> 00:00:12.120]  お願いします
[00:00:12.120 --> 00:00:13.120]  お願いします
[00:00:13.120 --> 00:00:14.120]  お願いします
[00:00:14.120 --> 00:00:21.840]  今日は React 18かな 18から新しく 出たディファードバリューっていう
[00:00:21.840 --> 00:00:28.440]  やつの紹介ですね もともとデバウンス とかスロットルみたいな感じで
[00:00:28.440 --> 00:00:33.840]  各種ライブラリーが似たような やつやってたんですけど そうじゃ
[00:00:33.840 --> 00:00:38.800]  なくて結構UIのアップデートで 最適化したやつが出ましたよっていう
[00:00:38.800 --> 00:00:44.320]  ので もともとデバウンスっていう 本当はスロットルも出したかったん
[00:00:44.320 --> 00:00:49.200]  ですけど React 18でスロットルのやつ がバグっていてとあるライブラリー
[00:00:49.200 --> 00:00:54.000]  でパッてデモが用意できなかったん ですけど 一応デバウンスだけ紹介
[00:00:54.000 --> 00:01:04.120]  しておくと 18入力した後に時間差 で18入力されるという 今これ1秒
[00:01:04.120 --> 00:01:09.680]  かな 1秒ってやってるので 最後に 入力した後1秒後に値が更新される
[00:01:09.680 --> 00:01:15.400]  ってやつですね 連続で入力してる 間はデバウンスバリューは変わん
[00:01:15.400 --> 00:01:20.840]  ないけれど 止めてから1秒すると デバウンスバリューは変わる これ
[00:01:20.840 --> 00:01:27.120]  何使いたいかっていうと インクリメンタル サーチとか オリジンのところを
[00:01:27.120 --> 00:01:31.600]  見てもらうと 一文字変わるごとに サーチ検索API叩きまくってると
[00:01:31.600 --> 00:01:38.320]  重すぎるし 重すぎるので デバウンス みたいにユーザーの操作が終わった
[00:01:38.320 --> 00:01:44.560]  後にAPI一回叩くみたいな感じで やってあげるっていう スロットル
[00:01:44.560 --> 00:01:50.280]  の場合は1秒ごとに発火される っていうイメージなので 例えば
[00:01:50.280 --> 00:01:55.240]  デバウンスバリューはこれ 最後 操作終わるまではデバウンスバリュー
[00:01:55.240 --> 00:02:00.040]  更新されないですけど スロットル だった場合は1秒ごとに発火されて

最後に会社の勉強会の宣伝

ドクターズプライムでは、DP Engineering Mondayという名前で毎週勉強会をやってます。月に1回、社外向けに開催したものをYouTubeで配信しているので、よかったらチャンネル登録してください。技術スタックはReact, TypeScript, ChakraUI, Go, GCP, Hasura, PostgreSQLなので、その周辺の話が多いです。

www.youtube.com

2023年に読みたい本

最近読書量が減ってきたので、今年は読書を頑張ろう！と思ったのでまずは読みたい本をリストアップしてみる。

プロを目指す人のためのTypeScript入門

仕事でTypeScript書いてるんだけど、型システムが難しすぎて詰まっているので、体系的に理解したい。

プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで (Software Design plus)

データ指向アプリケーションデザイン

分厚いけど良書だと噂の本。

データ指向アプリケーションデザイン ―信頼性、拡張性、保守性の高い分散システム設計の原理

モダン・ソフトウェアエンジニアリング

これも良書だと噂なので。

モダン・ソフトウェアエンジニアリング

A Philosophy of Software Design, 2nd Edition

いい加減読み終わりたい...

A Philosophy of Software Design, 2nd Edition (English Edition)

詳解 システム・パフォーマンス 第2版

めちゃくちゃ評判がいい本なので。

詳解 システム・パフォーマンス 第2版

LIFESPAN(ライフスパン): 老いなき世界

最近老いが気になってきたので...

LIFESPAN(ライフスパン): 老いなき世界

AlfredからRaycastに移行した

最近はRaycastが巷で流行っているので、自分もAlfredから乗り換えてみた。Alfredはv5への移行をずっと保留にしていてタイミング的にも良かったというのが一番大きい。ちなみに自分はAlfredの有料課金のライトユーザーで、以下の機能を使っていた。

1. 通常のランチャー機能
2. HotKey - よく使うアプリをHotKeyとして登録
3. Clipboard history - クリップボードの履歴
4. ブラウザのブックマーク検索

ライトユーザーなので、とてもスムーズに移行できた。

また、Raycastの拡張機能でいいなと思ったのは

1. Screenshotの検索とコピーが簡単にできる
2. Emojiの検索が簡単にできる
3. カレンダー連携すると直近のMeeting URLにRaycastから飛べる
   • なので、「あ、Meetingだ！」って思ったらRaycastを開いておけばいい、という体験が良い
4. Quicklinkの機能で簡単に指定のURLに飛ぶリンクが作成できる

の2点。とりあえず色んな拡張がStoreにあるので、有用そうなものを日々探してインストールしている。まだ使い始めて3日ぐらいだけど、そろそろAlfredはアンインストールしようかなと思うぐらい馴染んでいる。