カテゴリー: BookStack Page 1 of 2

BookStackサイトの404を差し替え。

BookStackの404記事を自分好みの文章に差し替えたときのメモです。

環境

  • BookStack v25.07.2
  • PHP8.3
    • PHP-FPM
  • Apache 2.4
    • 実行ユーザはwww-data
  • MySQL 8
  • Ubuntu 24.04

さっくりとした手順

  1. BookStackの404ページへと移動します。
  2. 元々の404ページを退避させます。
  3. カスタム404へと差し替えます。
  4. 設定を反映させます。
  5. 内容を確認します。

BookStackのディレクトリ移動と元ファイルの退避

  • ディレクトリ移動
cd /path/to/BookStack/resources/views/errors/ && pwd

自分の環境に合わせます。(筆者環境/home/www-data/BookStack/resources/views/errors/)

  • 404ページの退避
sudo mv 404.blade.php /path/to/backup/404.blade.php.$(date +%Y%m%d)

ファイル全体を差し替えるので、mvを利用します

  • 404ページの退避確認
ls -l /path/to/backup/404.blade.php.$(date +%Y%m%d)

ファイルがあることを確認します。(mvなのでlsで確認)

404ファイル作成

  • 404.blade.php

を、新たなファイルに差し替えます。筆者はこのようにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 | もう逃げられない、アーサー</title>
    <style>
        /* 全体設定 */
        body {
            font-family: 'Times New Roman', Times, serif;
            background-color: #f7f7f7;
            color: #333;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }

        /* コンテナ */
        .container {
            max-width: 800px;
            margin: 40px auto;
            background-color: #fff;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid #ddd;
        }

        /* 404ヘッダー */
        .header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #a00; /* 赤いライン */
            padding-bottom: 10px;
        }

        .header h1 {
            font-size: 3em;
            color: #a00;
            margin: 0;
        }

        .header p {
            color: #666;
            font-style: italic;
        }

        /* 対話スタイル */
        .dialogue-box {
            margin-bottom: 20px;
            padding: 15px;
            border-left: 5px solid;
        }

        .dialogue-box.editor {
            border-color: #4CAF50; /* 緑色 (編集者/外部の声) */
            background-color: #e8f5e9;
        }

        .dialogue-box.arthur {
            border-color: #2196F3; /* 青色 (アーサー/コナン・ドイル) */
            background-color: #e3f2fd;
        }

        .speaker {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
            font-size: 0.9em;
            text-transform: uppercase;
        }

        /* 結びのフッター */
        .footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px dashed #ccc;
        }

        .footer a {
            color: #007bff;
            text-decoration: none;
            margin: 0 10px;
            font-weight: bold;
        }

        .footer a:hover {
            text-decoration: underline;
        }

    </style>
</head>
<body>

    <div class="container">

        <div class="header">
            <h1>404 Not Found</h1>
            <p>ページが見つかりません。探偵の不在は、常に混乱をもたらします。</p>
        </div>

        <div class="dialogue-box editor">
            <span class="speaker">編集者(あるいは「声」)</span>
            <p>**もう逃げられない。**<br>
            続きを書け。馬車でストランドの編集部へ行こう。<br>
            よく考えろ。自宅は葬列で包囲されている。<br>
            喪章をつけたロンドン市民が続きを望んでいるんだ。<br>
            君は探偵の大敵を出した直後に滝に落として、雑誌に大損害を与えた。<br>
            もういい、歴史小説は終わりだ。<br>
            **ホームズを生還させるんだアーサー。**<br>
            君は既に有名作家として評価されているんだ!<br>
            母上からの手紙を読め。読むんだ!<br>
            母上も探偵の話を続けろと言っているぞ。<br>
            ファンから殺されたいのか?<br>
            君の作家性を高めるんだ!</p>
        </div>

        <div class="dialogue-box arthur">
            <span class="speaker">アーサー・コナン・ドイル</span>
            <p>**未だ何も評価されちゃいないんだ! 何も!**<br>
            俺にとって本当の小説とは戦争小説のことなんだ!<br>
            アレは俺の小説じゃ無かった!<br>
            生活費を稼ぐため、もっと書けと頼まれた!<br>
            俺は100年戦争小説の為にリアルな騎士道を学び尽くした!<br>
            これを書くために自キャラを滝に落としたら蛆虫どもが非難してくるんだ。<br>
            俺のことを探偵殺しとか駄文を書く暇あったら生き返らせろとか悪口の限りを並べやがった!<br>
            あいつら何なんだ?<br>
            歴史物のなんたるかも知らずに!<br>
            **頭にきたぜ!**</p>
        </div>

        <div class="dialogue-box editor">
            <span class="speaker">編集者(あるいは「声」)</span>
            <p>君にとってホームズの物語は<br>
            **今の栄光の時代だ。断じて過去にはない**</p>
        </div>

        <div class="dialogue-box arthur">
            <span class="speaker">アーサー・コナン・ドイル</span>
            <p>俺は**大英帝国の未来**を書きたいんだ!</p>
        </div>

        <div class="dialogue-box editor">
            <span class="speaker">編集者(あるいは「声」)</span>
            <p>未来? 未来だと?<br>
            君はまだ少年兵のように、戦場に夢を見ているのか?<br>
            ペンで帝国を救うつもりか、アーサー?</p>
        </div>

        <div class="dialogue-box arthur">
            <span class="speaker">アーサー・コナン・ドイル</span>
            <p>救うだと? 違う! **断罪する**んだ。<br>
            俺は帝国の瓦礫の上で、真実の騎士を描く!<br>
            硝煙の中に詩を見た。あの幻を、誰も読もうとしなかった。<br>
            ホームズは観察するだけだ。<br>
            だが俺の騎士は、**行動する!**</p>
        </div>

        <div class="footer">
            <a href="/">本棚へ戻る (Go Home)</a>
            <p style="font-size:0.8em; margin-top:10px;">(探偵は...未だ見つかっていません。)</p>
        </div>
    </div>

