oauth2-proxy を使って ChatGPT UI に認証をかける

ChatGPI UI というオープンソースの ChatGPT の UI があるので使ってみた。認証の仕組みがなさそうなので、oauth2-proxy を使って認証を機能をつけてみた。

github.com

今回は、IdP として Google を使用。以下の手順で、Client ID と Secret を作成。 support.google.com 承認済みリダイレクト URL に http://localhost:8000/oauth2/callback を指定

./docker-compose.yml を以下のように作成

version: '3.8'
services:
  oauth2-proxy:
    image: quay.io/oauth2-proxy/oauth2-proxy:v7.4.0
    ports:
      - 8000:4180
    env_file:
      - oauth2-proxy.env
  chatgpt-ui:
    image: chatgpt-ui
    env_file:
      - chatgpt-ui.env
  redis:
    image: redis
    volumes:
      - redis:/data
volumes:
  redis:

./oauth2-proxy.env を作成

OAUTH2_PROXY_HTTP_ADDRESS=0.0.0.0:4180
OAUTH2_PROXY_PROVIDER=google
OAUTH2_PROXY_CLIENT_ID=xxxxxxxxxx.apps.googleusercontent.com
OAUTH2_PROXY_CLIENT_SECRET=xxxxxxx
OAUTH2_PROXY_REDIRECT_URL=http://localhost:8000/oauth2/callback
OAUTH2_PROXY_EMAIL_DOMAINS=gmail.com
OAUTH2_PROXY_UPSTREAMS=http://chatgpt-ui:3000/
OAUTH2_PROXY_SESSION_STORE_TYPE=redis
OAUTH2_PROXY_REDIS_CONNECTION_URL=redis://redis/
OAUTH2_PROXY_COOKIE_SECURE=false
OAUTH2_PROXY_COOKIE_SECRET=xxxxxxxxxx
  • OAUTH2_PROXY_CLIENT_ID, OAUTH2_PROXY_CLIENT_SECRET は前の手順で取得した、Client ID と Secret を指定。
  • OAUTH2_PROXY_REDIRECT_URL には「承認済みリダイレクト URL」に指定した URL を指定。
  • OAUTH2_PROXY_COOKIE_SECRET は、 Overview | OAuth2 Proxy に記載の方法で生成する

./chatgpt-ui.env を作成。

OPENAI_API_KEY=xxxxxxxx

API キーは以下で作成 https://platform.openai.com/account/api-keys

docker-compose を実行して、http://localhost:8000/ にアクセスする

docker-compose up

Google の認証が終わったあと、ChatGPT UI の画面が表示される、はず。

HHKB Professional2 の左 Alt(Opt) キーを Fn キーにする

HHKB Professional2 の左 Alt(Opt) キーだけを Fn キーに変更したい。

まず、ここにある通り、DIPSW4, 5 を 1 にする。

Happy Hacking Keyboard | キー配列 | PFU

ただし、この設定だと Command, Alt の位置も変わってしまう(左から Fn, Alt(Opt), [space key], Alt(Opt), Command の順番になる)ので、これらは Karabiner でデフォルトの位置に戻す。

Karabiner の設定

Karabiner の設定

パズルかな。

REGZA X8900K で FireTV Stick 4k の Youtube が 4K で見れない

REGZA X8900K を買った。前のテレビが壊れる寸前だったので。あと、PS5 のために(持ってないけど)ゲームモード的なやつのあるこれが欲しかったので。あと、なぜか、15,000 円の値引きがあったので(今もまだあるっぽい)。

ところが、これまで使っていた FireTV Stick 4K をつなげてみると、Youtube で 4K 動画が 4K で再生されない。(1080p では再生された)

FireTV Stick の設定で「ディスプレイとサウンド」>「ディスプレイ」>「ビデオ解像度」で「自動(4K Ultra HD)」にしておくと、Prime Video の 4K 対応のビデオは 4K で再生された。でも、Youtube の方は 1080p までしか選べない。この設定を 2160p に設定すると、Youtube は 4K で再生されるようになったが、Prime Video のほうが 4K (Ultra HD) で再生されないという、中途半端な状態に…。

 

が、最終的に、REGZA の方の「設定」>「デバイス設定」>「外部入力」>「外部入力設定」>「HIDM2 (FireTV Stick 4K がささっている所)」>「HDMIモード設定」で「高速信号モード」を選択すると、4K で見れました。ついでに、FireTV のホーム画面もきれいになった。(これを設定しないとホーム画面も 1080p で認識されていたため、なんかぼやっとしていた)

 

この設定を見つけるまで2日くらいかかった…。

色々検索してて、下のような書き込みを見たので、同じような設定があるんじゃないかと探してたんだけど、REGZA の設定は上で説明したような深い場所にありましたよ。

 

bootrun で起動した時に、コンソールに色がつかない

Intellij で gradle の bootrun タスクからプログラムを起動したときに、コンソールに色がつかない。

