💨

XServer運用のwordpressをgit管理して、自動デプロイできるようにする

に公開
WordPress
GitHub Actions
XServer
tech

Xserver で運用している WordPress サイトのテーマを、「ローカル編集」 → 「GitHubでテーマ管理」 → 「push したら本番に反映」という流れに整えたときの備忘録メモです。WordPress コアやプラグインは Xserver 側で触らず、wp-content/themes/<theme> だけを同期させます。

やりたいこと

  • ローカルでテーマを書き換えて git で履歴を残す。
  • main へ push すると GitHub Actions が動いて Xserver に scp してくれる。
  • サーバーとローカルのズレをなくし、常に git の状態が真実になるようにする。

事前にそろえるもの

  • GitHub アカウントと SSH 鍵（~/.ssh/id_ed25519 など）。
  • Xserver サーバーパネルのログイン情報。
  • 対象テーマのディレクトリ名（例：mytheme）。

全体の流れ

  1. Xserver で SSH を有効化し、公開鍵を登録。
  2. ローカルにテーマ専用リポジトリを作る。
  3. サーバー上のテーマをダウンロードして初期コミット。
  4. GitHub リポジトリと GitHub Actions を用意。
  5. Secrets で接続情報を渡して、push→自動デプロイを試す。

1. Xserver の SSH をオンにする

  1. サーバーパネル →「SSH 設定」で「有効にする」をクリック。
  2. ローカルで鍵を作成します。
    ssh-keygen -t ed25519 -f ~/.ssh/xserver
  3. ~/.ssh/xserver.pub の内容をサーバーパネルに貼り付け。
  4. 接続を簡単にするため ~/.ssh/config を追記。
    Host xserver
  HostName svXXXX.xserver.jp
  User <サーバーID>
  Port 10022
  IdentityFile ~/.ssh/xserver
  5. ssh xserver が通るか確認。初回はフィンガープリントを受け入れます。
    $ ssh xserver
Warning: Permanently added 'svXXXX.xserver.jp' (ED25519) to the list of known hosts.
[<サーバーID>@svXXXX ~]$ pwd
/home/<サーバーID>

2. ローカルにテーマ用リポジトリを作成

mkdir -p ~/workspace/wp-theme && cd $_
git init

README.md や .gitignore（node_modules, .DS_Store など）もここで置いておくと、あとで差分が汚れません。

3. サーバーからテーマを持ってくる

scp でテーマを丸ごとコピーします。rsync 派の人は置き換えで。

scp -r -P 10022 xserver:/home/<ID>/<ドメイン>/public_html/wp-content/themes/<theme>/ ./theme

手元に落としたら git add . && git commit -m "chore: import existing theme" で初期状態を固めます。

4. GitHub リポジトリ + Actions をセット

  1. GitHub で新しいリポジトリを作り、main をデフォルトに。
  2. リモートを登録して初回 push。
    git remote add origin git@github.com:<account>/<repo>.git
git push -u origin main
  3. .github/workflows/deploy.yml を追加します。appleboy/scp-action を使うとシンプルでした。
    name: Deploy theme to Xserver
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Sync theme directory
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.XSERVER_HOST }}
          username: ${{ secrets.XSERVER_USER }}
          key: ${{ secrets.XSERVER_KEY }}
          port: ${{ secrets.XSERVER_PORT }}
          source: "theme/*"
          target: "/home/${{ secrets.XSERVER_USER }}/<ドメイン>/public_html/wp-content/themes/<theme>"
          overwrite: true
    source と target は自分のディレクトリに合わせて書き換えてください。

5. GitHub Secrets を登録

リポジトリの Settings > Secrets and variables > Actions > New repository secret から以下を追加します。

Secret 入れるもの
XSERVER_HOST サーバーパネルの「サーバー情報」に記載のホスト名（例: svXXXX.xserver.jp）
XSERVER_PORT SSH ポート。Xserver では通常 10022
XSERVER_USER サーバーID（例: xs123456）
XSERVER_KEY ~/.ssh/xserver の秘密鍵全文（-----BEGIN OPENSSH PRIVATE KEY----- から END まで）
XSERVER_THEME_PATH /home/<ID>/<ドメイン>/public_html/wp-content/themes/<theme> のようなデプロイ先パス（必要な場合）

各値の取得方法:

  • HOST / PORT: Xserver サーバーパネルのトップ「サーバー情報」ページで確認。
  • USER: 契約時に発行されるサーバーID。SSH 接続時のユーザー名と同じ。
  • KEY: cat ~/.ssh/xserver で秘密鍵を表示し、そのままコピペ。改行を含んだまま貼り付けてください。
  • THEME_PATH: SSH でログイン後 pwd でパスを確認し、public_html/wp-content/themes/<theme> までのフルパスを書く。

秘密鍵にパスフレーズが付いていると Action が停止するので、ssh-keygen -p -f ~/.ssh/xserver で解除しておくと安心です。***

6. push してデプロイを試す

  1. テーマのコードを少し直して git commit。
  2. git push origin main で Actions が走り出す。
  3. GitHub の Actions タブで成功を確認したら、Xserver の wp-content/themes/<theme> を覗いて反映状況をチェック。

おまけメモ

vi で文字化けしたとき

Xserver は LANG=C なので UTF-8 が崩れます。~/.bash_profile に以下を追記して再ログインすると直りました。

export LANG=ja_JP.UTF-8
export LC_ALL=ja_JP.UTF-8

Local でテーマを動かして確認したい

  1. Local をインストールして空サイトを作る。
  2. 「Open Site Shell」で wp-content/themes に移動。
  3. Git 管理中のテーマをシンボリックリンク。
    ln -s ~/workspace/wp-theme/theme ./<theme>
  4. WordPress 管理画面からテーマを有効化すれば、ローカルでもほぼ本番と同じ見た目で確認できます。

本番 DB を Local に持ち込みたいとき

  1. サーバーの wp-config.php で DB 情報をチェック。
  2. phpMyAdmin などで dump を取得してローカルへ。
  3. Local → Database → Adminer で dump をインポート。
  4. ドメイン書き換えは Adminer で wp_options の siteurl / home を編集するか、WP-CLI で
    wp search-replace 'https://prod.example.com' 'http://local.example'
    を実行すれば OK です。

こんな感じで、Xserver 上のテーマ開発も普段の Git ワークフローになじませられました。最初はステージングでテストしつつ、自動デプロイが安定してから本番に流すのがおすすめです。

Discussion