【試行錯誤の記録】GitHub ActionsでWordPress自動投稿!403エラーとの戦い

Others
スポンサーリンク
スポンサーリンク

はじめに

VSCodeでMarkdownを書いて、git push するだけでWordPressに自動投稿される――

そんな夢のようなシステムを作ろうと、GitHub Actions連携に挑戦しました。

しかし、待っていたのは 403 Forbiddenエラーとの長い戦い でした。

この記事では、その試行錯誤の過程と、最終的に発見した意外な原因について記録します。


目指したシステム

理想の執筆フロー

VSCodeでMarkdown執筆
  ↓
git push origin main
  ↓
GitHub Actions自動実行
  ↓
WordPressに投稿
  ↓
完了!

所要時間:数秒

メリット:

  • 慣れ親しんだエディタで執筆
  • Gitでバージョン管理
  • 完全自動化

これを実現するため、GitHub Actions連携に取り組みました。


準備:必要な設定

ローカル環境では成功していた

すでにローカル環境では、スクリプトが完璧に動作していました。

npm run publish

これで、VSCodeで書いた記事がローカルWordPressに投稿される。

次は本番環境へ。


GitHub Actionsの設定

.github/workflows/publish.yml:

name: Publish to WordPress

on:
  push:
    branches: [main]
    paths: ['posts/**']

jobs:
  publish:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - name: Publish to WordPress
        env:
          WP_URL: ${{ secrets.WP_URL }}
          WP_USER: ${{ secrets.WP_USER }}
          WP_APP_PASSWORD: ${{ secrets.WP_APP_PASSWORD }}
          # カテゴリーID...
        run: npm run publish

シンプルな設定。


GitHub Secretsの設定

GitHub → Settings → Secrets and variables → Actions

WP_URL=https://caymezon.com
WP_USER=caymezon
WP_APP_PASSWORD=xxxx xxxx xxxx xxxx
CATEGORY_*=(各カテゴリーID)

準備完了。いざ実行!


最初の実行:403エラー

git push

git checkout main
git merge develop
git push origin main

GitHub Actions起動!


ログを確認

Run npm run publish

📝 処理開始: test-article
──────────────────────────────────────────────────
⚠️  既存記事検索エラー: Invalid URL
❌ タグ処理失敗: Test Invalid URL
❌ 投稿エラー: Invalid URL
❌ test-article の処理に失敗しました

「Invalid URL」??


問題1:環境変数が読み込まれていない

原因:

const WP_URL = process.env.WP_URL;  // undefined

GitHub Secretsの設定ミス。

対処:

GitHub Secrets を再確認
→ すべて正しく設定
→ Re-run jobs

再実行:403 Forbidden

📝 処理開始: test-article
⚠️  既存記事検索エラー: Request failed with status code 403
❌ タグ処理失敗: Test ...403 Forbidden...
❌ 投稿エラー: ...403 Forbidden...

今度は403エラー。アクセスが拒否されている。


原因究明の旅

仮説1:WAF(Web Application Firewall)

最初に疑ったのはWAF。

XSERVERのWAFがREST APIをブロックしている可能性。

確認:

XSERVERサーバーパネル
→ セキュリティ → WAF設定
→ caymezon.com

結果:

WAF: すべてOFF

WAFは原因ではなかった。


仮説2:REST APIが無効化されている

ブラウザで確認:

https://caymezon.com/wp-json/wp/v2/posts

結果:

[
  {
    "id": 1,
    "title": {"rendered": "記事タイトル"},
    ...
  }
]

REST APIは正常に動作している!


仮説3:Application Passwordの問題

WordPress管理画面で新しいApplication Passwordを生成:

ユーザー → プロフィール
→ アプリケーションパスワード
→ 「GitHub Actions」で新規作成
→ コピー

curlコマンドでテスト:

curl -X POST "https://caymezon.com/wp-json/wp/v2/posts" \
  -u "caymezon:新しいApplication Password" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Curl Test Post",
    "content": "Test",
    "status": "draft"
  }'

結果:

{
  "id": 456,
  "title": {"rendered": "Curl Test Post"},
  ...
}

成功!Application Passwordも問題ない!


困惑:ローカルからは成功、GitHub Actionsからは失敗

状況の整理:

テスト方法結果
ローカル(npm run publish)✅ 成功
ブラウザ(GET)✅ 成功
curl(POST)✅ 成功
GitHub Actions❌ 403エラー

なぜGitHub Actionsだけ失敗するのか?


ブレイクスルー:ログをもっと詳しく見る

スクリプトを修正

エラーメッセージをもっと詳しく出力するように修正:

} catch (error) {
  if (error.response?.status === 403) {
    console.error('❌ 投稿エラー: 403 Forbidden');
    console.error('💡 XSERVERのセキュリティ設定を確認してください');
  }
  // ...
}

Re-run jobs で再実行。


ログに気づき

❌ 投稿エラー: 403 Forbidden
   💡 XSERVERのセキュリティ設定を確認してください

「セキュリティ設定」?

WAFはOFFだったけど、他に何かあるのか?


真の原因を発見

XSERVERのWordPressセキュリティ設定

もう一度、サーバーパネルを確認:

セキュリティ
→ WordPressセキュリティ設定
→ caymezon.com

見つけた:

国外IPアクセス制限設定
  REST API アクセス制限: ON

これだ!!


原因の理解

GitHub Actions(アメリカのサーバー)
  ↓ 国外IPからアクセス
XSERVERの国外IPアクセス制限
  ↓ ブロック
403 Forbidden

GitHub ActionsはクラウドのUbuntu環境(主にアメリカ)で実行される。

そのため、日本国外からのアクセスとして認識され、ブロックされていた!


なぜローカルからは成功したのか

ローカル環境(日本のIP)
  ↓ 日本国内からアクセス
XSERVER
  ↓ 許可
成功 ✅

GitHub Actions(アメリカのIP)
  ↓ 国外からアクセス
XSERVER
  ↓ ブロック
403 Forbidden ❌

これで全てが説明できる!


解決:設定変更

REST APIアクセス制限をOFF

XSERVERサーバーパネル
→ セキュリティ
→ WordPressセキュリティ設定
→ caymezon.com
→ 国外IPアクセス制限設定
→ REST API アクセス制限: OFF
→ 設定する

数分待つ(設定反映のため)


再実行

git push origin main

GitHub Actions実行...


成功!

📝 処理開始: test-article
──────────────────────────────────────────────────
📄 タイトル: テスト記事
🎯 モード: HTML変換
🏷️  カテゴリー: Development
🔖 タグ: Test

✨ 新規記事を作成します
   📌 Status: draft (新規)

🔧 最初のH1見出しを削除(タイトル重複回避)
✨ Markdown → HTML 変換完了

📤 WordPress投稿中...
✅ 投稿成功!
🔗 URL: https://caymezon.com/test-article/
📊 ステータス: draft

✅ すべての処理が完了しました

完璧!🎉


WordPress管理画面で確認

投稿 → 投稿一覧
→ 「テスト記事」が下書きで追加されている

→ 公開ボタンをクリック

→ 本番サイトで確認

テスト記事
テストこれはテスト記事です。2回目のGitHub Actions連携の更新テスト!!
→ 表示されている!

ついに成功!!🎊


セキュリティについて

Q: 国外IPアクセスをOFFにして大丈夫?

A: はい、大丈夫です✅

理由:

REST APIは二段階で保護されている

レベル1:読み取り(GET)

誰でもアクセス可能
例:記事一覧の取得
→ 公開情報なので問題なし

レベル2:書き込み(POST/PUT/DELETE)

Application Password必須
例:記事の作成・更新・削除
→ パスワードなしでは絶対にアクセスできない

