ガイド/ツール/WordPress.com で GitHub デプロイメントを使用する

WordPress.com で GitHub デプロイメントを使用する

GitHub デプロイメントは GitHub リポジトリを WordPress.com サイトと直接統合し、プラグイン、テーマ、完成サイトの変更をデプロイするバージョン管理された自動化ワークフローを提供します。このガイドでは、設定プロセスと接続済みリポジトリの管理方法について説明します。

この機能は、WordPress.com ビジネスプランおよびコマースプランをご利用のサイトで使用できます。ビジネスプランをご利用の場合は、必ず有効化してください。無料サイトの場合、およびパーソナルプランまたはプレミアムプランのサイトの場合、プランをアップグレードしてこの機能を利用してください。

動画チュートリアル

この動画の言語は英語です。
YouTube には、自分の言語で視聴できる自動翻訳機能があります。

自動翻訳字幕を表示するには:

  1. 動画を再生します。
  2. 動画右下の ⚙️ 設定 アイコンをクリックします。
  3. 字幕/CC を選択します。
  4. 自動翻訳 を選択します。
  5. 希望する言語を選びます。

自動吹き替え(実験機能)で視聴するには:

  1. ⚙️ 設定 アイコンをクリックします。
  2. 音声トラック を選択します。
  3. 視聴したい言語を選びます。

ℹ️ 翻訳と吹き替えは Google により自動生成されるため、正確でない場合があります。また、自動吹き替えは現在テスト中で、すべての言語で利用できるわけではありません。注: 字幕の文章は Google 翻訳で生成されるため、完全とはいえませんが、内容の把握に役立ちます。

リポジトリを接続する