</body>
</html>
  • 404.blade.phpの所有者変更
sudo chown www-data:www-data 404.blade.php && ls -l 404.blade.php

www-dataはBookStackの実行ユーザに合わせます。合わせた後、所有者を確認します。

設定反映

  • artisanによるキャッシュクリア
sudo -u www-data php artisan view:clear
sudo -u www-data php artisan cache:clear

設定反映確認

BookStackのサイトにアクセスし、存在しない適当な文字を入れます。

上記、設定した文書があることを確認します。

BookStack、キャッチ画像の一新。

別で出しているBookStack。(一部の維持は連動しています)

https://barrel.reisalin.com

こちら、nano bananaの画像生勢力により、サイトのイメージを

この状態から

こちらへと変更。このように、ブログとの共通バナーを置いた次第です。

プロンプトは以下の通り
Japanese anime / manga style illustration, (maximum moe-style:1.7), (ultra-detailed:1.6), (dramatic contrast between traditional Japanese study room and holographic terminal commands:1.5), (a giant, aged scroll (Makimono) unrolled, with neon-green shell script flowing across its surface:1.6), (atmospheric illumination from the flowing script and floating "$ " prompts:1.4), (standard lens perspective:1.3), (smooth, natural visual composition:1.2), 16:9, widescreen

THRUST_WEIGHT = 1.7 // Thigh emphasis weight for "Stable Foundation of Automation" (1.5 - 2.0 recommended)

// CORE VARIABLES (Optimized for Shell Script Makimono)
HAIR_COLOR = (Matte, deep charcoal or sleek jet black, styled with elegant, traditional rope braids:1.5) // Traditional yet structured.
HAIR_ACCENT = (Kanzashi designed as a delicate, glowing '$ ' (prompt symbol) icon and a miniature sealing stamp:1.7), (Thin pure white and neon-green braided cord decoration:1.4).
GLASSES_STYLE = (Thin, antique metallic-rimmed glasses, reflecting the complex, flowing script logic:1.6) // Glasses for deep analysis.
OUTFIT_BASE_COLOR = (Structured, deep matte indigo or black Kimono-inspired functional wear:1.5) // Elegant and non-distracting color.
EMBROIDERY_COLOR = Neon-green and vibrant orange (CUI commands and variable names:1.4).
HOSIERY_COLOR = Sheer matte black or opaque deep indigo (smooth, functional texture, with subtle glowing lines resembling command pipes:1.6) // Pipe/Flow lines.

// CONSTRAINT & FOCUS (Filter Mitigation & Execution Focus)
Constraint: (Healthy and dignified, intellectual and deeply focused aesthetic only:1.5), (No offensive or sexually explicit content:1.5), (Focus on automation flow and scripting mastery:1.5).
Focus: (Maximum emphasis on the glowing script text on the scroll:1.8), (Fingers delicately touching the scroll, suggesting script execution:1.6), (The elegant, powerful curve of the upper thighs as a stable base for the command flow:THRUST_WEIGHT).

---

