2026/06/11(木)今日のサイト改築の話とかadiary改造の話とか

更新日:
投稿日:

昨日に引き続き、今日もサイト改築をしていた話の続き。

本体サイトの改築

自己紹介ページのSNSリンクの縦のがたつきを修正

昨日時点だと縦軸にがたつきが出ているが、これを修正した。深いことを考えずやっているので表示が崩れるパターンもありそうだが、気にしないでおく。

昨日時点 本日の修正後

トップページのバナーにマウスオーバーしたときに色が変わるように

地味だがこっちのがUXはよい。

他にも地味だが、外枠が黒なのは強調が強すぎると思ったので、ついでに枠の色を薄くしたほか、枠と中身のpaddingに当たり判定がなかったので、全体に当たり判定が出るように埋めた。

リンクページでもバナーホバーで色が変わるように

画像バナーだとこんな感じ。

テキストバナーだとこんな感じ。

サイト編集が楽になるように実装コードを修正

lycolia.info配下はすべてPerl CGIで実装しているが、ヒアドキュメントにシンタックスハイライトが効かずtypoに気づきづらい問題があった。

しかしヒアドキュメントの文字をHTMLにするとハイライトが効くことに気づいたので直した。

HTMLでも'HTML'でもどちらでも効くのがありがたい。しかし'HTML1'とかにするとダメになるのがイマイチだ。HTML1はいけるのに…。

試してみたところ、このテクニックはPHPでも有効だった。

どうでもいいが、この画像の実装はPerl CGIにする前のものなので今は使っていない。

adiaryの改造

前々からadiaryに情報バナーがないのが不満だったので、これを実装することにした。

切っ掛けとしてはLatitude 7350のCPUクーラーマウンタ用のネジ穴とラズパイクーラーのネジ穴メモの記事を書くときに使いたかったのがある。

実はこの手の表示自体は過去記事にも存在するのだが、記事ごとにHTMLを手書きしていてよくなかった。手書きだと毎回スタイルが変わってしまうし、一元的な変更もできないからだ。

adiaryには記法タグという、記法を拡張できる機能があるのを知っていたため、これを使うことにした。

そこでまずadiary本家の記法タグを定義するを真面目に読むことにした。実はこのページは過去に何度か読んでいるのだが、意味が理解できていなかった。

まず記法タグの定義の基本はこれだが、これは忘れていい。

google  = Google検索,       UTF-8,  http://www.google.co.jp/search?lr=lang_ja&ie=utf-8&oe=utf-8&q=
keyword = はてなキーワード, EUC-JP, http://d.hatena.ne.jp/keyword/

意味的にはこんな感じである。

TAG = 説明文, 文字コード, URL

今回使うのはこっちだ。

mtex = mimeTeX, ASCII, 1, <img src="$0mimetex/mimetex.cgi?$1" alt="$1" class="tex">
test = block-tag-sample, ASCII, 2, block:
<table>
<tr><th>#1</th><td>#2</td></tr>
</table>

こちらの意味はこんな感じである。

TAG = 説明文, 文字コード, 引数の数, URL | HTML | block:
  • TAGは記法に使うタグの名前だ。例えばhogeとした場合、[hoge:]となる
  • 説明文はタグの説明文だが、画面上に出てくるものではないので意味が分かるものを適当に書いておけばいいだろう
  • 文字コードは値をURLエンコード時に使われるものらしいのでURLエンコードしないなら何でもよいと思う
  • 引数の数は渡す引数の数だ。[hoge:aaa]なら1[hoge:aaa:bbb]なら2になる
  • 最後のURL | HTML | block:は置換に使う文字列なのだが、<で始まればHTML置換として、そうでなければURL置換としてアンカータグを出力するっぽい?
    • block:を指定した場合は複数行書くことができる。但しこれは可読性のためであって、実際のHTML出力は一行になるようだ
    • また実際に渡す引数そのものには一行しか指定できないと思われる

というので、以下の記法を定義してバナーを出せるようにした。

info = 情報バナー, UTF-8, 1, block:
<div class="notice_banner info">
    <div><svg width="25" viewBox="0 0 24 24" aria-label="fontSize small"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"></path></svg></div>
    <div class="message">#1</div>
</div>