GitHub リポジトリを WordPress.com サイトにデプロイする前に、次の手順に従ってこの2つの間の接続を設定する必要があります。

  1. 「サイト」ページ (https://wordpress.com/sites) にアクセスします。
  2. サイトの名前をクリックして、サイトの概要を表示します。
  3. 「デプロイメント」タブをクリックします。
  4. 「ディレクトリを接続」ボタンをクリックします。ここで、リポジトリが一覧表示されている場合は、すでに GitHub アカウントを接続しています。手順11に進みます。
  5. 「WordPress.com アプリをインストール」ボタンをクリックします。
  6. 新しいウィンドウが開き、まだ GitHub アカウントにログインしていない場合はログインを促すメッセージが表示されます。次に、こちらの画面が表示されます。
GitHub アカウントを開発者用 WordPress.com と連携する権限を求めるプロンプトのスクリーンショット。
  1. 「Authorize WordPress.com for Developers」ボタンをクリックします。
  2. リポジトリがある GitHub 組織またはアカウントを選択します。
  3. 接続するリポジトリを選択します。
    • All repositories: このオプションを選択すると、WordPress.com は選択した GitHub アカウントが所有する現在および将来のすべてのリポジトリにアクセスできます。これには、読み取り専用の公開リポジトリが含まれます。
    • Only select repositories:このオプションを選択すると、選択した GitHub アカウントで WordPress.com がアクセスできるリポジトリを選択できます。 
  4. オプションを選択したら、「Install」ボタンをクリックします。
  5. 新しいウィンドウが閉じ、WordPress.com に戻ります。選択したリポジトリが、そのリポジトリに関連付けられた GitHub アカウントとともに一覧表示されます。
デプロイするリポジトリを選択する画面。
  1. 接続するリポジトリの横にある「選択」をクリックします。

この時点で、「WordPress.com for Developers」「Authorized GitHub Apps」「Installed GitHub Apps」に表示されます。

デプロイメント設定を管理する

リポジトリを選択したら、デプロイメント設定を調整する必要があります。

  • デプロイメントブランチ: デフォルトはリポジトリのデフォルトブランチ (通常は main)ですが、使用するブランチに変更できます。
  • 移動先ディレクトリ: ファイルをデプロイするサーバーフォルダー。プラグインの場合、/wp-content/plugins/my-plugin-name。テーマの場合、/wp-content/themes/my-theme-name。部分的なサイトのデプロイ (複数のプラグインやテーマなど) には、/wp-content オプションを使用できます。リポジトリのコンテンツは、指定されたディレクトリ内の WordPress サイトの既存コンテンツとマージされます。
  • 自動デプロイメント: WordPress.com にデプロイする方法は2つあります。
    • 自動: コードがコミットされると、WordPress.com サイトにデプロイされます。ステージングサイトには自動デプロイメントをお勧めします。
    • 手動: デプロイメントをリクエストすると、コードがデプロイされます。本番サイトでは手動デプロイメントをお勧めします。
  • デプロイメントモード: デプロイメントには2つのタイプがあります。
    • シンプル: このモードは、すべてのファイルをリポジトリのブランチからサイトにコピーし、後処理なしでデプロイします。
    • 高度: このモードでは、ワークフロースクリプトを使用して、Composer 依存関係のインストール、デプロイ前のコードテスト実施、ファイルデプロイメントの制御などのカスタムビルドステップが可能です。Composer または Node ソフトウェアを必要とするリポジトリに最適です。詳細については、以下の「高度なデプロイメント」を参照してください

すべての設定が完了したら、「接続」ボタンをクリックします。リポジトリが追加されます。

接続されているすべてのリポジトリを表示するスクリーンショット。

最初のデプロイメントは、自動または手動のいずれかでトリガーする必要があります。その後は、「ディレクトリを接続」ボタンをクリックすると、いつでも別のリポジトリを接続できます。

高度なデプロイメント

高度なデプロイメントでは、デプロイメントの前にリポジトリ内のファイルを処理するワークフロースクリプトを指定できます。これにより、コードがチームのコーディング基準を満たしていることを確認したり、単体テストを実行したり、デプロイメントからファイルを除外したり、依存関係をインストールしたりでき、さまざまな可能性が広がります。開始するには、ワークフローのレシピをご覧ください。

高度なデプロイメントを設定するには:

  1. デプロイメントを設定できるフォームが表示されます。
  2. リポジトリの名前をクリックして、接続を管理します。
  3. 右側の「デプロイメントモードを選択」「高度」を選択します。
リポジトリの接続方法と利用可能な多くのオプションを示すスクリーンショット。
  1. リポジトリにすでにワークフローファイルがある場合は、ここで選択できます。システムはファイルにエラーがないかチェックします。エラーが見つからない場合は、手順7に進みます。
  2. 「新しいワークフローを作成」オプションを選択して、事前設定されたワークフローファイルを追加することもできます。このオプションを選択すると、リポジトリに wpcom.yml ワークフローファイルがすでに存在する場合は上書きされます。
  3. 「ワークフローのインストールを依頼」ボタンをクリックして、ワークフローファイルをリポジトリにコミットします。
  4. ワークフローが追加されて検証されたら、「更新」をクリックします。リポジトリは高度なデプロイメントを使用するようになりました。

コードをデプロイする

GitHub リポジトリをサイトに接続したら、次は実際にコードをデプロイします。利用できるデプロイメント方法には、自動手動の2つがあります。

リポジトリでのあらゆるコード変更は GitHub からライブサイトに自動的にデプロイされるため、ライブ本番サイトでは自動デプロイメントは推奨されません。代わりに、ステージングサイトへの自動デプロイメントを設定し、準備ができたら本番環境に同期することを検討してください。

手動デプロイメントでは、コードの変更をいつ公開するかを詳細に制御できます。デプロイメントごとに手動でトリガーする必要があるためです。ステージングサイトを使用しない場合は、手動デプロイメントをお勧めします。

デプロイメントを手動でトリガーするには:

  1. 「サイト」ページ (https://wordpress.com/sites) にアクセスします。
  2. サイトの名前をクリックして、サイトの概要を表示します。
  3. 「デプロイメント」タブをクリックします。
  4. デプロイするリポジトリの省略記号メニュー (⋮) をクリックします。
  5. 「手動デプロイメントをトリガー」を選択します。「デプロイメントの実行が作成されました」というバナー通知が表示され、デプロイメントのステータスが「待機中」に変わります。
  6. デプロイメントが完了するまで待ちます (ステータスは「デプロイ済み」に変わります)。
手動デプロイメントをトリガーできる「デプロイメント」タブのポップアップを示すスクリーンショット。
  1. 省略記号メニュー (⋮) をもう一度クリックし、「デプロイメントの実行を表示」を選択します。 
  2. デプロイメントの実行ログに、作成者とデプロイ済みのコミットが表示されます。デプロイメントの実行エントリーをクリックすると、詳細情報を表示できます。

既存の接続を管理する

既存の GitHub リポジトリ接続を管理するには:

  1. 「サイト」ページ (https://wordpress.com/sites) にアクセスします。
  2. サイトの名前をクリックして、サイトの概要を表示します。
  3. 「デプロイメント」タブをクリックします。
  4. 接続リストが表示されます。 

GitHub リポジトリとサイトの間に少なくとも1つの接続がある場合は、接続リストが表示されます。リストには、リポジトリ名とブランチ、サイトに最後にデプロイされたコミット、そのタイミング、コードが配置された場所、デプロイメントの実行にかかった時間、そのステータスなど、各接続に関連する情報が含まれています。

省略記号メニュー (⋮) をクリックすると、追加のアクションを使用できます。

「デプロイメント」タブと、接続済みリポジトリでさまざまなアクションを実行できるポップアップを示すスクリーンショット。

デプロイメントの実行ログ

デプロイメントの実行ログは、自動でトリガーされたか手動でトリガーされたかに関係なく、各デプロイメントの詳細なステップバイステップのレコードを提供します。これらのログは、変更の追跡、デプロイメントのステータスの監視、発生した問題のトラブルシューティングに役立ちます。過去10回の実行で30日以内にログにアクセスできるため、各デプロイメント中に何が起きたかを簡単に確認し、すべてがスムーズに実行されていることを確認できます。

デプロイメントのログをチェックするには:

  1. 「サイト」ページ (https://wordpress.com/sites) にアクセスします。
  2. サイトの名前をクリックして、サイトの概要を表示します。
  3. 「デプロイメント」タブをクリックします。
  4. ログを表示するリポジトリの横にある省略記号メニュー (⋮) をクリックします。
  5. 「デプロイメントの実行を表示」を選択します。
  6. 「デプロイメントの実行」リストビューには、サイトにデプロイされたコミット、デプロイメントのステータス、日付、期間が表示されます。
  7. 実行の任意の場所をクリックして展開し、デプロイメントに関する詳細情報を表示します。
「デプロイメント」タブと、選択したリポジトリに対するデプロイメントの実行を示すスクリーンショット。

ログには、GitHub からコードを取得して対象ディレクトリに配置するまでに実行された、すべてのコマンドのレコードが表示されます。「さらに表示」をクリックすると、ログ行を展開して詳細を表示できます。

リポジトリから接続解除する

サイトから GitHub リポジトリの接続を解除すると、リポジトリに対する今後の変更はサイトに影響を与えなくなります。デフォルトでは、デプロイされたファイルはサイトに残りますが、接続解除プロセス中にそれらを削除するオプションがあります。

リポジトリを削除するには:

  1. 「サイト」ページ (https://wordpress.com/sites) にアクセスします。
  2. サイトの名前をクリックして、サイトの概要を表示します。
  3. 「デプロイメント」タブをクリックします。
  4. リポジトリの省略記号メニュー (⋮) をクリックします。
  5. 「ディレクトリから切断」を選択します。
  6. ダイアログウィンドウが表示されます。切り替えをクリックして、サイトから関連ファイルを削除します。
  7. 「ディレクトリから切断」をクリックしてダイアログを閉じ、リポジトリの接続を解除します。
リポジトリの接続を解除するダイアログを示すスクリーンショット。

なお、「WordPress.com for Developers」「Installed GitHub Apps」「Authorized GitHub Apps」 にまだ表示されています。これは、WordPress.com がまだリポジトリにアクセスできるにもかかわらず、接続が削除されたためです。

WordPress.com の接続を GitHub から解除する

また、WordPress.com の GitHub アカウントへのアクセスを取り消すこともできます。GitHub の「Applications settings」にアクセスすれば、いつでも取り消すことができます。 

承認済みアプリの GitHub アカウントへのアクセスを取り消すには:

  1. 「Authorized GitHub Apps」に移動します。
  2. 「WordPress.com for Developers」の横にある「Revoke」をクリックします。
  3. 「I understand, revoke access」ボタンをクリックします。

承認済みアプリのアクセスを取り消しても、選択したアカウントに開発者用 WordPress.com アプリがインストールされたままであるため、コードをデプロイできます。

WordPress.com インストールへのアクセスを取り消し、WordPress.com サイトにコードをデプロイする機能を無効にするには:

  1. 「Installed GitHub Apps」に移動します。
  2. 「WordPress.com for Developers」の横にある「Configure」をクリックします。
  3. 「Danger zone」領域で「Uninstall」をクリックし、プロンプトが表示されたら「OK」をクリックします。

WordPress.com を承認済みアプリのリストから削除しても、リポジトリが削除されたり機能しなくなったりするわけではありません。WordPress.com のアクセスを取り消した後も、リポジトリは GitHub に残りますが、WordPress.com はコードをデプロイできなくなります。

Copied to clipboard!