// **LETTERING (Shell Script Title - Execution Command)**
(Large, powerful, and perfectly aligned lettering of the words 'Shell Script' projected as glowing, neon-green commands directly over the center of the unrolled Makimono scroll:1.7), (Strict, mono-spaced terminal font, suggesting code precision and execution integrity:1.5), (The letters feature subtle internal segments that resemble pipe operators '|' and glowing '$' prompt symbols at the start of the word, all in neon green:1.6), (Holographic projection effect with sharp, clean edges and intense neon-green internal illumination, contrasting with the parchment texture:1.5), (Intensely illuminated by its own neon-green light, casting sharp, digital-looking reflections onto the aged parchment and the character's clothing:1.4)

---

// PERSPECTIVE, COMPOSITION, & POSE (Filter Safe & Execution Focus)
Perspective: (Medium-low angle perspective:1.5), emphasizing the grandeur of the unrolled scroll.
Framing: (Full body visible, seated in front of a low, sturdy wooden desk/platform:1.4), (**Framed by the subtle texture of a traditional shoji screen and the ancient wooden desk:1.3**).
PoseAction: (**Seated in a calm, focused posture (正座 or 片膝立ち), both hands gently holding the edges of the unrolled giant Makimono:1.7**), (**One finger or a traditional brush hovering over a glowing line of code, suggesting activation or modification:1.6**). // Scripting/Chanting pose.
Expression: (Intense concentration, a calm yet satisfied gaze as the script logic unfolds:1.5).

---

// SETTING & CYBER DETAILS
Location: (**A quiet, traditional Japanese study room (書斎) with a low, dark wooden desk:1.5**), (**The air is filled with subtle, swirling smoke or vapor, suggesting powerful computation:1.6**).
Decorations: (**A massive, aged parchment scroll unrolled, filled with glowing neon-green and orange shell script commands:1.7**), (**Holographic '$ ' prompts floating in the air like dust motes:1.5**), (A traditional inkstone and brush (筆) resting nearby:1.4).
Atmosphere: (Mysterious, powerful, and deeply focused, the magic of automation:1.2).
Details: (**The intense neon light from the script reflects dramatically off the character's face and the glossy hosiery:1.7**), (The contrast between the fragile parchment/wood and the powerful digital light:1.5).

---

// OUTFIT & ACCESSORIES (Automation Modules)
Outfit: (Kimono-inspired functional scholar's robes:1.4) (base=**OUTFIT_BASE_COLOR**, embroidery color=**EMBROIDERY_COLOR**, motif=flowing script/logic gates), (clean, structured, and matte texture:1.5).
Leg Wear: (**HOSIERY_COLOR** tights/leggings with subtle, pipe-like seams:1.6), (modular thigh strap designed as a scroll tie/seal, with a glowing 'for loop' icon charm:1.5).
Accessories: Minimalist choker designed as a logic gate circuit:1.3, A small, portable, clear glass sphere containing a perfectly ordered 'history' log:1.5.

---

// NEGATIVE PROMPTS (General)
(extra fingers:1.8), (fewer fingers:1.8), (malformed hands:1.8), (extra limbs:1.8), (mutated hands:1.8), (bad anatomy:1.5), (disfigured:1.5), (ugly:1.5), (deformed:1.5), (blurry:1.3), (duplicate:1.3), (morbid:1.2), (mutilated:1.2), (out of frame:1.2), (bad proportion:1.2), (bad quality:1.2), (overly sensual:1.5), (crotch_focus:1.5), (nipples:1.5), (vagina:1.5), (too much skin:1.5).

これで、より、自サイトの統一感が保たせられるようになりました。

BookStackのフォントをサーバ内のフリーフォントに変更。

BookStackの表示フォントを、サーバー内に配置したカスタムフォント(kiloji)に変更したときのメモです。

これには2つの目的があります。

  • 見た目を変えて独自性を出す。
  • サーバ内にあるフォントを指定することで読み込み速度を大幅に上げる。

環境

  • BookStack v25.07.2
  • PHP 8.3
  • MySQL 8
  • Apache 2.4
    • Apacheの実行ユーザはwww-data

さっくりとした手順

  1. カスタムフォントを用意します。
  2. BookStackのpublicフォルダにフォントファイルを格納します。
  3. カスタムCSSを設定します。
  4. 設定を確認します。

カスタムフォントを用意します。

今回用いたのは手書きボールペンのようなフォント、きろ字。(フリーで使えるフォントです)

公式サイトからフォントファイル一式をダウンロードします。

使うフォントファイルは

  • kiroji.ttf
  • kiroji.woff
  • kiroji.woff2
  • kiroji_b.ttf
  • kiroji_b.woff
  • kiroji_b.woff2

となっています。ダウンロード後、サーバの適当な位置に格納します。

BookStackのファイルにフォントを格納します。

  • BookStackのpublicディレクトリに移動
cd /path/to/bookstack/public && pwd

自分の環境に合わせます。(筆者環境 /home/www-data/BookStack/public)

  • fontsディレクトリを作成します。
sudo -u www-data mkdir -p fonts/kiloji
  • フォントファイルの格納
sudo -u www-data cp -pi /path/to/fonts/directory/kiroji*woff2 /path/to/bookstack/public/fonts/kiloji/
  • フォントファイルの格納確認
ls -l /path/to/bookstack/public/fonts/kiloji/

追加したフォントがあることを確認します。

カスタムCSSを修正します。

ブラウザでBookStackにアクセスし、管理者権限でログインします。

設定>カスタマイズに移動します。

「カスタムheadタグ」のテキストボックスに、以下のCSSコードを貼り付けます。

<style>
/* --- フォントの定義 --- */

/* 1. 通常の太さのフォントを 'kiloji' として定義 */
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/kiloji/kiloji.woff2') format('woff2'),
       url('/fonts/kiloji/kiloji.woff') format('woff'),
       url('/fonts/kiloji/kiloji.ttf') format('truetype');
}

/* 2. 太字用のフォントを、同じ 'kiloji' という名前で定義 */
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: bold;
  src: url('/fonts/kiloji/kiloji_b.woff2') format('woff2'),
       url('/fonts/kiloji/kiloji_b.woff') format('woff'),
       url('/fonts/kiloji/kiloji_b.ttf') format('truetype');
}

/* --- フォントの適用 --- */

/* 1. ページ全体の基準となる文字サイズとフォントを指定 */
body {
  font-family: 'kiloji', sans-serif !important;
  font-size: 16px; /* ← この数値で大きさを調整 */
}

/* 2. 見出しやナビゲーションなど、個別にフォントが指定されている箇所にも適用 */
h1, h2, h3, h4, h5, h6, .btn, a, input, textarea,
.page-nav, .sidebar-page-nav a, .tri-layout-container, .chapter-contents, .book-contents a {
  font-family: 'kiloji', sans-serif !important;
}
</style>

適用後、ページ下部の「設定を保存」ボタンをクリックします。

設定変更確認

BookStackにアクセスし、指定したフォントに替わっていたら設定変更です。

補足:最初の試行(一部のみフォントが変わったCSS)

以下は、bodyタグにのみフォントを指定した最初のコードです。見出しなど、個別にCSSが設定されている要素には適用されませんでした。

<style>
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: normal; 
  src: url('/fonts/kiloji/kiloji.woff2') format('woff2');
}
@font-face {
  font-family: 'kiloji';
  font-style: normal;
  font-weight: bold; 
  src: url('/fonts/kiloji/kiloji_b.woff2') format('woff2');
}
body {
  font-family: 'kiloji', sans-serif !important;
}
</style>

