このところ静かな森にアクセスした際、そのテーマ Yohaku が私の個人的な美的感覚に非常に合っていることに気づきました。以前使っていた、機能はより包括的だが細やかさに欠ける Astral Reverie と比較すると、Yohaku は文章作成の深みにおいて 生活記録、個人スペース に適しており、その記録の表現形式は個人の雑事、学習、インスピレーションのニーズをカバーしています。私にとって初めてのモダンフロントエンドプロジェクトであり、それまでは主にPHPやネイティブCSS、JSを使用していたため、Yohakuの導入では大小さまざまな問題に直面しました。そこで、今後の参考のためにこの記事に記録します。

私はすでにパブリックIPv4アドレスを持つクラウドサーバーを持っているため、この記事では主に Linuxクラウドサーバー環境（宝塔パネル付き）での導入 について説明します。Vercel経由の導入方法については触れていませんので、必要な場合はインターネット上の他の記事を参照してください。

引用

関連プロジェクトリポジトリ：

Yohaku170

余白 / Yohaku — A typographic design system for written content. One accent, three neutral tiers, the rest is whitespace.

TypeScript

本記事で引用した関連ドキュメント、技術説明、ガイド：

Mix Space - 现代化的个人空间解决方案

基于 Next.js 的 AI 驱动型内容管理系统，为个人博客、创作者主页和内容网站打造。

Mix SpaceMix Space Team

yohaku-deploy-action35

Shell

yohaku110

TypeScript

Important

Yohakuプロジェクトはクローズドソースプロジェクトであり、InneiのGitHub上のYohakuリポジトリはプライベートリポジトリです。このリポジトリにアクセスするには、GitHub Sponsorを通じて開発者をスポンサーする必要があります。

https://github.com/sponsors/Innei

環境導入と必要条件

Yohakuプロジェクトの本体はGitHub上にあり、まずコンパイル・ビルドを行った後にサーバーに導入する必要があります。Node.jsプロジェクトはコンパイル時にデバイスのパフォーマンス負荷が大きいため、GitHub Actionsワークフローを使用して実装することを選択しました。

ドメイン登録とDNS設定

現在主流のドメイン登録チャネルとしては、国内のTencent Cloud、Alibaba Cloud、Baidu Cloud、海外のCloudflare、GoDaddy、DynaDotなどがあります。ここでは個人的にCloudflareでの登録をお勧めしますが、好みのドメインサービスプロバイダを選んでも構いません。違いはありません。

ドメインを登録したら、ドメインサービスプロバイダの「DNS解決」管理画面に移動し（注意：Tencent Cloudのドメイン管理はDNSPodで行います）、以下のAレコードを追加し、解決アドレスにサーバーの「パブリックIP」を入力します：

Note

解決レコードとは、ドメインの3レベル、4レベル、またはそれ以上のドメインを指します。例えば、example.com をアドレス 1.1.1.1 にA解決し、レコードが api の場合、DNSサーバーは api.example.com を 1.1.1.1 に解決します。@ はドメインのルートを指し、レコード @ はドメインそのものを表します。

サーバー環境とアカウント登録

まず、パブリックネットワークにアクセス可能なサーバーと、独自ドメインを準備する必要があります。Tencent Cloudを例にとると、一般的なクラウドサーバーの価格は月額CNY 30〜CNY 70程度、ドメインの価格は最低でも年間CNY 10です。これらのリソースはウェブサイト構築には高くなく、むしろ非常にお得です。この2つのハードウェア要件に加えて、以下のソフトウェア要件も必要です：

GitHubアカウント（こちらから登録）
サーバーに以下の実行環境を導入
- Docker
- Node.js 20.11 またはそれ以降のバージョン（特に注意：このソフトウェアは古いサーバーに搭載されているCentOS 7環境では動作しません）
- pnpm
- pm2
- sharp

さらに、Yohakuの各種機能実装に基づき、以下のソフトウェアを推奨します：

