gitpodで手軽にWordPress環境を構築

Tweet

Pocket

Gitpodを使って手軽にWorPress開発環境を構築する手順をメモします。

GitPod

Gitpodは、GitHub・GitLab・Bitbuketと連携できるオンラインIDEです。

本記事は、GitHubと連携することを前提にしています。
GitHubと連携すると、リポジトリごとにGitPodにWorkspaceが割り当てられます。

GitPod Workspaceセットアップ

Workspaceは、おもに2つのファイルを使ってセットアップします。

• .gitpod.Dockerfile
• .gitpod.yml

1 .gitpod.Dockerfile

FROM gitpod/workspace-mysql

ENV APACHE_DOCROOT_IN_REPO="public"

RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \
    && chmod +x wp-cli.phar \
    && sudo mv wp-cli.phar /usr/bin/wp

• Docker HubのWordPress公式イメージにはMySQLが含まれていないので、GitPodが配布しているイメージgitpod/workspace-mysqlを使用
• gitpod/workspace-mysqlは、PHPを含む各種言語・Apache・MySQLを含んだイメージ
• DocmentRootは/etc/apache2/apache2.confにAPACHE_DOCROOT_IN_REPO変数を使って定義（DocumentRoot "${GITPOD_REPO_ROOT}/${APACHE_DOCROOT_IN_REPO}"）
• 今回はAPACHE_DOCROOT_IN_REPOにpublicを設定
• WordPress CLIツールWP-CLIをインストール

2 .gitpod.yml

image:
  file: .gitpod.Dockerfile
ports:
  - port: 8001
    onOpen: open-preview
  - port: 3306
    onOpen: ignore
tasks:
  - init: >
      mkdir -p /workspace/{{リポジトリ名}}/public &&
      cd /workspace/{{リポジトリ名}}/public &&
      wp core download --locale=ja --path=/workspace/{{リポジトリ名}}/public &&
      wp core config --dbname=wp_sample --dbuser=root --dbpass='' --dbhost=localhost --dbprefix=wp_ &&
      wp db create &&
      wp core install --url=$(gp url 8001) --title=SiteTitle --admin_user=admin --admin_password=password --admin_email=my@email.com
    command: apachectl start
  - command: gp await-port 8001 && gp preview $(gp url 8001)

{{リポジトリ名}}は適宜読み替えてください。

tasksプロパティは以下を参照。
https://www.gitpod.io/docs/config-start-tasks/

.gitpod.ymlの簡単なメモを記載します。

• GitPodプレビュー用URLは、動的に決まるので gp rul 8001で取得
• ApacheがListenしているポート番号は/ect/apache2/apache2.confを確認（Listen *:8001）
• wp core installのurlオプションは$(gp url 8001)を指定
  • wp_optionsテーブルのsiteurl、homeにプレビュー用URLが設定
• ~~GitPodロードバランサとサーバー間で通信SSLを有効にするために、wp-config.phpに以下を追記
  if (strpos($_SERVER["HTTP_X_FORWARDED_PROTO"], "https") !== false) $_SERVER["HTTPS"] = "on";~~

2020年12月29日追記
.gitpod.ymlに記載していたecho 'if (strpos($_SERVER["HTTP_X_FORWARDED_PROTO"], "https") !== false) $_SERVER["HTTPS"] = "on";' >> wp-config.phpを削除

構築が完了した後に手動で、wp-config.phpのrequire_once(ABSPATH . 'wp-settings.php');より前に以下サイトを参考にしてコードを追記。
参考：【WordPress】SSL対応を行った後、管理画面で「このページにアクセスする権限がありません。」が表示された時の対応

$_SERVER['HTTPS'] = 'on'; 
$_ENV['HTTPS'] = 'on';