Claude Codeとさくらのレンタルサーバーを接続できるようにする

Illustration of a human brain morphing into a tree with pink blossoms and roots

WordPress 7.0がリリースされたことでWP-AI-Clientが実装され、プラグインとしてMCP Adapterを入れればMCPサーバーとしても動作するようになった。来週6月11日にはWordPress Meeetup Tokyoで「AI を使って WordPress サイトを管理しよう — ハンズオンセッション」が開催される。

AI アシスタント(Claude Desktop)をローカルの WordPress サイトに接続して、普通の言葉で指示を出します。有効なプラグインを確認する。エラーログをチェックする。下書き投稿を作成する。すべて会話で行います。

本稿では、これとはちょっと違った内容として、「プロダクションサイトとして運営されているさくらレンタルサーバーにClaude Codeを接続できるようにして開発・メンテ・運用のアドバイザーとして利用する」というやり方を紹介したい。Claude Codeのインストールなどの基本的なことは紹介しないので、その点はご了承を。

題材とするのは筆者の個人ブログである 高橋文樹.com である。

ローカル環境

さて、まずローカル環境を用意する。Localでもよいが、筆者はDockerを使っている(Localが壊れたため)。フォルダの構成は次のとおりで、本番環境をミラーリングする運用だ。ここにClaude Codeが利用するファイルも直接置いている。

.claude/CLAUDE.md # Claudeの設定ファイル
tasks # Claudeがタスクを入れる
docker # Docker関連ファイル
wp-content
  - themes
    - kyom # オリジナルテーマでGitHub管理
  - plugins
    - boswell # オリジナルプラグイン。
    - ... # その他プラグイン
wp-uploads
wp-includes
wp # wp-cliのエイリアス
.wp-cli.yml # WP-CLIの設定ファイル。後述。
...

CLAUDE.md には次のような内容を書いている。

# 高橋文樹.com ローカル開発環境