~~Clerkアカウント~~（Core 7以降は内蔵OAuth 2.0で対応機能を実現）
TMDBアカウント

サーバーのNode.js環境設定については、以下のコードを参考にできます：

BASH

curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo dnf install -y nodejs
# 验证
node -v

npm install -g pnpm
# 验证
pnpm -v

npm install -g pm2
# 验证
pm2 -v

cd && mkdir -p mx-space/core && cd $_

pnpm add sharp

宝塔パネルのNode.jsマネージャーでNode.jsをインストールした場合、ターミナルでNode.jsが見つからないことがあります。その場合は、マネージャーに表示されるインストールパスを確認し、PATHに追加してください。

サーバーのDocker環境設定について、Tencent Cloudの宝塔アプリケーションサーバーには通常Dockerが付属しており、1PanelパネルにもDockerが組み込まれています。ターミナルで docker -v と入力してDockerがインストールされているか確認できます。バージョン番号が表示されれば、Dockerがインストールされています。

必要に応じて、以下のDockerインストール用ターミナルコマンドを参考にしてください：

BASH

# 如果你的服务器在国内，建议使用阿里云的安装脚本
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

# 在国外，可以直接使用官方脚本安装
curl -fsSL https://get.docker.com | bash -s docker

# 查询版本以验证安装
docker -v

バックエンドサービス設定

MixSpaceの導入

Tip

この部分については、公式ドキュメントでより詳細な説明を参照できます： https://mx-space.js.org/docs/core/docker

Yohakuプロジェクトはフロントエンドとバックエンドが分離されたプロジェクトであり、MixSpaceバックエンドに依存しています。したがって、まずMixSpaceを導入する必要があります。より簡単なDockerの例として、まずバックエンド導入用の docker-compose.yml をプルします：

BASH

cd && mkdir -p mx-space/core && cd $_
 
# 拉取 docker-compose.yml 文件
wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

docker-compose.yml の environment フィールドに、以下の必須情報を入力します：

YML

- JWT_SECRET=
- ALLOWED_ORIGINS=

これらの2つのプロパティフィールドについては、以下の説明があります：

JWT_SECRET：長さ16文字以上、32文字以下の文字列を入力します。ユーザーのJWTを暗号化するために使用されます。シークレットは必ず自分で安全に保管し、他人に漏らさないでください。
ALLOWED_ORIGINS：許可するドメインを入力します。DNS設定で設定した解決済みドメインをここにカンマ区切りで入力します。注意点として、入力するドメインは完全でプレフィックスがないものにします。例：api.example.com,example.com のように入力します。https://api.example.com や api のみ、あるいは @ だけの入力は避けてください。

Coreを起動します：

BASH

docker compose up -d

リバースプロキシの設定

ここでは宝塔パネルを例に説明します。宝塔パネルを開き、「ウェブサイト」に移動し、新しいウェブサイトを作成します。ドメインに api.あなたのドメイン を入力し、その他はそのままにして作成をクリックします。この時点でドメインにアクセスして「ウェブサイトが正常に作成されました」と表示されれば、設定は問題ありません。

新しく作成したウェブサイトプロジェクトの右側にある「設定」をクリックし、ポップアップの左側で「SSL」を見つけて証明書（例：Let's Encrypt無料証明書）を設定し、HTTPSを有効にします。

その後、上記の手順を繰り返し、別のドメイン あなたのドメイン で新しいウェブサイトを作成します。

バックエンドのウェブサイトの「設定」で、「リバースプロキシ」セクションの「プロキシ追加」をクリックし、「ターゲット」に http://127.0.0.1:2333 を入力し、「送信ドメイン」に $host を入力して確定します。

フロントエンドのウェブサイトの「設定」で、「リバースプロキシ」セクションの「プロキシ追加」をクリックし、「ターゲット」に http://127.0.0.1:2323 を入力し、「送信ドメイン」に $host を入力して確定します。

その後、https://api.あなたのドメイン/proxy/qaqdmin にアクセスしてバックエンドサーバーを設定します。

