GitPodでWordPress環境構築

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

• WordPress公式イメージはDocker Hubで配布されていますが、MySQLは含まれていないので、今回はGitPodが配布しているイメージgitpod/workspace-mysqlを使用
• gitpod/workspace-mysqlは、各種言語（PHP含む）+ ApacheにMySQLを含んだイメージ
• DocmentRootは/etc/apache2/apache2.confに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/wordpress-gitpod/public &&
      cd /workspace/wordpress-gitpod/public &&
      wp core download --locale=ja --path=/workspace/wordpress-gitpod/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 &&
      echo 'if (strpos($_SERVER["HTTP_X_FORWARDED_PROTO"], "https") !== false) $_SERVER["HTTPS"] = "on";' >> wp-config.php
    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";