GitLab CI/CD
上級者向けですが、GitLab CI/CD(継続的インテグレーション/継続的デリバリー、または継続的デプロイメント)を使用して、弊社サイトを更新することができます。関連するブランチに新しいコミットをプッシュするたびに、コードの変更が自動的にサイトにデプロイされます。これにより、WordPressのMySQLデータベースを上書きせずに、継続的に弊社プラットフォーム上の本番環境にコードをプッシュできます。
GitLab CI/CDをセットアップすることで、ローカル環境や弊社のステージング環境からコードをプッシュできるだけでなく、バージョン管理システムも構築できます。以下の例では、ステージング環境を作成し、変更をGitLab経由で本番環境にプッシュします(「本番環境への反映」機能はバイパスします)。
GitLabのアカウントをお持ちでない場合は、まずはアカウントを作成してください。
Kinstaサイトの作成
まずは、空のサイトを作成してからWordPressをインストールします。弊社で既にWordPressサイトを運営されている場合でも、以下の手順でサイトをGitLabに接続することができます。
MyKinstaで「WordPressサイト」を選択し、右上の「サイトを追加する」>「新規サイト作成」をクリックします。次のページで「空の環境(WordPress無し)」を選択し「続行」で次に進みます。
必須フィールドに入力し、「次へ」ボタンをクリックして各ウィンドウに進み、サイト作成プロセスを終了します。

GitLabプロジェクトの作成
まずGitLabにアクセスし、「新しいプロジェクトを作成」をクリックして、Kinstaサイト用に新しいリポジトリを作成します。なお、表示言語を日本語に設定するには、サイドバーの「Preference」>「Localization」の「Language」ドロップダウンから日本語を選択し、「Save Changes」で変更を保存します。

「空のプロジェクトを作成」オプションを選択し、「プロジェクト名」と「プロジェクトslug」を入力します。

「表示レベル」では、リポジトリを「プライベート」に設定することをお勧めします。このGitLabリポジトリには、有料のプラグインやテーマのコードが含まれる可能性があり、「公開」に設定してしまうと、他のユーザーが自由に購入した製品をダウンロードすることができてしまいます。
新しいプロジェクトの設定が完了したら、「プロジェクトを作成」をクリックして続行します。
SSH鍵の設定
次に、GitLabとMyKinstaの2つのプラットフォームが通信できるように、SSH鍵を追加します。
GitLabにSSH公開鍵を追加する
まず、Kinstaサイトの本番環境にSSH接続し、以下のcat
コマンドを実行して、SSH公開鍵を表示します。
cat ~/.ssh/id_rsa.pub
公開鍵は、以下のような形式です。コマンドラインウィンドウを開いたままにして、ウェブブラウザでGitLabに戻ります。
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQC7zdjwd6UIUJ5t4YnXNi6yhdHgrvIV2xgjvJ3592wd1Hzmnta4dau7yOIxQDU7/oNIr6DIskuIUii5ruGi4YZpIwB/AWGrn/uWb+FXJFiQHMZq9rCFcqtZXT0fyzKiSNkblV4F1RaPQJRvxfSUsSQ3jJU3FX8CF1c4R40CiBKkSHM8uavVIIESzgIHRiWVxkL9F6SKzg8GeTctJaAa3W+q1F1T60OKYmzH3OLdA37ZNmkm1CYWa8SF0JjOszxOnPwhfQ49P5r+rftXRFLz/7hGJ8CnUyzErSiUdUKNknUAB+w4KEZshQSNuiken0+GKqIw83dWWSyjiJJigcyDez2s+3AqDLHPG45NoBEXuBXjPQ9C08hokVyKlbzd/P2qvcnzUT5S6zTuaYOW+50+fiXeYkJlEoYYxoGRVx6FFdFqWyJx5UyaDv7QY3iQH0qct1iq9XGXMhBxIecIAEPUwF8nOp15in8L+5UIFMiNnihztTAXysc+8xvVwbuRlQIeR/E= ansible-generated on fvj-kinstagit
GitLabの画面右上にあるユーザーアイコンをクリックし、ドロップダウンメニューから「設定」を選択すると、「ユーザー設定」画面が表示されます。
サイドバーにある「SSHキー」をクリックします。
「新しいキーを追加」をクリックし、「キー」フィールドにSSH公開鍵を貼り付けます。「タイトル」フィールドは自動入力されますが、必要に応じて変更可能です。GitLabでは、SSH鍵の有効期限を設定することもできます。これは、インフラのセキュリティプロトコルの一部としてSSH鍵を無効にしたり、ローテーションしたりする場合に有用です。特に必要ない場合は、「有効期限」フィールドは空白のままにしてください。

