Hugo に OpenTelemetry を追加してみる

Akira Ueno

この記事は OpenTelemetry Advent Calendar 2025 11日目の記事です。

背景

このサイトはHugo を利用しており、OpenTelemetry を利用して計装してみたかったので、追加してみました。 トレースは Hoenycomb に送信します。 ただし、フロントエンドに Honeycomb の API Key を設定するわけには行かないため、Cloudflare Workers をバックエンドとして利用してトレースを転送します。

構成

  1. フロントエンド(Hugo)に OpenTelemetry のスクリプトを追加する
  2. バックエンド(Cloudflare Workers)にトレースを送信して Honeycomb に転送する
  3. Honeycomb でトレースを確認する

手順

1. フロントエンド(Hugo)に OpenTelemetry のスクリプトを追加する。

HugoのJS.Buildという機能を利用して、OpenTelemetryの計装スクリプトをフロントエンドに追加します。 バンドラはesbuildが兼ね備えているので、TypeScriptをそのまま記述してもビルドができます。 TypescriptとOpenTelemetryの依存関係を追加します。

npm i -D -E typescript
npm i -E @opentelemetry/api \
    @opentelemetry/context-zone \
    @opentelemetry/exporter-trace-otlp-http \
    @opentelemetry/instrumentation-document-load
    @opentelemetry/instrumentation-user-interaction \
    @opentelemetry/instrumentation-xml-http-request \
    @opentelemetry/resources \
    @opentelemetry/sdk-trace-web \
    @opentelemetry/semantic-conventions

TypeScriptの設定ファイルを作成します。

npx tsc --init

Otel計装用のスクリプト document-load.ts を作成します。

mkdir -p assets/js
touch assets/js/document-load.ts

document-load.ts は以下のようになります。

Auto-Login Script for SonarCloud with GitHub Authentication

Akira Ueno

Overview

This Tampermonkey script automatically handles the SonarCloud login process when you encounter authentication errors. It detects error pages and automatically initiates GitHub login, making the authentication process seamless.

Script

Create a new Tampermonkey script and paste the following code:

How it Works

The script performs the following tasks:

  1. Error Page Detection
  • Waits for the error message “The requested project does not exist, or you have not authenticated with SonarQube Cloud”
  • Automatically clicks the “Login” button when found
  1. Login Page Handling
  • Detects when redirected to the login page
  • Automatically clicks the configured social authentication button (GitHub by default)
  1. Utilities
  • waitUntil: A utility function that waits for specific conditions to be met
  • findAndClick: Finds and clicks elements using XPath selectors
  • Built-in timeout mechanism to prevent infinite loops

Installation

  1. Install the Tampermonkey browser extension
  2. Create a new script
  3. Copy and paste the provided code
  4. Save the script

Configuration

The script includes two main configurable settings:

激安中華miniPCでKubernetesクラスタを構築する

Akira Ueno

この記事は whywaita Advent Calendar 2023 7 日目の記事です。

前日は k_enoki さんの記事 でした。

whywaita さんといえば、インフラエンジニアのイメージがあります。 今どきのインフラエンジニアといえば、Kubernetes ですよね。そこで、今回は Kubernetes の勉強を兼ねて、自宅で Kubernetes を動かすための環境を構築してみました。 お金はあまりかけたくないが、クラウドでやっても面白くないので、激安中華 miniPC を使います。

今回の環境

Amazon で Beelink EQ12 x 3 台とBeelink S12 Pro x 1 台を購入しました。これを Kubernetes クラスタとして構築します。 スペックは CPU: Alder Lake 4 コア、メモリ: 16GB、SSD: 500GB NVME です。 これで 1 台 3 万円弱でした。激安ですね。 3 台の EQ12 は ワーカーノード、1 台の S12 Pro はコントロールプレーンとします。

OS のインストール

まずは OS をインストールします。今回は Ubuntu Server 22.04 LTS をインストールしました。 PXE などでかっこよく自動インストールしたかったのですが、設定が大変そうだったので、手動で USB メモリを使ってインストールしました。

gcloudのフィルタについて

Akira Ueno

フィルタ可能なキーを探す

ドキュメント

gcloud <サブコマンド> --format=yaml --limit=1

フィルタ

gcloud <サブコマンド> --filter="<key>=<value>"

keyに.や/が含まれる場合はシングルクオートで囲む。

複数フィルタ

ドキュメント

gcloud <サブコマンド> --filter="<key1>=<value1> AND <key2>=<value2>"

Lock Gnome Screen via SSH

Akira Ueno

Overview

I want to lock gnome-session(Desktop) with a user logged in via ssh.

Script

Save below script and execute it.

There are two key points at line 10.

1. gnome-screensaver-command -l

Execute gnome-screensaver-command as GNOME logged in user.

2. DBUS_SESSION_BUS_ADDRESS

Set dbus environment varibale to execute gnome-screensaver-command.

Reference

Growiの管理者パスワードを手動で変更する

Akira Ueno

概要