Ubuntu 24.04環境で、BookStackを24.10→v25.02にアップグレード。

Ubuntu24.04環境でBookStackをアップグレードしたときの手順メモです。

環境

  • BookStack v24.10
    • 25.02にアップグレード
  • Ubuntu 24.04
  • Apache 2.4系
  • PHP 8.3
  • MySQL 8系

さっくりとした手順

https://manualmaton.com/2023/12/15

以前に実施した、こちらの記事の通りに行いました。

  1. DBのバックアップを行います。
  • 推奨:システム全体のバックアップ
  1. git pullとアップグレードを行います。
  2. キャッシュをクリアします。
  3. Webサービス再起動を行います。
  4. アップグレード確認と動作確認を行います。

手順

システム全体のバックアップ(推奨)

万一に備え、システム全体のバックアップを取ることを推奨します。AWSや仮想サーバ等の場合は、インスタンスをまるごとバックアップしておくと良いでしょう。

mysqldumpによるDBバックアップ

  • 保存ディレクトリに移動
cd /hoge

任意のバックアップディレクトリを指定します。

mysqldump -h localhost -u bookstack -p --no-tablespaces --single-transaction bookstack > bookstack_backup.$(date +%Y%m%d).sql

DB名やDBユーザは自分の環境に合わせます。

  • バックアップ確認
less bookstack_backup.$(date +%Y%m%d).sql

平文で読めることを確認します。

git pullとアップグレード

  • BookStackのディレクトリに移動
cd /var/lib/BookStack/ && pwd

インストールされているディレクトリを指定します

  • git pull
sudo -u www-data git pull origin release

実行例(一部抜粋)

remote: Enumerating objects: 6028, done.
remote: Counting objects: 100% (1295/1295), done.
remote: Compressing objects: 100% (47/47), done.
remote: Total 6028 (delta 1263), reused 1248 (delta 1248), pack-reused 4733 (from 3)
Receiving objects: 100% (6028/6028), 5.75 MiB | 18.75 MiB/s, done.
Resolving deltas: 100% (3708/3708), completed with 405 local objects.
From https://github.com/BookStackApp/BookStack
 * branch                release    -> FETCH_HEAD
   b0dda6e6a..268e35343  release    -> origin/release
Updating b0dda6e6a..268e35343
Fast-forward
 .env.example.complete                                                                     |    5 +
 .github/translators.txt                                                                   |   40 +-
 .github/workflows/analyse-php.yml                                                         |    4 +-
 .github/workflows/lint-js.yml                                                             |    4 +-
 .github/workflows/lint-php.yml                                                            |    6 +-
 .github/workflows/test-js.yml                                                             |   29 +
 .github/workflows/test-migrations.yml                                                     |    6 +-
 .github/workflows/test-php.yml                                                            |    6 +-
 .gitignore                                                                                |    1 +
 LICENSE                                                                                   |    2 +-
 app/Access/ExternalBaseUserProvider.php                                                   |   49 +-
 app/Access/Ldap.php                                                                       |    8 +-

composer install

sudo -u www-data composer install --no-dev
  • 実行例(一部抜粋)