つまり:

  • 記事を閲覧するだけなら誰でもOK(公開情報だから)
  • 記事を投稿・編集するにはApplication Passwordが必須
  • パスワードが漏れない限り、安全

学んだこと

1. エラーメッセージをよく読む

最初のエラー:

Invalid URL

これは環境変数の問題だった。

次のエラー:

403 Forbidden

これはアクセス制限の問題だった。

エラーメッセージには原因のヒントが隠れている。


2. 同じテストでも環境が違えば結果も違う

ローカルからは成功、GitHub Actionsからは失敗。

理由:

  • ローカル:日本国内のIP
  • GitHub Actions:アメリカのIP

環境の違いを意識する重要性。


3. 段階的にテストする

今回の検証プロセス:

1. REST APIは動作している?
   → ブラウザでGET → ✅

2. Application Passwordは正しい?
   → curlでPOST → ✅

3. なぜGitHub Actionsだけ失敗?
   → IPアドレスの違い → 原因発見

一つずつ切り分けていくことで、原因を特定できた。


4. ドキュメント化の重要性

今回の経験を記録したことで:

  • 次に同じ問題が起きても対処できる
  • 他の人も同じ問題を避けられる
  • 知識が蓄積される

試行錯誤の過程を記録することは、大きな価値がある。


トラブルシューティングガイド

403 Forbiddenエラーが出たら

チェックリスト:

1. XSERVERの国外IPアクセス制限

サーバーパネル
→ セキュリティ
→ WordPressセキュリティ設定
→ REST API アクセス制限: OFF

2. WAF設定

セキュリティ → WAF設定
→ すべてOFF、または /wp-json/ を除外

3. Application Password

WordPress管理画面
→ ユーザー → プロフィール
→ アプリケーションパスワード
→ 新規作成してGitHub Secretsを更新

4. REST API動作確認

ブラウザで確認:
https://あなたのサイト.com/wp-json/wp/v2/posts

curlでテスト:
curl -X POST "https://あなたのサイト.com/wp-json/wp/v2/posts" \
  -u "ユーザー名:Application Password" \
  -H "Content-Type: application/json" \
  -d '{"title":"Test","content":"Test","status":"draft"}'

まとめ

問題解決までの道のり

GitHub Actions実行
  ↓
403 Forbiddenエラー
  ↓
WAFを疑う → 原因ではなかった
  ↓
REST APIを確認 → 正常に動作
  ↓
Application Passwordを確認 → 問題なし
  ↓
curlテスト → 成功
  ↓
なぜGitHub Actionsだけ失敗?
  ↓
XSERVERの設定を再確認
  ↓
「国外IPアクセス制限」を発見
  ↓
設定をOFF
  ↓
成功!🎉

所要時間:数時間

でも、学びは大きかった。


完成したシステム

VSCodeでMarkdown執筆
  ↓ status: draft
developブランチで自由に編集
  ↓ status: publish
mainブランチにマージ
  ↓ git push
GitHub Actions自動実行
  ↓ REST API(国外IPも許可)
本番WordPress投稿
  ↓ 成功
本番サイトに表示

完全自動化達成!


この経験から

技術的な問題の多くは、見落としている設定が原因。

  • エラーメッセージをよく読む
  • 段階的にテストする
  • 環境の違いを意識する
  • 諦めずに調べ続ける

そして何より、試行錯誤の過程を楽しむこと。

問題を解決したときの達成感は、何物にも代えがたい。


参考情報

XSERVERの設定

WordPress REST API

GitHub Actions


おわりに

403エラーとの戦いは、予想以上に手強かった。

でも、原因を突き止めて解決できたときの喜びは、忘れられない。

もし同じ問題に遭遇している方がいたら、この記事が少しでも役に立てば幸いです。

そして、諦めずに調べ続ければ、必ず解決策は見つかる――

そんな希望を持ち続けてほしい。

Happy Coding! 🚀


最終更新: 2026-01-12

コメント