構成を再確認後、「キーを追加」をクリックして終了します。
MyKinstaにSSH公開鍵を追加する
SSH公開鍵をGitLabに追加したら、同じ鍵をMyKinstaにも追加する必要があります。この手順では、SSH公開鍵をサイトのauthorized_keysファイル(rootとMyKinstaのみ書き込み可能)に追加します。これにより、GitLabがSSHでサイトにアクセスしてコードの変更をデプロイできるようになります。MyKinstaの画面右上にあるユーザーアイコンをクリックし、ドロップダウンメニューから「ユーザー設定」を選択します。

スクロールダウンして、「SSH鍵を追加」ボタンをクリックします。

モーダル/ポップアップウィンドウで、SSH鍵の「ラベル(名前)」を指定し、「SSH鍵」フィールドに公開鍵を貼り付け、「SSH鍵を追加する」をクリックして終了します。

GitLabにSSH秘密鍵を追加する
次に、サイトの本番環境にあるSSH秘密鍵をGitLabの環境変数として追加する必要があります。
秘密鍵を見つけるには、コマンドラインウィンドウに戻り、以下のコマンドを実行します。SSHの秘密鍵は、GitLab以外の場所で共有しないでください。
cat ~/.ssh/id_rsa
GitLabで、先ほど作成したプロジェクトをクリックします。サイドバーの「設定」にカーソルを合わせ、表示されるメニューから「CI/CD」をクリックします。

「変数」セクションの「展開」ボタンをクリックし、「変数を追加」をクリックします。キー名にSSH_PRIVATE_KEY
を使用し、「値」フィールドに秘密鍵を貼り付け、「変数を追加」ボタンをクリックして続行します。
変数を追加すると、リポジトリの設定に表示されます。

GitLabのリポジトリをMyKinstaに複製する
必要なSSH鍵を追加したため、弊社の本番環境にGitLabのリポジトリを複製します。GitLabでリポジトリに移動し、青い「クローン」ボタンをクリックし、「SSHでクローン」セクションのアドレスの横にあるアイコンをクリックして、リポジトリのアドレスをコピーします。