> @php -r "!file_exists('bootstrap/cache/services.php') || @unlink('bootstrap/cache/services.php');"
Installing dependencies from lock file
Verifying lock file contents can be installed on current platform.
Package operations: 5 installs, 70 updates, 8 removals
  - Downloading bacon/bacon-qr-code (v3.0.1)
  - Downloading dompdf/php-svg-lib (1.0.0)
  - Downloading dompdf/php-font-lib (1.0.1)
  - Downloading dompdf/dompdf (v3.1.0)
  - Downloading symfony/deprecation-contracts (v3.5.1)
  - Downloading symfony/http-foundation (v7.2.3)
  - Downloading guzzlehttp/uri-template (v1.0.4)
  - Downloading intervention/gif (4.2.1)
  - Downloading intervention/image (3.11.1)
  - Downloading symfony/process (v7.2.0)
  - Downloading knplabs/knp-snappy (v1.5.1)
  - Downloading symfony/string (v7.2.0)
  - Downloading symfony/service-contracts (v3.5.1)
  - Downloading symfony/console (v7.2.1)
  - Downloading laravel/prompts (v0.3.5)
  - Downloading laravel/serializable-closure (v2.0.3)
  - Downloading paragonie/constant_time_encoding (v3.0.0)
  - Downloading phpseclib/phpseclib (3.0.43)
  - Downloading league/oauth1-client (v1.11.0)
  - Downloading voku/portable-ascii (2.0.3)
  - Downloading symfony/css-selector (v7.2.0)
  - Downloading tijsverkoyen/css-to-inline-styles (v2.3.0)
  - Downloading symfony/var-dumper (v7.2.3)
  - Downloading symfony/uid (v7.2.0)
  - Downloading symfony/routing (v7.2.3)
  - Downloading symfony/mime (v7.2.3)
  - Downloading symfony/event-dispatcher-contracts (v3.5.1)
  - Downloading symfony/event-dispatcher (v7.2.0)
  • DBマイグレート
sudo -u www-data php artisan migrate

※この時、Are you sure you want to run this command?というプロンプトには「Yes」が見えるようにカーソルを移動してEnterします。そのままEnterするとキャンセルされ、全体のアップグレードが行われません。

アップグレード後のキャッシュクリアを行います。

  • キャッシュクリア
sudo -u www-data php artisan cache:clear
sudo -u www-data php artisan config:clear
sudo -u www-data php artisan view:clear

上記、それぞれ、successfully.で終わることを確認します。

Webサービス(apache)再起動

  • apache再起動前確認
systemctl status apache2.service

active(running)を確認します

  • apache再開
sudo systemctl restart apache2.service && echo $?

0を確認します。

  • apache再起動後確認
systemctl status apache2.service

active(runnning)を確認します

バージョンアップ確認

  1. BookStackがインストールされているURLにアクセスします。
  2. 管理者権限でログインします。
  3. 設定に進みシステムバージョンが作業時の最新版になっていることを確認します。
  4. ページの作成や編集が正常に行えることを確認します。

バージョンアップ後の作業(dumpファイル削除)

※SQLファイルが平文で読めるのは非常に危険な状態なので、作業を確認次第、早急に実施します※

  • 保存ディレクトリに移動
cd /hoge

DBバックアップを行ったディレクトリに移動します。

  • ファイル削除
shred -u bookstack_backup.$(date +%Y%m%d).sql
  • ファイル削除確認
ls -l bookstack_backup.$(date +%Y%m%d).sql

ファイルがないことを確認します。

AWS Lightsail → WebARENAへの移行完了。

はじめに

個人的に用いているVPSのコンテンツを、AWS LightsailからWebARENAへと移行完了。

今までUbuntu 20.04で動いていたサーバがUbuntu 24.04へと変わったことにより、Ubuntu 20.04のEOL対応を済ませたという形。

それぞれが、URLもそのままに、バージョンが上がった状態で表示されているという形です。

移行のきっかけ

Ubuntu 20.04のEOLが近づいてきた

これが一番の理由。Lightsailを最初に使い始めた頃は2022年5月だったので、まだ余裕があったのですが、そこから2年も経つとさすがに対応するしかないという形。

Lightsailにそのままインスタンスを移行させても良かったのですが

円安によるLightsail利用料高騰

という立ちはだかる壁があり、

  • 4GB Memory
  • 80 GB SSD

をもう一つ作り維持して行くには結構辛いものがありました。その上、

IPv4アドレスに追加料金

という更に手痛い値上げも発表されます。

迫るEOLに維持費の高騰、それをどうにかするために選んだのがWebARENAです。

WebARENAに切り替えた理由

利用費の安さ

https://web.arena.ne.jp/indigo

2024/10/12現在、

  • 4vCPU
  • 4GB Memory
  • 80GB SSD

で月額1630円。(筆者がサインアップしたときは1年間有効のクーポン付きでした)

Lightsailの24USD/月より安価なのは魅力的でした。

キャリア運営による回線の安定。

今回はNextcloudを使うと決めているだけに、回線が安定しているキャリア(docomo)のvpsを利用しました。

移行が思ったよりスムーズだった理由

元からデータをクラウドストレージに保存していた

これが一番大きかったです。クラウドストレージWasabiをs3でマウントしていたために、他のサーバに画像を転送する必要すらありませんでした。

また、mysqldumpの転送も、同じようにs3経由で引っ張るだけです。

サービス構築のメモを最初に残していた

冒頭の外部サイトやこのブログに

  • うまくいった手順
  • ハマったこと
  • 失敗した理由

など書いていたのが助かりました。手順を基本的にコピペで済むように済ませていたのも自賛する点です。

事前検証

この検証のように、別サーバに移行することをやっていたのもまた助かりました。

今後

最小限構成でのLightsailの転用

とはいえ、「LightsailのDNS機能」が有用であるため、一番安いインスタンスを残しつつ他の用途に使っていきます。

BookStackのサーバ移行でハマったこと。

LAMP環境で動くアプリケーションを移行する際、だいたいは

  1. 移行先でWebアプリを作成する
  2. 移行元から移行先へとデータ(画像や添付ファイル)をコピーする
  3. DBをエクスポート→インポートする

の流れで別サーバへと移行が可能です。BookStackも同じような理屈で移行が行えるかを確かめたところ、罠がいくつかありました。

環境

共通環境

  • Apache 2.4
  • MySQL8系

移行元

  • Ubuntu 20.04
  • PHP 8.1

移行先

  • Ubuntu 24.04
  • PHP 8.3

さっくりといかない手順

  1. 【移行先】BookStackを構築します。
  2. オプション【移行元】アカウントのセキュリティ設定を一度解除します。
  3. 【移行元】→【移行先】画像や添付データ一式を転送します。
  4. 【移行元】→【移行先】MySQLのダンプを行い、DBを転送します。
  5. 【移行先】DBをインポートします。
  6. 【移行先】DBマイグレーションを行います。
  7. オプション【移行先】URLの変更処理を行います。
  8. 【移行先】設定の反映を行います。
  9. 【移行先】移行先で確認を行います。

【移行先】BookStackを構築します。

自サイトで恐縮ですが、手順はこちらをそのまま用いています

オプション【移行元】管理アカウントの二要素認証を解除。

これが一番ハマったポイントでした。

マイアカウント > アクセス&セキュリティ > 多要素認証

で、二要素認証をオンにしていると、移行先でログインができませんでした。

なので、移行時の一時的な措置として解除を行います。

【移行元】→【移行先】データの転送

BookStackのルートディレクトリ配下の

/public/uploads/を一式、移行先へと転送して、同じディレクトリ構造に上書きします。SCPやtarで固める塔、任意の方法で転送します。

このとき、アクセス権をWebサービス実行ユーザにしてください。(Ubuntuのデフォルトはwww-data)

【移行元】→【移行先】DBのデータ移行

mysqldump -h localhost -u bookstackuser -p --no-tablespaces --single-transaction bookstack > bookstack_backup.$(date +%Y%m%d).sql

-h DBサーバ名、-u bookstackのDBにアクセスできるユーザー DB名という形です。DBユーザに設定されているパスワードを入力してダンプを取ります。

こうしてできたDBは、任意の(安全で確実な)方法で移行先に転送します。

【移行先】DBのリストア

  • ディレクトリ移動
cd /hoge && pwd

ダンプしたDBファイルが転送されているディレクトリに移動します。

  • DBインポート
mysql -h localhost -u bookstackuser -p bookstack < bookstack_backup.$(date +%Y%m%d).sql

【移行先】DBのマイグレーション

これもハマったポイントでした。

  • BookStackルートディレクトリに移動
/path/to/BookStack/root/directory && pwd

/var/www/html/BookStackなど、移行先の、BookStackがインストールされているディレクトリに移動します。

  • DBマイグレーション
sudo -u www-data php artisan migrate --force

このマイグレーションを行わないと、リストアしたDBを参照してくれませんでした。

オプション【移行先】URL変更処理

サーバのURLを変える場合はここにも罠があります。BookStackの設定ファイル、.env

# Application URL
# This must be the root URL that you want to host BookStack on.
# All URLs in BookStack will be generated using this value
# to ensure URLs generated are consistent and secure.
# If you change this in the future you may need to run a command
# to update stored URLs in the database. Command example:
# php artisan bookstack:update-url https://old.example.com https://new.example.com

という但し書きがありますので、この処理を行います。

  • BookStackルートディレクトリに移動
/path/to/BookStack/root/directory && pwd
  • URLアップデート
sudo -u www-data php artisan bookstack:update-url https://old.example.com https://new.example.com

二回ほど確認されますので、両方とも「yes」で答えます。

DB上書き反映

  • BookStackルートディレクトリに移動
/path/to/BookStack/root/directory && pwd
  • キャッシュクリア
sudo -u www-data php artisan cache:clear
  • Webサービス(apache)再起動
sudo systemctl restart apache2.service
  • Webサービス(apache)再起動確認
systemctl status apache2.service

active(running)を確認します。

サーバ移行確認

  1. ブラウザで移行先のURLにアクセスします。
  2. ログインできることを確認します。
  3. 前のデータ(画像や添付含む)が閲覧できることを確認します。
  4. 記事の作成等が行えることを確認します。
  5. 多要素認証をしている場合は、再設定します。

BookStack マークダウンエディタのチートシート(ショートカット)。

BookStackで記事を編集中、適当にキーボードを操作していたら、見出しが自動的に入ったので調べてみました。

https://www.bookstackapp.com/docs/user/markdown-editor

ショートカット一覧

ショートカット説明備考
Ctrl + S下書きを保存投稿して公開は下の機能を使います
Ctrl + Enterページを保存して公開
Ctrl + 1見出し(h2)## が入ります
Ctrl + 2見出し(h3)### が入ります
Ctrl + 3見出し(h4)#### が入ります
Ctrl + 4見出し(h5)##### が入ります
Ctrl + 5段落いわゆる\<p>です
Ctrl + 6段落いわゆる\<p>です
Ctrl + 7コードブロック```~```が入ります
Ctrl + Eコードブロック```~```が入ります
Ctrl + 8インラインコード`~`が入ります
Ctrl +O番号付きのリスト1. が入ります
Ctrl + P箇条書きリスト- が入ります
Ctrl + Kリンク挿入[]()が入ります
Ctrl + Shift + KBookStack内のリンク挿入ページ一覧がモーダル表示されます
Ctrl + Shift + IURL経由での画像挿入![](http://)が入ります

※Macを利用する方はCtrlをCommandに読み替えてください。

これらのショートカット、非常に便利。特に見出しとコードをシームレスに入力できるのは大きなアドバンテージでした。

やりなおし、書き直し。

起こったこと

結論から言うと、別に管理しているBookStackサイトを一から作り直す羽目になりました。

https://barrel.reisalin.com

事象としては

  • ページを作れなくなった。
  • 状況を確認しようとさらに試したらログインすらできなくなった。
  • (エラーが発生しています)のみ表示される。

原因

おそらく

の時に、バージョン24を試したこと。

その際にartisan migrateが走りませんでした。

こちら、起き抜けにてなりで作業していたために、諸々の記録が残っていなかったのが悔やまれます。

コンテンツの書き直し

とはいえ、下書きはある程度あるので、ドキュメントの再作成がやりやすかったのは幸いです。

本棚も、自分が読みやすいように整理しています。

これから

  • コンテンツの拡充
  • 可能な限りの再現性の確認

などをおこなっていきます。

BookStackにGoogleフォントを設定。

こちらでBookStackに任意のフォントを設定する方法を説明しましたが、

Webで公開されているGoogleフォントに置き換えます。

設定

管理者権限でログイン後、
設定>カスタマイズ>カスタムheadタグに進みます。

以下のコードを入れます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family: 'Noto Sans JP', sans-serif;
}
</style>

ここでは Noto Sans JPを入れています。適宜合わせてください。

設定後、

のように、Googleフォントに変わっていれば設定完了です。

BookStackをnginxで動かす場合の設定。

デスクトップPCとしてのLinux利用(Kubuntu 22.04インストール後にやったこと) – Manualmaton's Laboratory

こちら、ローカルサーバとして運用することにしています。

公開しているサイトと異なりnginxで動かしているので、その場合のメモです。

環境

  • Ubuntu 22.04
  • 適切に名前解決できる
  • ドメイン名に沿った証明書がある
    • 筆者はmkcertでローカル証明書を作っています

インストールして最初の設定が終わっている状態です。

nginxインストール

sudo aptitude install nginx

mysqlインストール

sudo aptitude install mysql-server mysql-client libmysqlclient-dev

sql設定変更

sudo cp -pi /etc/mysql/mysql.conf.d/mysqld.cnf /path/to/backup/mysqld.cnf.$(date +%Y%m%d)
# 任意のバックアップディレクトリを指定します。
# .$(date +%Y%m%d)をつけることで、バックアップファイルは当日日付(YYYYMMDD形式)で記録されます

diff -u /etc/mysql/mysql.conf.d/mysqld.cnf /path/to/backup/mysqld.cnf.$(date +%Y%m%d)
# バックアップが取れていることを「差分が存在しないこと」で確認します

echo -e "default_authentication_plugin=mysql_native_password" | sudo tee -a /etc/mysql/mysql.conf.d/mysqld.cnf
# mysqld.cnfに追記をします

MySQL再起動

sudo systemctl restart mysql.service

MySQLのrootパスワード変更

sudo mysql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
flush privileges;
exit

運用に合わせて適切なパスワードを設定します。

mysql-secure-installation

sudo mysql_secure_installation

詳しい設定は以下に記しています。

https://atelier.reisalin.com/projects/zettel/questions/5-mysql_secure_installation

phpのインストール

https://barrel.reisalin.com/books/nextcloud/page/1-1-nextcloud

自サイトを参考にしていますが、一部異なります。

PHPレポジトリを追加して必要パッケージをインストールします。

  • レポジトリ追加
sudo add-apt-repository ppa:ondrej/php

Ubuntu20.04系ではこれを行わないとPHP7.4系しかインストールされません。

  • パッケージアップデート
sudo aptitude update
  • php インストール
sudo aptitude install php8.1
sudo aptitude install php8.1-{opcache,pdo,bcmath,calendar,ctype,fileinfo,ftp,gd,intl,json,ldap,mbstring,mysql,posix,readline,sockets,bz2,tokenizer,zip,curl,iconv,phar,xml,dev,fpm}
#fpmを入れる必要あり

nginx環境でも動かすため、php(バージョン)-.fpmを入れます。

  • apache無効化
sudo disable apache2.service

依存関係でapache2も一緒にインストールされるので、ここで停止させます。

Composerインストール

https://barrel.reisalin.com/books/bookstack/page/bookstackubuntu2004

同じくこちらにメモを残しています。

  • インストール
  • ディレクトリ移動
cd /hoge

任意の作業ディレクトリに移動します

  • インストーラーのダウンロード
sudo php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
  • インストール
sudo php composer-setup.php
  • インストーラーのリンク解除
sudo php -r "unlink('composer-setup.php');"
  • コマンドのパスを移動
sudo mv composer.phar /usr/local/bin/composer
  • composerに実行権を付与
sudo chmod +x /usr/local/bin/composer
  • バージョン確認
composer --version

バージョンが表示されることを確認します。

DBを作成します。

  • mysqlログイン
mysql -u root -p
CREATE DATABASE bookstack character set utf8mb4;
CREATE USER 'bookstackuser'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON bookstack.* TO 'bookstackuser'@'localhost';
FLUSH PRIVILEGES;
EXIT;

DB名/パスワードはポリシーに応じて適切なものを指定します。

BookStackの配置

  • プログラム配置
cd /home/www-data
# パーティションの都合上、/home/www-dataに置いています。
# 環境に合わせて適切なWebサービス公開ディレクトリを指定してください。

sudo git clone https://github.com/BookStackApp/BookStack.git --branch release --single-branch 
sudo chown -R www-data:www-data BookStack
cd BookStack
  • 設定ファイル編集
sudo cp -pi .env.example .env

教義・信仰に沿ったエディタで以下を編集します。

APP_URL=https://hoge.example.com
# 公開用URLを指定します

# Database details
DB_HOST=localhost
DB_DATABASE=bookstack
DB_USERNAME=bookstackuser
DB_PASSWORD=password
# DB名、パスワードなどは先ほど作成したものです。
  • マイグレート
sudo -u www-data composer install --no-dev --optimize-autoloader
sudo -u www-data php artisan key:generate
sudo -u www-data php artisan db:seed --force
sudo -u www-data php artisan migrate --force

Nginx設定

  • 設定ファイル作成
    • /etc/nginx/site-available/bookstack.conf
  • ファイル内容
server {
    listen       443 ssl http2;
    listen       [::]:443 ssl http2;
    # サーバ名を指定します。
    server_name  hoge.example.com;
        server_tokens off;
        ssl_session_timeout 1d;
        ssl_session_cache shared:SSL:50m;
        ssl_session_tickets off;
        ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
        ssl_prefer_server_ciphers off;
        add_header Strict-Transport-Security 'max-age=63072000';

    # 任意のログディレクトリを指定します。
    access_log  /var/log/nginx/bookstack/access.log;
    error_log   /var/log/nginx/bookstack/error.log;
    # SSL証明書を指定します。
    ssl_certificate      /path/to/ssl_certificate/hoge.crt;
    # SSL秘密鍵を指定します。
    ssl_certificate_key  /path/to/ssl_key/hoge.key;

    # BookStackが置かれているディレクトリです。/publicは必ず指定します。
    root /home/www-data/BookStack/public;
    index index.php index.html;

    location / {
      try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
      fastcgi_split_path_info ^(.+\.php)(/.+)$;
      include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
      fastcgi_pass unix:/run/php/php8.1-fpm.sock;
    }
}

# 強制的にhttps通信
server {
    listen       80;
    listen       [::]:80;
    server_name  veritas.lumos;
    return 301   https://$host$request_uri;
}

nginx設定を有効化します。

  • ディレクトリ移動
cd /etc/nginx/sites-enabled
  • 初期設定ファイルを無効
sudo unlink default
  • 設定有効化
sudo ln -sf /etc/nginx/site-available/bookstack.conf bookstack.conf
  • 構文チェック
sudo nginx -t

エラーがないことを確認します。

  • nginx再起動
sudo systemctl restart nginx.service

インストール確認

設定したドメインにブラウザでアクセスし、ログイン画面が出てくれば成功です。

Page 1 of 2

Powered by WordPress & Theme by Anders Norén