warn = 警告バナー, UTF-8, 1, block:
<div class="notice_banner warn">
    <div><svg width="25" viewBox="0 0 24 24" aria-label="fontSize small"><path d="M12 5.99 19.53 19H4.47zM12 2 1 21h22zm1 14h-2v2h2zm0-6h-2v4h2z"></path></svg></div>
    <div class="message">#1</div>
</div>

error = エラーバナー, UTF-8, 1, block:
<div class="notice_banner error">
    <div><svg width="25" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"></path></svg></div>
    <div class="message">#1</div>
</div>

出てくるバナーはこんな感じ。

で、標準であった方が便利だろうというので私以外誰も使っていないであろうadiary-extendsの標準機能として取り込んだ。

なお、この時すでにwarnが記法として組み込まれていたため削除している。

あとがき

今日は他所事に手が伸びてしまい、これまでのように大きな対応は出来なかったが、締め切りがあるわけでもなければ、一応最低限は見れるので、改築はのんびりやっていこうと思う。

あとadiary-extendsは結構手を入れていて、個人的には本家より便利になっていると思う。

特にコピペで画像をアップロード可能にしたり、Markdownの脚注書式に対応したり、アップロードを許可する拡張子にapngとwebpを追加を追加したりしているので、これだけでもだいぶ使いやすくなっているはずだ。他にも個人的に欲しいと思った機能をそこそこ入れてるので便利になっていると思う。詳細はGitHubにあるadiary-extendsの主な変更点にも書いてあるが、現状の対応は以下のような感じである。

閲覧画面

  • [v0.1.0] RSSアイコンの画像を80x15ブリリアントバナーにした
  • [v0.3.0]テーブルが記事幅を超えた時に横スクロールできるようにした
  • [v0.5.0] OGPのメタタグがUAによらず無条件で出力されるようにした
  • [v0.6.0] Syntax HightlightをPrism.jsにした
  • [v0.9.0] 画像に代替テキストを設定していない場合(画像ファイル名そのままの場合)、代替テキストを出力しないようにした(alt, titleを空文字設定)
  • [v0.9.0] Lightbox2をFancybox v3.5.7に置き換えた
  • [v0.13.0] 投稿日と更新日を両方出せるようにした
  • [v0.21.0] IPv6のコメントのホスト名が不正になる問題の対応(例えばOCNからなのにawsのホスト名になったりする)
  • [v0.25.0] 作成した記事のIDが500, 600, 700などでキリがいいときに、一つ前の記事への参照リンクが生成されない問題の修正

編集画面

  • [v0.1.0] クリップボードから画像をアップロードできるようにした
  • [v0.2.0] 任意の画像をOGPに設定可能にした
  • [v0.22.dev-1] デフォルトでアップロードを許可する拡張子にapngとwebpを追加

