WordPress開発環境

Tweet

Pocket

公式テーマディレクリにkanagataというテーマを登録している。
ただ、忙しさを言い訳にして、数年更新ができていない。

WordPressは毎年進化しているので、今後はできるだけ更新したいと思う。
そのために、更新コストをすこしでも減らしたいと考えている。

オンライン開発環境Gitpodは場所を選ばずに開発できる便利なサービスだと感じている。
2020年年末からDockerを触り始めたこともあって、Gitpodを中心にして、ローカル＆プロダクション環境も含めた効率的な開発環境を模索している。

概要

• プロダクション環境：AWS EC2（Docker Compose）
• 開発環境：Gitpod（Docker）

Gitpod

gitpodで手軽にWordPress環境を構築

プロダクション環境

AWS EC2 Ubuntu 18.04にDocker Composeを使って環境を構築。

GitHub Actionsを使ってAWS EC2 18.04にデプロイ

まずはコードをEC2にデプロイするためにGitHub Actionsを設定。

• https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions#about-yaml-syntax-for-workflows

1. EC2でSSH鍵をパスフレーズなしで作成
   $ ssh-keygen -m PEM -t rsa -C "info@example.com"
2. GitHubからクローンするために公開鍵をGitHubアカウントのSSHに登録
3. リポジトリをクローン
   $ git clone git@github.com:xxxxx/example.git
4. GitHubからAWS EC2にアクセスするためにGitHubのリポジトリsettingsのsecretに変数としてSSH接続情報を登録（変数名は任意）
   後述するGitHub Actionの設定ファイル（例：.github/workflows/deploy.yml）で使用
   • EC2_SECRET_KEY:秘密鍵を登録
   • EC2_HOST：EC2のIP
   • EC2_USER：ubuntu（AWSのEC2インスタンスがUbuntuの場合）
5. 公開鍵をログインユーザー（ubuntu）の~/.ssh/authorized_keys に追加
   $ cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
6. プロジェクトルートの直下にGitHub Action設定ファイル.github/workflows/deploy.ymltを作成

SSHの鍵作成はCircleCIの以下のドキュメントを参照
ref. https://circleci.com/docs/ja/2.0/add-ssh-key/

AWS EC2 Ubuntu 18.0.4にDocker＆Docker Composeをインストール

Docker＆Docker Composeをインストール。

ref. Install Docker Engine on Ubuntu

Install Docker Engine on Ubuntu

1. $ sudo apt update -y && sudo apt upgrade -y
2. $ sudo apt-get -y install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
3. $ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
4. $ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
5. $ sudo apt-get update
6. $ sudo apt-get -y install docker-ce docker-ce-cli containerd.io
7. $ sudo gpasswd -a ubuntu docker
8. $ docker --version

Install Docker Compose

1. $ sudo apt update -y && sudo apt upgrade -y
2. $ sudo apt install -y python3 python3-pip
3. $ sudo pip3 install docker-compose
4. $ docker-compose --version

docker-compose.yml

docker-compose.ymlは「さわって学ぶクラウドインフラ　docker基礎からのコンテナ構築」（大澤 文孝 (著), 浅居 尚 (著) ）を参考に作成。
（WordPressイメージとmysql:5.7を使用

Let’s EncryptでSSL化

1. certbotでDocker向証明書作成
2. バーチャルホストにSSL設定

certbotでDocker向け証明書作成

ref. Running with Docker

80/443ポートを使用していコンテナがあれば停止（$ docker-compose down）
Dockerホストで以下コード実行。

sudo docker run -it --rm --name certbot \
            -v "/etc/letsencrypt:/etc/letsencrypt" \
            -v "/var/lib/letsencrypt:/var/lib/letsencrypt" \
            -p 80:80 -p 443:443
            certbot/certbot certonly

1. standaloneとwebroot選択画面でstandaloneを選択
   • certbotの内蔵Webサーバーを使用するので、80/443ポートを使用している既存Webサーバーは停止（Dockerの場合Webサーバー用の既存コンテナを停止）
2. /etc/letsencryptに証明書が作成。
3. docker-composeのwordpress用サービスのvolumesを使ってコンテナにバインド（バインドマウント）

“`docker-composer.yml
services:
# …..
wordpress-app:
# …..
image: wordpress
volumes:
– /etc/letsencrypt:/etc/letsencrypt
# …..

##### バーチャルホストにSSL設定

- example.comドメインを例に記載
- 公式WordpressイメージのOSは`Debian`

上記を前提に記載。

1. `/etc/apache2/sites-available`にバーチャルホスト用の`conf`ファイル作成
1. `/etc/apache2/site-available/default-ssl.con`をコピー（`example.com.conf`を作成
1. confファイル名は、`example.com.conf`にする（`ドメイン名.conf`）
  - 上記ファイル名でないと`$ a2ensite example.com`で`Site example.com does not exist!`が発生
1. example.com.confにSSL用バーチャルホスト設定
1. `apachectl configtest`
1. `service apache2 reload`
  - `apachectl graceful`は、`AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.20.0.3. Set the 'ServerName' directive globally to suppress this message`が発生


```example.com.conf
<IfModule mod_ssl.c>
        <VirtualHost *:443>
                ServerAdmin webmaster@localhost
                ServerName example.com
                DocumentRoot /var/www/html

                SSLEngine on
                SSLCertificateFile      /etc/letsencrypt/live/exxample.com/fullchain.pem
                SSLCertificateKeyFile  /etc/letsencrypt/live/example.com/privkey.pem
        </VirtualHost>
</IfModule>