トラブル対応

予期しない問題が発生した場合は、AIアシスタントに質問することをお勧めします。

新しい時代、新しい風潮。私たちは人工知能が急速に発展する時代に生きています。問題に直面したら、まずは各種AIアシスタントプログラムに質問してください。それらはほとんどの疑問を解決してくれるでしょう。

ここでは私が遭遇した問題を1つだけ挙げます。以前サーバーにCloudreveを設定していたため、Docker内にすでにredisという名前のコンテナが存在していました。その場合は docker-compose.yml で該当コンテナの名前を変更してデプロイすれば問題ありません。

MixSpaceの更新

メジャーバージョン番号が同じ場合（例：11.0.6 -> 11.6.1 や 11.0.6 -> 11.0.8 のように、最初の小数点前の数字が変わっていなければメジャーバージョン番号は同じとみなします）、MixSpaceの更新は非常に簡単です：

MixSpace Coreの導入ディレクトリに移動します。
直接 pull で最新バージョンを取得します。
新しいバージョンを起動します。

BASH

cd ./mx-space/core
docker compose pull app
docker compose up -d app

「Started」という表示が確認できたら、バックエンドページを開き、更新を確認します：

記事一覧が正常に表示されること
記事内のコメントとコンテンツが正常に表示されること
バックエンドログインが正常に行えること
記事を1件投稿し、削除して、記事が正常に公開・削除できること

フロントエンド Yohaku の導入

私は @Innei が提供する GitHub Actions を使用してプレビルド形式で導入しました。

Tip

この部分について、経験がある方は開発者の公式ドキュメントを参照できます： https://github.com/innei-dev/shiroi-deploy-action

導入ワークフローリポジトリをForkする

まず、作者のリポジトリからdeployをあなたのGitHubアカウントにForkする必要があります。

Note

GitHubにおける「Fork（フォーク）」とは、「合法的に宿題をコピーする」 ことを意味します。作者が「自動デプロイワークフロー」のテンプレートリポジトリを作成してくれているため、あなたのサーバーとドメインに合わせてこのワークフローを微調整する必要があります。ただし、作者のコードを直接変更することはできないため、Forkボタンをクリックして、作者のリポジトリ全体をそのままあなた自身のGitHubアカウントにコピーします。これでそのリポジトリはあなたのものになり、自由に変更できます。

GitHubアカウントにログインします。
作者のワークフローリポジトリを開きます： yohaku-deploy-action
画面の右上にある Fork ボタン（通常、横に小さな数字が表示されています）を見つけてクリックします。
ページに「Create a new fork」の確認画面が表示されます。何も変更せずに、一番下にある緑色の Create fork ボタンをクリックします。
2〜3秒待つと、ページがリフレッシュされ、左上のリポジトリ名が あなたのユーザー名/yohaku-deploy-action に変わります。

GH_PAT を取得する

同じGitHub上の機能ですが、GitHub Actions自体にはアカウント名のプライベートリポジトリのコードを表示する権限がありません。そのため、GitHub Actionsがリポジトリにアクセスできるように、アカウントのAPIキー（Personal Access Token (PAT)）を設定する必要があります。

GitHubの任意のページの右上にあるプロフィールアイコンをクリックし、ドロップダウンメニューから一番下の Settings（設定） を選択します。
左側の長いメニューを一番下までスクロールし、Developer settings（開発者設定） をクリックします。
左側のメニューから Personal access tokens → Tokens (classic) を選択します。
ページの右上にある Generate new token → Generate new token (classic) をクリックします。（この時点でGitHubのパスワードを入力して本人確認を求められる場合があります）
新しいトークン作成ページが表示されます：
- Note（メモ）：任意の名前を入力します（例：Deploy-Shiro）。
- Expiration（有効期限）：No expiration（無期限）を選択します。後で再設定する手間を省くためです。
- Select scopes（権限スコープ）：repo 項目を見つけ、隣の大きなチェックボックスをオンにします（これにより、このトークンがあなたのプライベートリポジトリにアクセスできるようになります）。
一番下までスクロールし、緑色の Generate token をクリックします。