コマンドラインウィンドウに戻り、本番環境のホームディレクトリに移動します。ホームディレクトリへの移動方法がわからない場合は、以下のコマンドを使用してください。
cd ~/
ホームディレクトリに移動したら、GitLabからコピーしたリポジトリアドレスを指定してgit clone
コマンドを実行します。
git clone [your-repository-url-here]
リポジトリを複製すると、「you appear to cloned an empty repository(空のリポジトリをクローンしています」という警告が表示されます。現時点でリポジトリは空の状態であるため、問題ありません。

弊社のNginxの構成では、~/publicフォルダからコンテンツを配信します。したがって、既存の~/publicフォルダを削除し、クローンしたリポジトリフォルダの名前を「~/public」に変更する必要があります。これを行うには、以下の2つのコマンドを実行します。
rm -rf ~/public
mv ~/your-repo-folder-name ~/public
GitLabリポジトリを設定する
次に、以下のコマンドで~/publicフォルダに移動します。
cd ~/public
以下の2つのコマンドを実行して、GitLabリポジトリを設定します。このとき、必ず有効なメールアドレスと、GitLabアカウントに関連するユーザー名を指定してください。
git config --global user.email "[email protected]"
git config --global user.name "brian"
WP-CLIを使用してWordPressをインストールする
GitLabリポジトリを弊社の本番環境に複製し設定を行ったら、WordPressをインストールします。wordpress.orgからダウンロードしてインストールするか、WP-CLIでインストールすることができます。WP-CLIを使用する場合は、~/publicフォルダで以下のコマンドを実行します。
wp core download
WordPressをインストールすると、~/publicフォルダは以下のようになります。

次に、MyKinstaのサイトの「ドメイン」画面に移動し、「URLを開く」リンクをクリックして、プライマリドメインにアクセスします。

WordPressの5分間インストールの手順が表示されます。WordPressの設定方法についてはこちらをご覧ください。

WordPressのインストール完了後、プライマリドメインにアクセスすると、WordPressサイトが表示されます。

GitLab CI/CDパイプラインを設定する
構成ファイルを設定して、リポジトリのメインブランチが更新されたら、GitLabに自動デプロイの開始を指示します。弊社本番環境の~/publicフォルダにいることを確認し(必要であればcd ~/public
を実行して移動します)、以下のコマンドを実行して、新しいファイル「.gitlab-ci.yml」作成します。
touch .gitlab-ci.yml
ファイルを作成したら、以下のテキストをファイルに追加します。コマンドラインでnanoやvimを使用してファイルを編集するか、SFTPとテキストエディターやコードエディターを使用して編集できます。SFTPクライアントを使用する場合は、.gitlab-ci.ymlファイルが見えるように隠しファイルの表示を有効化してください。
before_script:
- apt-get update -qq
- apt-get install -qq git
# Setup SSH deploy keys
- 'which ssh-agent || ( apt-get install -qq openssh-client )'
- eval $(ssh-agent -s)
- ssh-add <(echo "$SSH_PRIVATE_KEY")
- mkdir -p ~/.ssh- '[[ -f /.dockerenv ]] && echo -e "Host *ntStrictHostKeyChecking none" > ~/.ssh/config'
- ssh-keyscan gitlab.com >> ~/.ssh/known_hosts
- chmod 644 ~/.ssh/known_hosts
deploy_live:
environment:
name: Live
url: your-primary-domain script:
- ssh user@ip-address -p port-number "cd public-root && git checkout main && git pull origin main && exit"
only:
- main
deploy_live
ブロックのurl
とscript
パラメータを変更します。太字の値は、MyKinstaで表示されるサイトの詳細に置き換えます。
- 「your-primary-domain」を、サイトのプライマリドメインで置換する
- 「ssh user@ip-address -p port-number」を、MyKinstaの「WordPressサイト」>(サイト名)>「情報」>「SFTP/SSH」で表示される「SSHターミナルのコマンド」で置換する
- 「public-root」を、MyKinstaの「WordPressサイト」>(サイト名)>「情報」>「環境情報」で表示される「パス」で置換する

ファイルのonly: - main
セクションは、GitLabのCI/CDプロセスを起動するリポジトリブランチを参照します。この構成では、mainブランチにプッシュすると、本番環境へのデプロイが始まります。デプロイのトリガーとして別のブランチを指定する場合は、自由に設定を変更してください。
ステージング環境を考慮してさらに細かく設定を行うには、弊社ステージング環境のURLとSSHの情報を記述したdeploy_staging
ブロックを追加し、ブランチをGitリポジトリのステージングブランチに合わせて更新します。以下の例では、git checkout staging
を使用しています。
deploy_staging:
environment:
name: Staging
url: your-staging-domain script:
- ssh user@ip-address -p port-number "cd public-root && git checkout main && git pull origin staging && exit"
only:
- staging
同様にonly: - staging
セクションに注意してください。これは、staging
ブランチにプッシュすると、GitLabのCI/CDプロセスが始まることを意味します。必要に応じてこれを調整すると、任意のブランチからデプロイできます。
GitLabへの最初のコミット
以上で、WordPressとGitLabの設定ファイルの準備が整いました。続いて、GitLabに最初のコミットを実行します。ブランチ「v0.1」を作成し、リポジトリのファイルの追跡を開始します。変更をコミットして、v0.1ブランチのGitLabに変更をプッシュします。~/publicフォルダから以下のコマンドを実行して、最初のコミットを行います。
git checkout -b v0.1
git add .
git commit -a -m 'Initial Commit'
git push origin v0.1
GitLabでリポジトリを確認すると、最初のコミットで作成したファイルが表示されます。

ステージング環境の設定
次に、MyKinstaのステージング環境を作成して設定を行います。ステージング環境を利用することで、本番環境に影響を与えずに、プラグイン、テーマ、コードを安全にテストできます。

ステージング環境を作成したら、本番環境用のコマンドラインウィンドウは開いたまま、新しいコマンドラインウィンドウを開いてステージング環境にSSH接続し、以下のコマンドを実行して、コードの変更箇所を確認します。
cd ~/public && git status
すると、以下のようなメッセージが表示されます。ブランチは先ほど作成したv0.1ですが、ステージング環境を作成する際に、wp-config.phpファイルに数行追加されたため、変更されています。

変更をコミットし、本番環境にデプロイ
最後に、ステージング環境にいくつか変更を加え、GitLabを使用して本番環境にコミットをプッシュします。なおこの方法は、MyKinstaの本番環境へのワンクリック反映機能をバイパスします。
次のWP-CLIコマンドを使用して、Yoast SEOプラグインをインストールします。
wp plugin install wordpress-seo
Yoast SEOプラグインをインストールしたら、以下のコマンドを実行してコミットし、v0.1ブランチに変更をプッシュします。
git add .
git commit -a -m ‘Installed Yoast SEO plugin.’
git push origin v0.1
最後に以下のコマンドで、mainブランチに切り替え、v0.1をmainにマージし、mainをGitLabにプッシュします。GitLab構成ファイルのonly: - main
の設定により、本番環境へのデプロイ処理が始まります。
git checkout main
git merge v0.1
git push origin main
GitLabで、レポジトリのサイドバーの「CI/CD」>「ジョブ」に移動すると、稼働中のジョブが表示されます。以下のジョブは、GitLabが本番環境にYoast SEOプラグインをデプロイしているものです。

ジョブが終了したら、本番環境のコマンドラインウィンドウに戻り、そのウィンドウでwp plugin list
を実行します。リストには、ステージング環境にインストールされたYoast SEOプラグイン、wordpress-seo
が表示されます。

Kinstaサイトを扱うテーマおよびプラグイン開発者は、GitLab CI/CDの自動デプロイを設定することで、ワークフローを高速化し、同時にコードのバージョン管理を行うことができます。