Growiのログインパスワードを忘れてしまい、パスワードを変更しようとしたが自身が管理者だったためログインしてユーザのパスワードを変更することができない状況に陥った。 MongoDBに保存されているパスワードのハッシュ値を手動で書き換えることで解決した。

手順

  1. 環境変数PASSWORD_SEEDを確認

docker-composeを用いている場合はdocker-compse.ymlに書かれているので、その値を使う。 ここではchangemeとする。

  1. 設定したいパスワードを決める

ここではpassword024とする。

  1. パスワードのハッシュ値を計算する

growiのコードを参考に計算する。

node
> const hasher = crypto.createHash('sha256');
undefined
> hasher.update('changeme' + 'password024');  // 'PASSWORD_SEEDの値' + '設定したいパスワード'
Hash {
  _options: undefined,
  [Symbol(kHandle)]: BaseObject {},
  [Symbol(kState)]: { [Symbol(kFinalized)]: false }
}
> hasher.digest('hex');
'f2206eee5a5669a1028b4e4cf2c511056f6d5b576b7c05524b7750199bd64ce4' // パスワードのハッシュ値
  1. MongoDBのパスワードのハッシュ値を書き換える

growiデータベースのusersコレクションの当該ドキュメントを書き換える。

mongo growi
> db.users.find({email: "[email protected]"});  // パスワードを変更したいユーザのメールアドレスを指定
{ "_id" : ObjectId(...略
> db.users.update({email: "[email protected]"}, {$set: {password: "f2206eee5a5669a1028b4e4cf2c511056f6d5b576b7c05524b7750199bd64ce4"}});  // 変更する
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })

updateの際に$setを指定しないと元のドキュメントのpassword以外のフィールドが全て削除されてしまうので注意。 docker-composeを用いている場合はdocker-compose exec mongo mongo growiとかでMongoDBへログイン出来るかと思う。

以上の手順を踏むとパスワードpassword024でログインできるはずだ。

CloudflareのDNSを利用しているドメインの証明書をcertbotで発行する

Akira Ueno

概要

Cloudflare の DNS を利用しているドメインの証明書を certbot で発行する。 ワイルドカード証明書を発行する場合、certbot を使い DNS 認証(DNS-01)で DNS レコードを手で修正していたが、Cloudflare の API を利用すれば自動化できる。さらにcertbot-dns-cloudflareというプラグインにより簡単に設定できるので紹介する。

API トークンの取得と設定

Cloudflare のMy ProfileのAPIトークン>トークンを作成する>ゾーン DNS を編集するを選択し API トークンを発行する。 以下は設定例。 cloudflare-api.png

発行した API トークンを含むクレデンシャルファイルを適当な場所に作成する。

$ sudo mkdir /etc/letsencrypt/cloudflare
$ sudo vim /etc/letsencrypt/cloudflare/akky.me.ini
dns_cloudflare_api_token=<発行したAPIトークン>
$ sudo chmod 700 /etc/letsencrypt/cloudflare
$ sudo chmod 600 /etc/letsencrypt/cloudflare/akky.me.ini

certbot のインストール

公式の手順に従う。 今回は Web サーバが Nginx，OS が Debian buster なので snap を使ってインストールする手順が表示された。

sudo apt install snapd # snapが入ってなければ
sudo snap install core; sudo snap refresh core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

プラグインのインストール

certbot-dns-cloudflareプラグインをインストールする。

正規表現でマッチしたグループを複数抽出する

Akira Ueno

概要

正規表現でマッチしたグループを複数抽出する場合はsedを使うと良い．グループが1つの場合はgrepでも-oPと\Kで抽出できるが，グループが複数あるとできない．

コード

i番目のグループ(()で囲まれた部分)を\iで置換する．

sed -r 's/<正規表現>/\i/g

例

vncのポート番号とpidを抽出する例

sed

$ ss -ltp | grep vnc 
LISTEN    0         5                  0.0.0.0:5901             0.0.0.0:*        users:(("Xtigervnc",pid=3193,fd=7))                                            
LISTEN    0         5                  0.0.0.0:5902             0.0.0.0:*        users:(("Xtigervnc",pid=4404,fd=7))                                            
LISTEN    0         5                  0.0.0.0:5903             0.0.0.0:*        users:(("Xtigervnc",pid=4453,fd=7))                                            
LISTEN    0         5                     [::]:5901                [::]:*        users:(("Xtigervnc",pid=3193,fd=8))                                            
LISTEN    0         5                     [::]:5902                [::]:*        users:(("Xtigervnc",pid=4404,fd=8))                                            
LISTEN    0         5                     [::]:5903                [::]:*        users:(("Xtigervnc",pid=4453,fd=8))
$ ss -ltp | grep vnc | sed -r 's/^.*:([0-9]+).*pid=([0-9]+).*$/\1 \2/' | sort -u
5901 3193
5902 4404
5903 4453

うまくいく．

grep

$ ss -ltp | grep vnc | grep -oP ':\K(\d+).*pid=\K(\d+)' | sort -u
3193
4404
4453

最後にマッチした部分のみが抽出されてしまう．

参考