f:id:hiro_nemu:20210310162835p:plain
色のない console

application.properties 等に以下を追加すると良いらしい。

spring.output.ansi.enabled=ALWAYS

stackoverflow.com

f:id:hiro_nemu:20210310163815p:plain
色のついた console

Docker内で Webpack の watch でファイルの変更を検知する

久しぶりにフロントエンドの開発(Vue.js)をしているんだけど、やることが多くて困ってます。とはいえ、vue-cliというツールが初期セットアップをしてくれてローカルでの開発環境やビルドの構成をまるっと作ってくれて、何も知らなくても Hello World はすぐさまできるようになっていてなかなか便利。

さらに、この環境をDockerで作成して他のメンバーがすぐに開発を始められるようにしたんだけど、なぜかファイルの変更を検知してくれれない。調べてみると以下のサイトに原因と対応方法が載ってました。

Webpack Watch in Vagrant/Docker

これによると、 Webpack の watch は inotify というLinux 2.6 から追加されたファイルシステムのイベントを監視する仕組みを使っているらしい。しかし、ホスト上のファイルをVirualBoxに同期するのにNFSを使っていて inotify は NFS に対応していない、とかそんな感じのようですよ。

ということで、以下のオプションを使って、ファイルシステムの変更を watch からポーリングするように以下の設定をしてくださいとのことでした。

watchOptions: {
  poll: true
}

だがしかし、近頃のフロントエンド初心者の私にはどこに設定するのかなぞだった(設定ファイルっぽいのが一杯あって)。さがしました、ここに回答がありました。ありがとう。
https://github.com/vuejs-templates/webpack/issues/432#issuecomment-272914189

vue-cli が作成した設定ファイルの build/dev-server.js の 「webpack-dev-middleware」の設定に以下のように書けば動きました。

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true,
  watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
  }
})

boot2docker のディスク領域を拡張する

boot2docker のディスク領域がいっぱいになってしまったので、ディスク領域を拡張することにした。コマンドで全部できるかなと思ってたんだけど、なんか簡単にできそうな記事が見つからなかったので GPatedというGUIのディスクユーティリティを使うことにした。

だいたい以下のサイトに乗っていることなので、なんですが。
Getting “no space left on device” errors with Boot2Docker?
※ ちなみに、中身を消しちゃっていいのなら、上記リンクの Solution 1 でやったほうが手っ取り早い。今回は、Solution 2の方です。

1. VirtualBox のディスクイメージを拡張

おそらく、boot2docker-vm.vmdk という仮想ディスクデバイスが使用されていると思う。まず、これを vdi というファイルに変換した上で拡張する必要があるらしい。

$ VBoxManage clonehd ~/VirtualBox\ VMs/boot2docker-vm/boot2docker-vm.vmdk ~/VirtualBox\ VMs/boot2docker-vm/boot2docker-vm.vdi --format VDI --variant Standard

次にディスクを拡張する。今回20GBくらいの容量だったのを、40GB程度に拡張することにした。

$ VBoxManage modifyhd ~/VirtualBox\ VMs/boot2docker-vm/boot2docker-vm.vdi --resize 40960

2. GPated のダウンロードと VirtualBox 上の設定

まず、ここ(GParted -- Download)から ISO ファイル(gparted-live-0.23.0-1-i586.iso )をダウンロードする。

次に、VirtualBox の画面から ISO ファイルを追加する。(boot2docker は停止させておく)

2−1. VirtualBox の画面から boot2docker の設定画面を開く

2-2. Storage の設定画面から1で作成した vdi ファイルを選択する

2-3. つぎにダウンロードした GParted の ISO ファイルを選択する

ここまで設定できたら、VirtualBox の画面から boot2docker を起動します。(boot2docker up ではなく)

3. GParted によるディスク拡張

boot2docker の VM を起動すると以下の様に GParted の LiveCD が立ち上がってくる。

キーボードの設定。

言語の設定、Japan があるので選んでおく。

0を選んでX(GUI)で起動する

こんな感じの画面がでる。拡張したいパーティション(今回の例では/dev/sda1)を選択して、「リサイズ/移動」ボタンを押す

矢印の部分をぐいっと右に持って行き拡張する。

最後に「Apply」ボタンを押して変更を適用する。しばらくすると完了する。あとは、適当に VM を停止しておく。

4. 不要な設定を削除して、ディスク領域が拡張されたか確認する

以下の ディスクはもういらないので設定から削除しておく。

以下のコマンドで boot2docker を起動してディスク領域を確認する。

$ boot2docker up
$ boot2docker ssh
$ df -h

約40GBに増えてるね。

やるねこ 1.0.0 をリリースしました

やるねこ 1.0.0 をリリースしました。
今回のリリースではタスク一覧の動作を改善しました。これで一旦基本機能としては区切りをつけて、これからはさらに使いやすく、分かりやすいアプリになるような改善を進めていきます。といっても、今までもそうしてきたので、方針は変わらないですが・・。なんとなく、区切りです。