Important

ページに長い文字列（ghp_ で始まる）が表示されます。すぐにコピーして、ローカルのメモ帳に保存してください！ このパスワードは一度しか表示されず、ページをリフレッシュすると二度と見られなくなります。

Secrets を設定する

次に、アカウントのAPIキーとその他の必要な情報をDeployリポジトリの設定情報に入力します：

最初のステップでForkしたリポジトリのページ（あなたのユーザー名/yohaku-deploy-action）に戻ります。
リポジトリの右上にある Settings（設定） タブをクリックします。
左側のメニューから順に Secrets and variables → Actions をクリックします。
緑色の New repository secret ボタンをクリックします。
入力ページで：
- Name（名前）：厳密に GH_PAT （すべて大文字）と入力します。
- Secret（内容）：先ほどメモ帳に保存した ghp_ で始まる文字列を貼り付けます。
Add secret をクリックします。

続けて New repository secret をクリックし、以下の情報も追加します：

HOST：サーバーのIPアドレスを入力します（例：1.1.1.1）
USER：root またはその他のユーザー名を入力します
PASSWORD：サーバーのrootパスワードを入力します（安全でない場合は KEY にSSH鍵を入力しても構いません。どちらか一方を入力すればよく、初心者にはパスワード入力が適しています）
PORT：22 を入力します（SSHのポートを変更していなければ22です）
BASE_URL：https://あなたのドメイン を入力します
NEXT_PUBLIC_API_URL：https://api.あなたのドメイン/api/v3 を入力します
NEXT_PUBLIC_GATEWAY_URL：https://api.あなたのドメイン を入力します

Note

宝塔パネルとサーバープロバイダのクラウドサーバーダッシュボードのファイアウォールで 22 ポートが開放されていることを確認してください。

.env 環境変数ファイルの設定

サーバーの /~ ディレクトリに shiro という名前のフォルダを作成し、その中に .env というファイルを作成します：

BASH

cd && mkdir -p shiro && cd $_ && touch .env

.env に以下の内容を記入し、空欄に対応する値を入力します：

Tip

開発者の公式見解によれば、NEXT_PUBLIC_GATEWAY_URL=${BASE_URL}、NEXT_PUBLIC_API_URL={BASE_URL}/api/v3 と設定すべきとのことですが、Next.jsは ${BASE_URL} のような動的な結合記述の解析で時々バグを起こします。エラーの発生を防ぐため、完全なURLを直接記述することをお勧めします。

ENV

BASE_URL=

NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_GATEWAY_URL=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

TMDB_API_KEY=

GH_TOKEN=

1. ベースURL部分（直書きの方が確実）

ENV

# 你的网站主域名
BASE_URL=https://あなたのドメイン

# 后端 API 地址（直接写完整网址）
NEXT_PUBLIC_API_URL=https://api.あなたのドメイン/api/v3

# 网关地址
NEXT_PUBLIC_GATEWAY_URL=https://api.あなたのドメイン

2. Clerk認証（ウェブサイトのバックエンドログイン）

これはログインサービスを提供するサードパーティサービスです。

Clerk公式サイトでアカウントを登録し、新しいアプリケーションを作成します。
コントロールパネルで見つけた2つのKeyをここに入力します：

ENV

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxx (Clerkで取得した公開鍵を入力)
CLERK_SECRET_KEY=sk_test_xxxxxxxxxxx (Clerkで取得した秘密鍵を入力)

# 下面这四个是登录跳转的路由，保持原样不用动它！
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

3. その他雑多なAPI

ENV

TMDB_API_KEY=

GH_TOKEN=ghp_xxxxxxxxxxxxxxxxx