Markdown

  • [v0.1.0] Markdownで2スペースインデントでリスト記法が機能するようにした
  • [v0.7.0] Code spansで連続したバックスラッシュが正常に表示されるようにした
  • [v0.8.0] [text](<https://example.com/hoge_()>)が機能するようにした
  • [v0.9.2] Markdown記法でthとtdの最終要素のスペースがトリムされず、そのまま出てくる不具合の修正
    • Prettierなどで自動整形しているMarkdownの場合、|_hoge________|のようになる(現時点でのadiaryの都合で半角スペース連続がトリムされたためアンダースコアで半角スペース表現を代替している)が、この後ろにあるスペースが全部HTMLのtdに出てきて、文字列を選択するときに不便だったため
  • [v0.16.0] Markdownの脚注書式に対応
  • [v0.23.0] Markdown記法で->が含まれているときにパースが壊れる問題の対応

特殊記法

  • [v0.26.0] 情報・警告・エラーの三種類のバナー記法を実装
    [info:これはお知らせです。]
    [warn:これは警告です。]
    [error:これはエラーです。]
    
  • [v0.26.0] 元々存在していたwarn記法の削除。↑の記法と衝突していたため

デザイン

  • [v0.4.1] テンプレート変数でHTTPリファラを使えるようにした
  • [v0.6.2] lycoテーマの追加
  • [v0.24.0] HTTPS->HTTPのリバースプロキシ時にOGのURIスキーマがHTTPSにならない問題を対応

その他

  • [v0.15.0] RSSフィードのURLにハッシュリンクがつかないようにした
    • ブログ村で同一記事が複数登録されることがあったため

あとがきのあとがき

しかし今月は記事を出す勢いが激しすぎて、まだ6月11日だというのに、この記事を含め23記事も書いてしまっている。一日二記事を超えるペースだ。

この調子で行くと月間執筆数過去最高の2025年3月の35記事を超えてしまいそうである。

2026/06/11(木)昨日に引き続き、今日もサイト改築をしていた話

投稿日:

昨日の改築で一旦Webツールとリンク集は何とかなったので、今日は他の部分をやっていた。いや、Webツールはドメイン変えた以外なんもしてないに等しいが…。(仕組み上、中の実装を直すとか、内部ディレクトリの整理とかはしているので、何もしていないわけではないが見えない部分なので…)

トップページのサイトリンクを修繕し、リンクをリッチに

まだまだ整備中だが、いったん最低限見れる形にはなったと思う。

まずこれが昨日時点の状態。ECO-Wikiのリンクなど様々なものがなくなっている上に、リンクも単なる文字になっていてしょぼくなっている。

今日はまずテキストの地味なリンクをバナータイプに変更したうえで、元々あったが消滅してしまっていたリンクを復活させた。

逆にSNSなどのリンクが消滅しているが、これについては次に話す自己紹介ページに移設している。

トップページはフルスクラッチで作り上げたリンクページと異なり、既存資材をベースに作り替えているため今のところモバイルファーストな設計にはなっていないが、恐らくスマホで見ても支障はないと思う。少なくとも私の環境では問題なかった。

またこのバナータイプのレイアウトの作成に当たってはprofile/ななっちのサイトを参考にさせていただいた。

自己紹介ページの作成

こちらはまだ整備中で、資材が散乱している状態だ。

まずこれが昨日時点での自己紹介ページ。びっくりするほど何もない。因みにタイムスタンプは次のサブルーチンを作って実装していて、この実装に当たってはてがろぐを作られているにししさんPerlでファイルの最終更新日時を得るにはの記事と、時間 - とほほのWWW入門が非常に参考になった。

この程度の処理でTime::PieceDateTimeを使うのは甘えだと思ったので、ネイティブで実装できたのはよかった。

sub lastmodified {
    my $filename = shift;
    my ($sec, $min, $hour, $mday, $buf_mon, $buf_year, $wday) = localtime((stat $filename)[9]);
    my $year = $buf_year + 1900;
    my $mon = $buf_mon + 1;

    return sprintf('最終更新日: %04d-%02d-%02d %02d:%02d:%02d', $year, $mon, $mday, $hour, $min, $sec);
}

さて自己紹介ページについては現状はここまで作った。SNSのリンク集はトップページから剥がしてきたものをそのまま貼り付けているだけなので何とも統一感がない感じだ。

ぶっちゃけアイコンとその横の三行の紹介を作るのに心血を注いだため、それ以外が雑な状態である。

アイコン部分はMastodon v4.5.9のアカウントページのレイアウトを模倣して作っていて、アイコンの周りにぼんやりした枠があるのがこだわりポイントだ。

こちらはアイコンのある行だけモバイルファーストで作っているが、全体のレイアウトが決まっていないので、また変えるかもしれない。

自己紹介ページには没になったレイアウトもあり、縦軸に十字を入れたら中二病感が出てよいのでは!?と思って試したのだが、元々そういうサイトでないためハマらず、これは没にした。

参考までに、この十字レイアウトはホロライブのタレント紹介ページにあったものをリスペクトして作っていた。テーブルは使っておらずDL, DT, DDtable, table-cellとして扱い、DTafter`に1pxの縦矩形を仕込んだものになる。

CSSの例としてはこんな感じ。

dl {
    display: table;
    width: 15.5em;
    border-bottom: 1px dashed #000;
}

dt {
    position: relative;
    display: table-cell;
    width: 7.5em;
    padding: 5px;
    font-weight: bold;
}

dt::after {
    content: "";
    position: absolute;
    background-color: #000;
    width: 1px;
    height: 15px;
    right: 0;
    bottom: -8px;
}

dd {
    display: table-cell;
    width: 6m;
    padding: 5px;
}

リンクページの調整

昨日まではバナーがないサイトは単なる文字列だったが、バナーっぽい見た目にしてタップやクリックによる当たり判定を広げるようにした。

また「リンクをいただいたサイト」は失礼すぎると思ったため、「オススメのサイト」に変更し、オススメのサイトを掲載する方向に転換した。

あとがき

ひとまず今日は一旦こんな感じで、また明日以降ちまちまやっていこうと思う。

しかしこの令和、CMS・静的ジェネレーター・AI全盛の時代にいい感じのレイアウトを調べてパk…手打ちでHTMLとCSSを組んでいる人間はいったいどれほどいるのだろうかという感じだ…。既に組み上げている人が惰性でやっているならともかく、新規に起こすのは中々ないのではなかろうか?

ここまでに出てきていないがかなめりぜ / kanameliserさんも参考にさせていただいている。

またこの時代に敢えてPerl CGIでサイトを新規に作ろうとするのも私くらいだろう。やっていて思うのは少なくともPHPの方が楽だ。

まぁ若いときの苦労は買ってでもしたほうが良いということわざもあるし、平成の者がすなるPerlといふものを令和の世にやってみるのも悪くはないだろうといったところだ。

2026/06/10(水)今日のサーバー整備の話と、サイト改築を始めた話。

今日のサーバー整備

nginxの共通設定にgzipの設定を入れて転送量を削減した。

この設定を入れただけ。

    gzip on;
    gzip_types
        text/plain
        text/css
        text/javascript
        text/xml
        application/javascript
        application/json
        application/xml
        application/rss+xml
        application/atom+xml
        application/font-woff
        application/octet-stream
        image/gif
        image/png
        image/jpeg
        image/gif
        image/webp
        image/svg+xml;

nginxとApacheのリバースプロキシについて色々確かめた。

nginxからApacheにリバースプロキシしてる時、nginxを前段のTLS終端、Apacheを後段にしているときにApacheの中でリダイレクトが走るとhttpsが壊れることがある現象を確認した。

これはディレクトリに対しhttps://example.com/hogeのようにアクセスするとhttp://example.com/hoge/に301リダイレクトがかかるのだが、どうもこの時にスキーマが引き継がれずHTTPになってしまうようだ。初めからhttp://example.com/hoge/としてアクセスすれば問題ない。

またこの現象が起きると証明書があるのにエラー表示になることも確認しているが、サブ機やスマホでは起きないようにも見えるので、この端末の証明書が何かしら変になっている可能性がある。キャッシュクリアしてもhttp降格が起きると再発するので、原因はよくわかっていない。GPT-5.5に聞いたもののハルシネーションしか得られず、ググってもnginx→Apacheの情報はほとんど得られなかった。多分ニッチな構成なのだろう。

さくらのレンタルサーバーもnginxからApacheに繋いでいるので、これをどうやっているかが知れれば改善の手掛かりになりそうだが、知る術がないので何ともだ。まさか聞くわけにもいかないし…。

そういえばさくらのレンタルサーバーではSNI SSL[1]が使われていると聞くので、これを使えば上手くいくのかもしれない。

SSL/TLS接続のはじめに、クライアントはSSL/TLSのサーバから(サーバとCAの)証明書を受け取り、証明書の改ざんされていないことなどを確認する。サーバ証明書にはホスト名が書かれており、それが今接続しようとしているホスト名と一致することをクライアントは確認する。そうでない場合、なりすましや中間者攻撃の恐れがあるため、クライアントはユーザに警告をする。ユーザの責任で証明書を信用し、警告を迂回することができるアプリケーションも存在する。

というかWikipediaに上記の記述があったので、これのせいかもしれない。問題が起きているドメインはlycolia.infoで、元々さくら側で証明書を設定していたのでHTTPに落ちたときにその証明書が引っかかってエラーになっているとかはあるのかも?

さくらのドメインであるsakura.ne.jpを踏むとhttpでもhttpsに転送されるのと、ひょっとしたら類似の現象が起きているのかも…?いや、わからないが…。

サイト構成の変更をし始めた

このサイトの構成がイケてないなという思いが強くなったのでやることにした。

まずlycolia.infoが単なるLPに成り下がっていることが勿体なかったので、このドメインの傘下にコンテンツを増やすことにした。

一つ目はtool.lycolia.infoのドメインを廃止して、lycolia.info/tool/にぶら下げた。これはそもそもドメインを分割してやるようなサイトではなかったし、コンテンツの一部でいいと思ったからだ。

二つ目はこのブログにあったリンク集をlycolia.info/link/にぶら下げた。そもそも、本質的にサイトトップではない、このブログにリンク集があることに長らく違和感があったので丁度よかった。また移設に伴い紹介コメントも多少変更しているほか、元々のリンクが間違っていたなどもあったので、そのあたりも修正している。

そして今後は自己紹介などもブログから剝がして移動したいと思っている。ただ今のところすべてサーバー内からのHTML手打ちで、厳しさを感じるので、将来的にはCMSにしたいとも思った。

少なくとも今今は自宅サーバーである以上、家の中にいれば直にファイルをいじれるので問題はない。出先で書き換えたくなった時に困るくらいだ(一応頑張れば出先からもいじれなくはないが…)

サイト構成の変遷

本日リアルタイムでサイトを書き換えていて本番Hot Module Replacementみたいなことになっていた風景の一部を残しておく。

これが元々の状態。

改築途中の状態、なんか色々アレなことに…。

そして一旦本日の作業が終わった状態。また明日以降ちょいちょい直していくと思う。

移設したリンク集

移設前 移設後

見た目的には大きく変わり映えしないどころか、まともにスタイルを当ててないので殺風景だが、その辺りは追々どうにかしていこうと思う。

これでも一応レスポンシブデザイン、しかもモバイルファーストで作っているのでスマホで見たときの見やすさは向上している。

何せフルスクラッチでHTMLを手書きして、置換ではなく手作業で移設を行ったので移設するだけで時間が溶けてしまったので、今日はこんなところといった感じだ。


  1. Server Name Indication SSL

2026/06/06(土)Anubisを雑に設置したが、結果微妙だったので撤去した話

この記事の話は仮運用環境の構築なので、本番向きではない。また必要であろうDBのセットアップは今回していない。

Anubisとは?

端的に言うとBOTを弾くためのWAFのような奴だ。公式サイトはAnubis: Web AI Firewall Utility | Anubisだが、その名の通りLLMのクローラーを弾くことを重点にしている。

こういった感じのCloudflareにあるようなBOT認証画面が出てくるのだが、これが結構かわいい。公式サイトもかわいい。カナダのFF14プレイヤーの人が作ってるらしい。

実際の動作画面はList of known websites using Anubis | Anubis辺りから見れる。FOSSや、ザ・海外のオタクみたいなサイトが軒を連ねている。

最近BOTのアクセスが目立つし、こういう可愛いのいいなと思って導入を検討したのが事の発端だ。

ちなみにローディング画面はカスタマイズも可能なので、カスタマイズしている人もいるが、ちゃんとかわいい文化が継承されているのがいい。

またAnubisを導入しているサイトをClaude Opus 4.8に見させたところエラートラップに掛かって閲覧できなかったので機能的には問題なさそうだった。LLM越しにコンテンツを見られたくない場合には、かなりフィットしそうだ。

今回構築した構成

確認環境

adiaryはFastCGI + libfcgi-perl、PukiwikiはFastCGI + PHP-FPMで実行している。

Env Ver
Ubuntu 24.04.4 LTS
Anubis 1.25.0
nginx 1.26.1
adiary 3.52dev / Extends 0.25.0
libfcgi-perl 0.82+ds-3build2
Pukiwiki 1.5.4
PHP-FPM 8.3.31-3+ubuntu24.04.1
Prometheus 3.5.0

導入方法

1. インストール

  1. GitHubのリリース一覧から最新のバイナリのURLを控える
    • 糞長いのでAMD64は項目を展開しないと出てこない
  2. インストールする
    ```bash
    curl -OL https://github.com/TecharoHQ/anubis/releases/download/v1.25.0/anubis_1.25.0_amd64.deb
    sudo apt install ./anubis_1.25.0_amd64.deb
    ```

2. Anubisの設定

まずは/etc/anubis/default.envに設定があるので適当に書き換える。

以下は設定例。細かいのは公式の設定ドキュメントに書いてある。

BIND=[::]:10000
DIFFICULTY=4
METRICS_BIND=[::]:9110
SERVE_ROBOTS_TXT=0
REDIRECT_DOMAINS="example.com,*.example.com"
TARGET=http://[::1]:8081
OG_PASSTHROUGH=true

あとはサービスを有効化して開始すれば動く。

sudo systemctl enable anubis@default.service
sudo systemctl start anubis@default.service

今回設定した項目について

項目 役割
BIND Anubis自体のListenポート
DIFFICULTY チャレンジの難易度
METRICS_BIND Prometheusがポーリングしに来る時のポート
SERVE_ROBOTS_TXT Anubisにrobots.txtを代理生成させるかどうか
REDIRECT_DOMAINS Anubisの先にあるサイトのドメイン、無指定だと悪意のあるサイトに飛んでいく可能性がある
TARGET Anubisがプロキシする先のサイト。Anubisから繋ぎこむ先を同じポート番号にしていれば一元的に飛ばせる
OG_PASSTHROUGH OGをパススルーするかどうか。Anubis自身がOGを取り込んでSNSとかのOG取得BOTに渡してくれるのだと思う

3. TLS終端となるnginxの設定

example.com, blog.example.com, tool.example.comに対してAnubisを利かせたい場合、以下のように書く。

upstream anubis {
  server [::1]:10000;
}

server {
  listen 443 ssl;
  listen [::]:443 ssl;
  server_name example.com blog.example.com tool.example.com;

  ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

  client_max_body_size 100M;

  location / {
    proxy_pass http://anubis/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

4. virtual host側のnginxの設定

listenポートをAnubisから投げるポートに変更し、TLS終端でなくなるため証明書も消し去る。ここは受け口ではないため受けるIPも片方だけあればいい。

 server {
-  listen 443 ssl;
-  listen [::]:443 ssl;
+  listen [::]:8081;
   server_name blog.example.com;

-   ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;
-   ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

   ...
 }

余談だが、以下のような記述がある場合、Anubisがいい感じにしてくれるので消せる、というか消さないとポート番号がむき出しになったり、無限リダイレクトし始めるので、そういうことが起きたら消したほうがいい。

location = /hoge {
  return 301 /hoge/;
}

5. Prometheus側の設定

scrape_configs:に以下をぶら下げれば取れる。メトリクス名はanubis始まり。

  - job_name: 'anubis'
    static_configs:
      - targets: ['[::1]:9110']

ハマったところ

Pukiwikiに対して流すとHTTP通信になり、nginx側のポート番号が露出した

https://eco.lycolia.info/wikiにアクセスするとhttp://eco.lycolia.info:8081/wikiとなり、HTTP通信になったうえ、ポート番号が露出する問題が発生した。この問題はケツにスラッシュをつけてると起きなかった。

これはnginxに次の設定をしていたため、これを消すことで解消した。削除してもAnubisがいい感じに繋いでくれるようでhttps://eco.lycolia.info/wikiで問題なくアクセスできた。

location = /hoge {
  return 301 /hoge/;
}

Matomoでリファラが取れなくなった

取れないなぁ…と思ってググったら、GitHubにIssueが出ていたので取れないっぽい。

この時点で導入を断念した。

撤去

  1. nginxの設定を戻す
  2. Anubisを消す
    sudo systemctl stop anubis@default.service
    sudo systemctl disable anubis@default.service
    sudo apt remove anubis
    sudo rm -Rf /etc/anubis
    sudo systemctl restart nginx
    
  3. PrometheusからAnubisの設定を消して再起動
  4. 各ドメインにアクセスできるか確認
  5. おわり

あとがき

BOT弾きついでにAnubisの可愛い画面を出せるようにと導入を検討していたが、結果として断念した。Matomoでリファラが取れないのが深刻すぎたからだ。

リファラが取れるようになったら、また試すかもしれないし、試さないかもしれない。或いはそういう風に改造するか。でもこの手の奴はセキュリティリスクが高いので、あまり自分では触りたくない気持ちもある。

しかし個人サイトWebオンリー めぐる市の会期中にサーバーの上げ下げをしながらメンテを連発していたので、何ともアレである。まぁうちのサイトは管理人である私が好き放題やる実験場なので仕方がないね。

2026/06/05(金)先日の自宅サーバー移転に対し追加対応をした

更新日:
投稿日:

昨日、さくらのレンタルサーバでホスティングしていたサイトの大部分を自宅サーバーに移行したが改善点が幾つか見えたので、その追加対応をしたログ。

adiaryをApacheからNginx * FastCGIへ移行

こちらについては構築記事をUbuntuのadiaryをlibfcgi-perlで動かす方法に、パフォーマンス計測記事をサイト環境を移転したのでadiaryのパフォーマンス計測をやってみたに書いている。

ECO-WikiをApacheからNginx * PHP-FPMへ移行

Pukiwiki本体はPHP-FPM、それ以外をApacheで動かすようにしている。キメラ構成。

将来的にドメイン直下に静的コンテンツを置いたり、サイトをレガシー技術で拡張することを念頭に置いて設計しているがKISSだし、意味があるかどうかは謎である。

server {
  ...前略...

  root /var/www/path/to/eco;

  location = /wiki {
    return 301 /wiki/;
  }

  location /wiki/ {
    try_files $uri /wiki/index.php$is_args$args;
  }

  location ~ ^/wiki/.+\.php$ {
    fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  }

  location / {
    proxy_pass http://apache/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

FluentBitにApacheのパーサーを追加

/etc/fluent-bit/parsers.confに以下のパーサーを追加した。(LLMの言った内容のコピペ)

[PARSER]
    Name        apache_vhost
    Format      regex
    Regex       ^(?<vhost>[^:]+):(?<port>\d+) (?<remote_host>[^ ]*) [^ ]* (?<user>[^ ]*) \[(?<time>[^\]]*)\] "(?<method>\S+)(?: +(?<path>[^\"]*?)(?: +\S*)?)?" (?<code>[^ ]*) (?<size>[^ ]*) "(?<referer>[^\"]*)" "(?<agent>[^\"]*)"$
    Time_Key    time
    Time_Format %d/%b/%Y:%H:%M:%S %z
    Time_Keep   On

[PARSER]
    Name        apache_error
    Format      regex
    Regex       ^\[(?<time>[^\]]*)\] \[(?<module>[^:]*):(?<level>[^\]]*)\] \[pid (?<pid>[^\]]*)\](?: \[client (?<client>[^\]]*)\])? (?<message>.*)$
    Time_Key    time
    Time_Format %a %b %d %H:%M:%S.%L %Y
    Time_Keep   On

FluentBitでApacheのログをとれるようにした

/etc/fluent-bit/fluent-bit.confに対し、以下のような設定を追加。(LLMの言った内容のコピペ)

[INPUT]
    Name         tail
    Path         /var/log/apache2/access.log
    Tag          apache.access
    Parser       apache_vhost
    DB           /var/log/flb_apache.db
    Mem_Buf_Limit 5MB

[INPUT]
    Name         tail
    Path         /var/log/apache2/error.log
    Tag          apache.error
    Parser       apache_error
    DB           /var/log/flb_apache_error.db

[OUTPUT]
    name        loki
    match       apache.*
    host        ::1
    port        9100
    labels      job=apache, log_type=$TAG[1]

上記の設定にあるポート番号は他の記事と整合するように書いているつもりだが、ひょっとしたらずれているかもしれない。ちなみにうちのサーバーでは上記と別のポートを使っている。

Apacheのバーチャルホスト設定からログ設定を削除し、グローバル設定に集約

こうすることでログファイルを統一でき、管理が楽になる。

  1. /etc/apache2/sites-enabled/hoge.confからログ設定を削除

            #LogLevel info ssl:warn
    
    -         ErrorLog ${APACHE_LOG_DIR}/eco-error.log
    -         CustomLog ${APACHE_LOG_DIR}/eco-access.log combined
    </VirtualHost>
    
  2. /etc/apache2/apache2.confのファイル末尾に共通的なログ設定を追加。vhost_combinedを指定することでログにホスト名が出るようになっている
    ErrorLog ${APACHE_LOG_DIR}/error.log
    LogFormat "%v:%p %h %l %u %t \"%r\" %>s %O \"%{Referer}i\" \"%{User-Agent}i\"" vhost_combined
    CustomLog ${APACHE_LOG_DIR}/access.log vhost_combined
    

壊れていたカウンタを直した

今回のサイト移転に伴い、IPv6側が優先接続されるようになったのか、アクセスカウンタが回らなくなったため、アクセスカウンタにIPv6対応を施した。

具体的にはうちで使っているアクセスカウンタはリモホを見て日本のISPならカウントしているのだが、IPv6ではリモホが取れないためカウントできない問題があった。この問題そのものは去年の8月には気づいてIssueにしていたのだが、対応せず放置していたところ、ちょっとこれは困ると思って対応した。

変更差分としては、UAによるBOT判定を強化した上で、日本のISPかIPv6ならカウントするように変更した。また、条件分岐がmutableでイケてなかったので、Immutableになるように書き直した。