この記事は Advent Calendar 2023 の24日目の記事となります。a-blog cms にまつわる25日分の記事が公開されていますので、是非ご覧ください。 https://adventar.org/calendars/8651

a-blog cms の テーマのビルド環境

a-blog cms 標準テーマのビルド環境は、これまで「webpack」を利用してビルドされていました。パッケージに入っている「omake」ディレクトリ内にある、ビルド系ファイルを自分のテーマに持ってくることで、webpack環境を利用できるようになっておりまます。ただ近年は「webpack」以外にもモダンなビルドツールが出てきましたので、今回は「Vite」というツールについてa-blog cmsで使用するためのコツを紹介したいと思います。

Viteとは？

公式サイト（https://ja.vitejs.dev/）

詳しくは公式サイトをご覧ください。従来のビルドツールに比べ、パフォーマンスに特化しているツールになっています。

• Vite を使う理由
• はじめに
• 特徴

この記事では、Viteの使い方や設定方法にはフォーカスせず、a-blog cms で利用する場合の設定方法やコツをご紹介します。

バックエンドとの統合

a-blog cmsのようにバックエンドがHTMLを配信するシステムの場合、少し工夫が必要です。 WordPressや、Rails、Laravelのような有名CMS・ライブラリの場合、プラグインが用意されておりプラグインを導入することにより、Viteとの統合が出来るようになっております。

公式サイト「バックエンドの統合」

a-blog cms で Viteを利用できるようにする

a-blog cms で Viteを利用できるようにします。まずは「vite.config.js」を調整します。

「build」オプションで、「manifest」を「true」に設定し、「input」でエントリーポイントとなるjs（themes/xxxx/src/js/main.js）を指定します。

build: {
  manifest: true, // dist に manifest.json を出力
  rollupOptions: {
    input: {
      bundle: resolve(__dirname, 'src/js/main.js'),
    },
  },
},

この設定をすることで、manifest.jsonにビルドされたアセットのパスが出力されるようになります。

manifest.jsonの例

{
  "main.js": {
    "file": "assets/main.4889e940.js",
    "src": "main.js",
    "isEntry": true,
    "dynamicImports": ["views/foo.js"],
    "css": ["assets/main.b82dbe22.css"],
    "assets": ["assets/asset.0ab0f9cd.png"]
  },
  "views/foo.js": {
    "file": "assets/foo.869aea0d.js",
    "src": "views/foo.js",
    "isDynamicEntry": true,
    "imports": ["_shared.83069a53.js"]
  },
  "_shared.83069a53.js": {
    "file": "assets/shared.83069a53.js"
  }
}

この書き出された「manifest.json」の情報を使って、JSをHTMLに読み込みます。

専用モジュールの用意

上記で出力された「manifest.json」の情報をHTMLに出力するためのモジュールを作成します。

「extension/acms/GET/Vite.php」を作成して、以下コードを貼り付けてください。

<?php

namespace Acms\Custom\GET;

use ACMS_GET_Json_2Tpl;
use Template;
use ACMS_Corrector;

class Vite extends ACMS_GET_Json_2Tpl
{
    public function get()
    {
        $tpl = new Template($this->tpl, new ACMS_Corrector());

        try {
            if (isset($_ENV['VITE_MODE']) && $_ENV['VITE_MODE'] === 'develop') {
                $vars['localhost'] = isset($_ENV['VITE_LOCALHOST']) ? $_ENV['VITE_LOCALHOST'] : 'http://localhost:5173';
            } else {
                $json = $this->getManifest('themes/'.$_ENV['VITE_BUILD_THEME'].'/dist/manifest.json');
                $vars = json_decode($json, true);
                if (is_array($vars) && $this->is_vector($vars)) {
                    $vars = [
                        'root' => $vars,
                    ];
                }
            }
            if (is_array($vars)) {
                return $tpl->render($vars);
            }
        } catch (\Exception $e) {
            if (DEBUG_MODE) {
                throw $e;
            }
        }
        return '';
    }

    protected function env($key, $default = '') {
        return isset($_ENV[$key]) ? $_ENV[$key] : $default;
    }

    protected function getManifest($path)
    {
        try {
            $manifest = @file_get_contents($path);
            if (empty($manifest)) {
                throw new \RuntimeException('Empty Manifest.');
            }
        } catch ( \Exception $e ) {
            return '';
        }
        return $manifest;
    }
}

HTMLテンプレートの修正

モジュールが作成できたら、JSを読み込むインクルードファイルを修正します。以下のように作成したモジュールを使って読み込んでください。

ポイントは、 で、ここは vite.config.js で指定したエントリポイントに合わせて変更ください。

<!-- BEGIN_MODULE Vite -->

<!-- BEGIN src/js/main.js -->
<script type="module" src="/dist/{file}" async></script>
<!-- END src/js/main.js -->

<!-- BEGIN develop -->
<script type="module" src="{localhost}/@vite/client"></script>
<script type="module" src="{localhost}/src/js/main.js"></script>
<!-- END develop -->

<!-- END_MODULE Vite -->

.envファイルの修正

.envファイルに以下を追記してください。

VITE_MODE=develop # develop | production
VITE_LOCALHOST=http://localhost:5173 # http://localhost:5173
VITE_BUILD_THEME=hoge # ビルド対象テーマを指定します

使用方法

ここまでで下準備は完了です。使い方ですが本番用ビルドをする場合と、開発ビルドを行う場合の２通りがあります。 普段開発するときは開発ビルドを行いファイル保存と同時にビルドが走らせてスムーズな開発を行います。本番環境にアップロードする場合は本番用のビルドを行います。

開発ビルド

「vite」コマンドを実行すると開発サーバーが立ち上がり、カーカルURLが表示されます。このURLを覚えていてください。

  VITE v4.4.7  ready in 523 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

次に、「.env」ファイルを修正します。

VITE_MODE=develop # developを指定
VITE_LOCALHOST=http://localhost:5173 # 先ほど覚えたURLを指定
VITE_BUILD_THEME=yomeruba-v2 # ビルド対象テーマを指定します

以上で、a-blog cms と Vite によるアセット配信が統合されるようになります。

本番用ビルド

「vite build --mode=production」コマンドを実行するとプロダクションビルドを行えます。 プロダクションビルドされたファイルを反映する本番環境の「.env」ファイルを以下のように修正します。

VITE_MODE=production # productionを指定
VITE_LOCALHOST=http://localhost:5173 # 適当な値で大丈夫です
VITE_BUILD_THEME=hoge # ビルド対象テーマを指定します

以上で、a-blog cms と Vite によるアセット配信が統合されるようになります。

以上となります。

フロントエンドツールを使っている方はぜひ試してみてください。

今年も12月は Advent Calendar 企画で多くのサイトで a-blog cms のことを書いていただくことができました。ありがとうございます。あと、Advent Calendar に載ってないが、同時期に公開されたいくつかの記事も合わせて紹介しておきます。

他にもあれば、お知らせください。

また、不定期に皆さまのブログ記事を紹介させていただきますので、 X のハッシュタグ #ablogcms をつけて POST ください。また、@ablogcms のフォローについても、よろしくお願いいたします。