このディレクトリは [高橋文樹.com](https://takahashifumiki.com) のローカル開発環境です。



## 構成



- このサイトはDockerで動作しています(nginx + PHP 8.3 + MySQL 8.0)

- パスは `/opt/local/www/fumiki` です。

- ローカルURL: https://takahashifumiki.info

- MySQLの接続情報は wp-config.php に記載されています。



...以下、利用できるコマンドを列挙。wp-cli, docker, npmスクリプトなどなど。

さて、これから本番環境との接続を行なっていく。

本番環境との接続

本番環境への接続はSSHで行う。さくらのレンタルサーバーは認証情報が送られてくるが、筆者は鍵認証して .ssh/config に接続情報を記載している。

Host fumiki.sakura

HostName ****.sakura.ne.jp

User **** # ユーザー名

IdentitiesOnly yes

IdentityFile ~/.ssh/id_rsa_sakura

なぜこうしておくのがよいかというと、ssh fumiki.sakura で接続できるし、Claude Codeと鍵を共有する必要がない。ただし、好き勝手されてしまうと困るので、「 ssh fumiki.sakura は絶対に勝手に実行しないように」と CLAUDE.md に書いておくとよいだろう。.claude/settings.local.json に禁止コマンドとして書いておいてもいいかもしれない。

wp-cliを接続可能に

wp-cliは標準でDocker(ローカルのWordPress)に接続するよう、エイリアスとして登録しておく。というのは、Docker内で実行する必要があるからだ。したがって、プロジェクトルートにある wp は以下のようなエイリアスのコマンドであり、wp-cli本体ではない。

  1 #!/bin/bash

2 # WP-CLI wrapper

3 # Usage: ./wp <command> ... ローカル(Docker)で実行

4 # ./wp @prod <command> ... 本番(fumiki.sakura)でSSH経由実行

5 # Example: ./wp plugin list

6 # ./wp @prod plugin list

7

8 cd "$(dirname "$0")"

9

10 # @エイリアス指定時はホストのwp-cliを使う(Docker内からはSSHできないため)

11 # エイリアス定義は wp-cli.yml を参照

12 if [[ "$1" == @* ]]; then

13 exec php -d memory_limit=512M "$HOME/bin/wp-cli.phar" "$@"

14 fi

15

16 docker compose exec -u www-data php wp "$@"

そして、wp-cliがssh経由で実行できるように、.wp-cli.ymlを置いておく。これは公式でサポートされる機能だ。

# WP-CLI エイリアス設定済み

# @prod は本番環境(takahashifumiki.com / さくらレンタルサーバー)

# SSH認証は ~/.ssh/config の fumiki.sakura エントリーを使用

#

# 使い方(ホストのwp-cliで実行。Docker内のwpではSSHできないので注意):

# wp @prod option get home

# ./wp @prod plugin list # ラッパー経由でも可

@prod:

ssh: fumiki.sakura/home/***/www/takahashifumiki.com

こうしたコマンドが存在することを .claude/CLAUDE.md に記載しておくと、Claude Codeは本番環境でのWP-CLIが実行できるようになる。以下の画像は設定を試してもらった様子。

一回間違えたが、実行できた

筆者は「読み取り以外は必ず許可を取ること」というルールを書いているが、やろうと思えば記事の下書きを投稿することもできるし、プラグインのインストールやアップデートもできる。

エラーログを読み取れるように

さて、今度はエラーログを読み取れるようにしてみよう。さくらのレンタルサーバーでは「PHPiniファイル設定」からエラーログの場所を指定することができる。

設定をすると、ログが閲覧しやすくなる。

今回は ~/log/phperror.log にした。ログローテーションを実装するのもよいだろう。

さて、このログファイルだが、sshでClaude Codeに接続を許可してしまうと、なんでもできてしまう。気にしない人はそれでもよいだろうが、ローカルMacにあるDockerコンテナをいきなり全部消された経験を持つ筆者は油断しない。ではどうするれば良いのかというと、専用のSSH鍵をつくり、「その鍵ではこのコマンドが強制的に実行される」という状況を作るのである。

まず、普段使いとは異なる専用のSSH鍵をつくり、~/.ssh/config に登録する。

Host fumiki.log.sakura

HostName xxxxx.sakura.ne.jp

User xxxxx

IdentitiesOnly yes

IdentityFile ~/.ssh/id_fumiki_sakura_log

そして、この鍵をさくらのレンタルサーバーで ~/.ssh/authorized_keys に登録するのだが、このときにコマンドを強制するやり方(SSH Forced Command)で記載する。

command="/home/****/bin/readlog",no-pty,no-port-forwarding,no-agent-forwarding,no-X11-forwarding [ここに公開鍵]

この記法によって、SSH接続したときに強制的に ~/bin/readlog というコマンドが実行され、他のことはなにもできなくなる。readlog の内容はちょっと長いのだが紹介しておこう。

# ~/bin/readlog — read-only log access for the restricted SSH key (claude-log-reader).

# sshd runs this as a forced command; the client request string is in $SSH_ORIGINAL_COMMAND.

set -euf



LOG=/home/******/log/phperror.log

DIR=/home/******/log

MAX_LINES=2000

MAX_BYTES=1000000



set -- ${SSH_ORIGINAL_COMMAND:-}

case "${1:-tail}" in

list)

ls -lh "$DIR"/phperror.log "$DIR"/phperror-*.log.gz 2>/dev/null || true

;;

tail)

n="${2:-200}"

case "$n" in *[!0-9]*) echo "bad N" >&2; exit 2 ;; esac

[ "$n" -le "$MAX_LINES" ] || n=$MAX_LINES

tail -n "$n" "$LOG" | head -c "$MAX_BYTES"

;;

grep)

shift

pat="$*"

[ -n "$pat" ] || { echo "empty pattern" >&2; exit 2; }

grep -F -- "$pat" "$LOG" 2>/dev/null | tail -n "$MAX_LINES" | head -c "$MAX_BYTES" || true

;;

summary)

tail -c 3000000 "$LOG" | sed -E 's/^\[[^]]*\] //; s#/home/******/www[^ ]*##g; s/[0-9][0-9]*/N/g' | sort | uniq -c | sort -rn | head -20

;;

*)

echo "usage: list | tail [N] | grep <pattern> | summary" >&2

exit 2

;;

esac

中身は真面目に読まなくて良いが、要するに ~/log/phperror* しか実行できないコマンドである。あとはこれをローカルの .claude/setings.local.json の許可リストに入れておき、.claude/CLAUDE.md にも書いておこう。

{

"permissions": {

"allow": [

"Bash(ssh fumiki.sakura.log:*)"

]

}

}