TMDB_API_KEY：TMDBは映画データベースです。Yohakuブログでは映画カードの表示に対応しています。まだ設定したくない場合は空欄のままでも構いません（空欄の場合、映画ページにデータが表示されないだけで、サイト全体の動作には影響しません）。設定したい場合は、themoviedb.org でAPIキーを申請して入力してください。
GH_TOKEN：GitHub動的表示用のトークンです。先ほど取得した ghp_ で始まる「マスターキー」をそのままここに入力できます。

GitHub Actions

次に、リポジトリのActionsページに移動し、GitHub Actionsでプロジェクトのプレビルドを実行します。

上部の Actions タブをクリックします。
「I understand my workflows, go ahead and enable them」というメッセージが表示されたら、緑色のボタンをクリックして有効にします。
左側のメニューでワークフロー名 Build and Deploy をクリックします。
右側に Run workflow ボタンがあるのでクリックし、ポップアップした緑色の Run workflow をクリックします。

Run workflow ボタンがない場合は、.github/workflows/ フォルダに移動し、deploy.yml を開き、右上の編集（鉛筆）ボタンをクリックし、その後 Commit changes をクリックします。

Note

保存（Commit）をクリックすると、システムはコードが更新されたと見なして（pushをトリガーし）、自動的に Build and Deploy が開始されます。

トラブル対応

GitHub ActionsでYohakuをビルドする際にエラーが発生し、ログが以下のような場合：

BASH

0s
Run sh ./ci-release-build.sh
  sh ./ci-release-build.sh
  shell: /usr/bin/bash -e {0}
  env:
    HASH_FILE: build_hash
    PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin
    BASE_URL: ***
    NEXT_PUBLIC_API_URL: ***
    NEXT_PUBLIC_GATEWAY_URL: ***
No projects matched the filters in "/home/runner/work/shiroi-deploy-action/shiroi-deploy-action"
./ci-release-build.sh: 8: cd: can't cd to apps/web/.next
Error: Process completed with exit code 2.

deploy.yml に対して以下の修正を試してください：

Caution

この方法は、個人的なエラー分析とAIアシスタントの提案に基づいた修正であり、まだ発見されていないバグが存在する可能性があります。同様の問題に遭遇した場合は、作者に連絡するか、GitHubのIssueで問題を報告してください。

YML

name: Build and Deploy

on:
  push:
    branches:
      - main
  # schedule:
  #   - cron: '0 3 * * *'

  repository_dispatch:
    types: [trigger-workflow]

permissions: write-all
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

env:
  HASH_FILE: build_hash
  SOURCE_REPO: innei-dev/Yohaku
  BUILD_COMMAND: pnpm --filter @yohaku/web build:ci
  STANDALONE_SUBPATH: standalone/apps/web

jobs:
  prepare:
    name: Prepare
    runs-on: ubuntu-latest
    if: ${{ github.event.head_commit.message != 'Update hash file' }}

    outputs:
      hash_content: ${{ steps.read_hash.outputs.hash_content }}

    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Read HASH_FILE content
        id: read_hash
        run: |
          content=$(cat ${{ env.HASH_FILE }}) || true
          echo "hash_content=$content" >> "$GITHUB_OUTPUT"
  check:
    name: Check Should Rebuild
    runs-on: ubuntu-latest
    needs: prepare
    outputs:
      canceled: ${{ steps.use_content.outputs.canceled }}

    steps:
      - uses: actions/checkout@v4
        with:
          repository: innei-dev/Yohaku
          token: ${{ secrets.GH_PAT }} # `GH_PAT` is a secret that contains your PAT
          fetch-depth: 0
          lfs: true
          submodules: recursive

      - name: Use content from prev job and compare
        id: use_content
        env:
          FILE_HASH: ${{ needs.prepare.outputs.hash_content }}
        run: |
          file_hash=$FILE_HASH
          current_hash=$(git rev-parse --short HEAD)
          echo "File Hash: $file_hash"
          echo "Current Git Hash: $current_hash"
          if [ "$file_hash" == "$current_hash" ]; then
            echo "Hashes match. Stopping workflow."
            echo "canceled=true" >> $GITHUB_OUTPUT
          else
            echo "Hashes do not match. Continuing workflow."
          fi

  build:
    name: Build artifact
    runs-on: ubuntu-latest
    needs: check
    if: ${{needs.check.outputs.canceled != 'true'}}

    strategy:
      matrix:
        node-version: [lts/*]
    outputs:
      sha_short: ${{ steps.store.outputs.sha_short }}
      branch: ${{ steps.store.outputs.branch }}
    steps:
      - uses: actions/checkout@v4
        with:
          repository: ${{ env.SOURCE_REPO }}
          token: ${{ secrets.GH_PAT }} # `GH_PAT` is a secret that contains your PAT
          fetch-depth: 0
          lfs: true
          submodules: recursive

      - name: Checkout LFS objects
        run: git lfs checkout
      - uses: pnpm/action-setup@v2

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'
      - uses: jongwooo/next-cache@v1
      - name: Install dependencies
        run: pnpm install
      - name: Build project
        env:
          BASE_URL: ${{ secrets.BASE_URL }}
          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
          NEXT_PUBLIC_GATEWAY_URL: ${{ secrets.NEXT_PUBLIC_GATEWAY_URL }}
        run: |
          ${{ env.BUILD_COMMAND }}
          cd apps/web/.next
          rm -rf cache
          cp -r ../public ./standalone/public
          mv ./static ./standalone/apps/web/.next/static
          cd ./standalone
          echo ';process.title = "Yohaku (NextJS)"' >> server.js
          cd "$GITHUB_WORKSPACE"
          mkdir -p assets
          rm -f assets/release.zip
          (cd apps/web/.next && zip --symlinks -r "$GITHUB_WORKSPACE/assets/release.zip" ./* -x "dev/*" -x "cache/*")

      # - uses: actions/upload-artifact@v4
      #   with:
      #     name: dist
      #     path: assets/release.zip
      #     retention-days: 7
      - name: Cache Build Artifacts
        id: cache-primes
        uses: actions/cache/save@v4
        with:
          path: assets
          key: ${{ github.run_number }}-release

      - name: Store artifact commit version
        shell: bash
        id: store
        run: |
          sha_short=$(git rev-parse --short HEAD)
          branch_name=$(git rev-parse --abbrev-ref HEAD)
          echo "sha_short=$sha_short" >> "$GITHUB_OUTPUT"
          echo "branch=$branch_name" >> "$GITHUB_OUTPUT"

  deploy:
    name: Deploy artifact
    runs-on: ubuntu-latest
    needs: build
    steps:
      # - name: Download artifact
      #   uses: actions/download-artifact@v4
      #   with:
      #     name: dist

      - name: Restore cached Build Artifacts
        id: cache-primes-restore
        uses: actions/cache/restore@v4
        with:
          path: |
            assets
          key: ${{ github.run_number }}-release
      - name: Move assets to root
        run: mv assets/release.zip release.zip

      - name: Create PM2 config file
        run: |
          cat > ecosystem.config.js << 'EOF'
          module.exports = {
            apps: [
              {
                name: 'Shiroi',
                script: './server.js',
                cwd: __dirname,
                exec_mode: 'fork',
                instances: 1,
                autorestart: true,
                watch: false,
                max_memory_restart: '180M',
                env: {
                  NODE_ENV: 'production',
                  HOSTNAME: '0.0.0.0',
                  PORT: process.env.PORT || 2323,
                },
                log_date_format: 'YYYY-MM-DD HH:mm:ss',
                merge_logs: true,
              },
            ],
          };
          EOF

      - name: copy file via ssh password
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USER }}
          password: ${{ secrets.PASSWORD }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          source: 'release.zip'
          target: '/tmp/yohaku'

      - name: copy PM2 config via ssh password
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USER }}
          password: ${{ secrets.PASSWORD }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          source: 'ecosystem.config.js'
          target: '/tmp/yohaku'

      - name: Exec deploy script with SSH
        uses: appleboy/ssh-action@master

        with:
          command_timeout: 5m
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USER }}
          password: ${{ secrets.PASSWORD }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          script: |
            set -e
            source $HOME/.bashrc
            basedir=$HOME/yohaku
            workdir=$basedir/${{ github.run_number }}
            mkdir -p $workdir
            mkdir -p $basedir/.cache
            mv /tmp/yohaku/release.zip $workdir/release.zip
            install -m 644 /tmp/yohaku/ecosystem.config.js $basedir/ecosystem.config.js
            cd $workdir
            unzip -qq -o $workdir/release.zip
            rm -r /tmp/yohaku
            rm -rf $workdir/${{ env.STANDALONE_SUBPATH }}/.env
            ln -s $HOME/yohaku/.env $workdir/${{ env.STANDALONE_SUBPATH }}/.env
            export NEXT_SHARP_PATH=$(npm root -g)/sharp
            # https://github.com/Unitech/pm2/issues/3054
            # symlink workdir node entry file to basedir
            ln -sf $workdir/${{ env.STANDALONE_SUBPATH }}/server.js $basedir/server.js
            mkdir -p $workdir/${{ env.STANDALONE_SUBPATH }}/.next
            rm -rf $workdir/${{ env.STANDALONE_SUBPATH }}/.next/cache
            ln -sf $basedir/.cache $workdir/${{ env.STANDALONE_SUBPATH }}/.next/cache
            cd $basedir
            if pm2 describe Shiroi >/dev/null 2>&1; then
              pm2 reload ecosystem.config.js --update-env
            else
              pm2 start ecosystem.config.js --update-env
            fi
            rm $workdir/release.zip
            pm2 save
            echo "Deployed successfully"

      - name: After deploy script
        run: |
          hash=${{ needs.build.outputs.sha_short }}
          # curl -X "POST" "https://mx.innei.in/api/v2/fn/shiro/new-version-hook" -H 'Content-Type: application/json' -d "{\"hash\": \"$hash\", \"key\": \"\"}"
          ${{ secrets.AFTER_DEPLOY_SCRIPT }}
  store:
    name: Store artifact commit version
    runs-on: ubuntu-latest
    needs: [deploy, build]
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token
          fetch-depth: 0 # otherwise, you will failed to push refs to dest repo
      # Get the commit version from the build job
      - name: Use outputs from build
        env:
          SHA_SHORT: ${{ needs.build.outputs.sha_short }}
          BRANCH: ${{ needs.build.outputs.branch }}
        run: |
          echo "SHA Short from build: $SHA_SHORT"
          echo "Branch from build: $BRANCH"
      - name: Write hash to file
        env:
          SHA_SHORT: ${{ needs.build.outputs.sha_short }}

        run: echo $SHA_SHORT > ${{ env.HASH_FILE }}
      - name: Commit files
        run: |
          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git config --local user.name "github-actions[bot]"
          git add ${{ env.HASH_FILE }}
          git commit -a -m "Update hash file"
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: ${{ github.ref }}

MixSpace での設定

Note

この部分に関する公式ドキュメント： https://mx-space.js.org/docs/themes/shiro/deploy

Mix Spaceのバックエンドにアクセスし、「設定とクラウド関数」ページに移動します。右上の「新規追加」ボタンをクリックし、編集ページで以下の設定を入力します：

名前：shiro
参照：theme
データタイプ：JSON
データ（公式サンプルデータをテンプレートとして使用）：

JSON

{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "萌 ICP 备 20236136 号",
        "link": "https://icp.gov.moe/?keyword=20236136"
      }
    },
    "linkSections": [
      {
        "name": "关于",
        "links": [
          {
            "name": "关于本站",
            "href": "/about-site"
          },
          {
            "name": "关于我",
            "href": "/about"
          },
          {
            "name": "关于此项目",
            "href": "https://github.com/innei/Shiro",
            "external": true
          }
        ]
      },
      {
        "name": "更多",
        "links": [
          {
            "name": "时间线",
            "href": "/timeline"
          },
          {
            "name": "友链",
            "href": "/friends"
          },
          {
            "name": "监控",
            "href": "https://status.innei.in/status/main",
            "external": true
          }
        ]
      },
      {
        "name": "联系",
        "links": [
          {
            "name": "写留言",
            "href": "/message"
          },
          {
            "name": "发邮件",
            "href": "mailto:[email protected]",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/innei",
            "external": true
          }
        ]
      }
    ]
  },
  "config": {
    "color": {
      "light": [
        "#33A6B8",
        "#FF6666",
        "#26A69A",
        "#fb7287",
        "#69a6cc",
        "#F11A7B",
        "#78C1F3",
        "#FF6666",
        "#7ACDF6"
      ],
      "dark": [
        "#F596AA",
        "#A0A7D4",
        "#ff7b7b",
        "#99D8CF",
        "#838BC6",
        "#FFE5AD",
        "#9BE8D8",
        "#A1CCD1",
        "#EAAEBA"
      ]
    },
    "bg": [
      "/static/images/F0q8mwwaIAEtird.jpeg",
      "/static/images/IMG_2111.jpeg.webp.jpg"
    ],
    "custom": {
      "css": [],
      "styles": [],
      "js": [],
      "scripts": []
    },
    "site": {
      "favicon": "/innei.svg",
      "faviconDark": "/innei-dark.svg"
    },
    "hero": {
      "title": {
        "template": [
          {
            "type": "h1",
            "text": "Hi, I'm ",
            "class": "font-light text-4xl"
          },
          {
            "type": "h1",
            "text": "Innei",
            "class": "font-medium mx-2 text-4xl"
          },
          {
            "type": "h1",
            "text": "👋。",
            "class": "font-light text-4xl"
          },
          {
            "type": "br"
          },
          {
            "type": "h1",
            "text": "A NodeJS Full Stack ",
            "class": "font-light text-4xl"
          },
          {
            "type": "code",
            "text": "<Developer />",
            "class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
          },
          {
            "type": "span",
            "class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
          }
        ]
      },
      "description": "An independent developer coding with love."
    },
    "module": {
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      },
      "donate": {
        "enable": true,
        "link": "https://afdian.net/@Innei",
        "qrcode": [
          "/static/images/20191211132347.png",
          "/static/images/0424213144.png"
        ]
      },
      "bilibili": {
        "liveId": 1434499
      }
    }
  }
}

保存ボタンをクリックして設定を保存します。

終わりに

今回のYohaku導入のプロセスは、本質的には現代のCI/CDワークフローの実践的なトレーニングでした。宝塔パネルの環境修正からGitHub Actionsの詳細なデバッグまで、一つ一つのErrorを解決するたびに、自身の知識体系が再構築されていくのを感じました。

導入成功は最初のステップに過ぎません。本当の楽しさはその後の創作やカスタマイズにあります。この記事を参考にしている過程で新たな「謎の問題」に遭遇した場合は、コメント欄で気軽に交流するか、作者のInneiに直接質問してください。この記事が、あなたが個人スペースを構築する際の重要な助けとなることを願っています。

Yohakuを個人スペースとして導入した記録

Yohakuを個人スペースとして導入した記録

引用

環境導入と必要条件

ドメイン登録とDNS設定

サーバー環境とアカウント登録

バックエンドサービス設定

MixSpaceの導入

リバースプロキシの設定

トラブル対応

MixSpaceの更新

フロントエンド Yohaku の導入

導入ワークフローリポジトリをForkする

GH_PAT を取得する

Secrets を設定する

.env 環境変数ファイルの設定

1. ベースURL部分（直書きの方が確実）

2. Clerk認証（ウェブサイトのバックエンドログイン）

3. その他雑多なAPI

GitHub Actions

トラブル対応

MixSpace での設定

終わりに