ここまでくると何ができるかというと、「本番サーバーのエラーログを見て問題があったら直して」と相談することができる。自分のテーマやプラグインならイシューを登録してGitHub経由で直すのがいいだろう。プラグインに問題があってもアップデートぐらいなら勝手にやってくれるだろう。

デザインツールを連携する

さて、いわゆる開発でも便利なツールが存在する。たとえば、Figmaのようなデザインツールとの連携だ。

高橋文樹.comでは、記事の最後に著者ブロックが存在する。

これは「父親になって後悔してない」という記事の末尾。

で、筆者のサイトは「作家としての高橋文樹のファンになってもらう」が目的である。そこで、この「著者ブロック」をCTA(Call To Action)とし、「SNSやYouTubeをフォローする」「本を買う」などのアクションをとってもらうようにしたい。

筆者はデザインツールを普段使っていない(いきなりテーマ修正をする)ので、「現状のサイトを参考にして新案をいくつか提案してもらう」という使い方をしている。今回はMCPサーバーに対応しているPencilというツールを利用する。AIネイティブのFigmaといった感じの新しいツールだ。いまのところ無料で使えているが、そのうち有料になるだろう。

まず、プロジェクトルートに .mcp.json というファイルを用意し、次のように記載する。この記載は変わるかもしれないので、Pencilのサイトを参考にしてほしい。

{

"mcpServers": {

"pencil": {

"command": "/Applications/Pencil.app/Contents/Resources/app.asar.unpacked/out/mcp-server-darwin-arm64",

"args": [

"--app",

"desktop",

"--agent",

"claudeDesktop"

],

"env": {},

"type": "stdio"

}

}

}

そして、wp-content/themes/kyom/designs の中にPencilファイルを作成してPencilアプリで開き、AIに相談すると、このようなモックを作ってくれる。

PencilのUIはFigmaに近い。

気になるとこは口頭で修正してくれるし、コードを実装するのも同じだ。Pencil – Claude Code間の連携は不安定なところもあるが、デザインツールでカーソルを合わせてパディングの数値を見るようなことをしなくていいのは快適である。

運用改善提案

さて、そもそもサイトの改善アイデア自体をClaude Codeに出してもらう、というのも一つの手だ。Google AnalyticsはMCP Serverを出しているので、これを接続する。インストール方法は割愛するが、アカウント認証はサービスアカウントファイルを作って置いておくのがいいだろう。サービスアカウントのメールアドレスをGA4に登録するのも忘れずに。

{

"mcpServers": {

"figma": {

"type": "http",

"url": "https://mcp.figma.com/mcp"

},

"analytics-mcp": {

"command": "pipx",

"args": [

"run",

"analytics-mcp"

],

"env": {

"GOOGLE_APPLICATION_CREDENTIALS": "サービスアカウントへのパス",

"GOOGLE_PROJECT_ID": "プロジェクトID"

}

}

}

}

たとえば、「外部リンクのクリックのうちファン登録として伸ばせそうなのはどれ?」と聞けば、次のように答えてくれる。本番環境でのwp-cliと組み合わせれば記事の具体的な内容とあわせて相談することも可能だ。

この計測結果をもとに「どのような改善策があるか」「デザインに起こしてみて」「実装して」という感じで、かなりスピーディーに話が進む。

ちなみに、Google Analyticsは「いまのサイトの成績」を出すものなので、改善案を出すならGoogle Search Consoleと連携して「世間的に需要のあるコンテンツ」を掘り起こす方がいいのだが、Googleの一時的な不具合によって試すことができていない。

これらのツールについても .claude/CLAUDE.md などに利用方法を書いておくといいだろう。

まとめ

以上で筆者が現在さくらのレンタルサーバーで管理しているサイトをClaude Codeと連携させる方法について紹介した。同じことをやってみたいという読者は、生成AIにこの記事を読み込ませて「同じことをやりたい」と言えばいいだろう。

ここまでくると、筆者はもう勝手に全部やっといてくれないかな、とさえ感じる。コンテンツを考えるのは筆者だが、サイトの改善というのは一般的に考えつく手法がいくらでもあるはずで、それらを勝手に回しておくので十分ではないだろうか。もちろん、すごくよくなる可能性もあるし、完璧に無個性なサイトが出来上がる可能性もあるのだが。

今回はさくらのレンタルサーバーでの利用事例を紹介したが、リクエストがあれば、MCPサーバーがデフォルトで提供されているXserverやこのサイトで使っているPressableなども紹介する予定だ。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください