Zenn
🌐

Apache2 + mkcertでhttps化 [Ubuntu22.04 WordPress]

2022/12/09に公開
WordPress
Ubuntu
#
apache2
#
mkcert
tech

要旨

  • Ubuntu22.04にWordPressを導入し、mkcertでhttps化する
  • クライアントからWordPressのサーバにアクセスする際、証明書エラーが出ないようにする

ゴール

  • Ubuntu22.04に立てたWordPressのHTTPS化

環境・バージョン（2022/12/9　執筆時点）

サーバ
　　OS          Ubuntu 22.04
　　IP address  192.168.1.15/24
　　Apache2     Apache/2.4.52 (Ubuntu) 
　　PHP         PHP 8.1.2-1ubuntu2.9
　　MariaDB     10.6.11-MariaDB-0ubuntu0.22.04.1
　　WordPress   6.1.1
 mkcert      v1.4.4

クライアント
　　OS         macOS Ventura 13.0.1（22A400）
 Chrome     108.0.5359.98（Official Build） （x86_64）

構成イメージ

手順

0. 準備

  1. サーバを用意。Ubuntu22.04のインストール。
  2. サーバの固定IPを設定。今回は192.168.1.15/24
  3. クライアントの/etc/hostsなどに記載するなどして、
    「test.local」から192.168.1.15が名前解決できるようにする。
    /etc/hosts
    192.168.1.15 test.local

1. WordPressと関連するソフトのインストール [サーバ側]

  1. Ubuntu 20.04 LTS に WordPress 5.8 をインストールと、Ubuntu 20.04にLAMPスタックでWordPressをインストールする方法を参考に、以下をインストール。
    • Apache2
    • PHP
    • MariaDB
    • WordPress
  2. http://192.168.1.15 でApache2のトップページにアクセスできるところまで確認。

2. HTTPS化 [サーバ側]

  1. ローカル開発環境にSSLを設定できるmkcertがめちゃくちゃ便利だったを参考に、mkcertをインストール。
apt install -y mkcert
  1. certファイルとkeyファイルを作成し、適切なディレクトリに移動
# ローカルに認証局を作成
mkcert -install

mkcert test.local
# -> 「test.local-key.pem」と「test.local.pem」が作成される

mv test.local-key.pem /etc/ssl/private/testlocal-key.pem
mv test.local.pem /etc/ssl/certs/testlocal.pem
  1. Apache2でSSLモジュール有効化
a2enmod ssl
  1. Apache2 config修正
/etc/apache2/sites-available/default-ssl.conf
<IfModule mod_ssl.c>
        <VirtualHost _default_:443>
                ServerAdmin webmaster@localhost

                DocumentRoot /var/www/html

                ErrorLog ${APACHE_LOG_DIR}/error.log
                CustomLog ${APACHE_LOG_DIR}/access.log combined

                SSLEngine on

		# ↓ もとの2行をコメントアウト
                # SSLCertificateFile    /etc/ssl/certs/ssl-cert-snakeoil.pem
                # SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key
		
		# ↓ 先程mkcertで作成し移動したファイルを指定する
                SSLCertificateFile /etc/ssl/certs/testlocal.pem
                SSLCertificateKeyFile /etc/ssl/private/testlocal-key.pem

                <FilesMatch "\.(cgi|shtml|phtml|php)$">
                                SSLOptions +StdEnvVars
                </FilesMatch>
                <Directory /usr/lib/cgi-bin>
                                SSLOptions +StdEnvVars
                </Directory>

        </VirtualHost>
</IfModule>
  1. default-ssl.confを有効にするため/etc/apache2/sites-enabledでシンボリックリンクを作成し
    サービス再起動
cd /etc/apache2/sites-enabled
ln -s ../sites-available/default-ssl.conf default-ssl.conf

# Apache2サービス再起動
systemctl restart apache2

3. サーバで作成したルート証明書をクライアントにインストール [サーバ側・クライアント側]

  1. [サーバ] mkcert -install 実行時に作成されたルート証明書をクライアントに転送。
    ファイルの場所は以下で確認。
mkcert -CAROOT
# /root/.local/share/mkcert

ll /root/.local/share/mkcert
total 8.0K
-r-------- 1 root root 2.5K Dec  9 17:03 rootCA-key.pem
-rw-r--r-- 1 root root 1.6K Dec  9 17:03 rootCA.pem     # <-このファイルを転送
  1. [クライアント] 転送されたルート証明書をインストールし、信頼する。
    • インストール： 転送されたpemファイルをダブルクリック
      　　
    • 信頼：キーチェーンアクセスからインストールした証明書をダブルクリック。
      「信頼」から「この証明書を信頼するとき:」を「常に信頼」にする

4. 動作確認 [クライアント側]

  1. https://test.local　にアクセス。
    証明書エラーが出ずにアクセスできるようになった。

  2. WordPressの画面（ https://test.local/wordpress/wp-admin/setup-config.php ） にアクセス。
    こちらも同様に証明書エラーが出ずにアクセスできるようになった。

参考ページ

https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-on-ubuntu-20-04-with-a-lamp-stack-ja
https://qiita.com/cherubim1111/items/b259493a39e36f5d524b
https://parashuto.com/rriver/tools/mkcert-for-local-ssl-dev-env
https://raspi-katsuyou.com/index.php/2020/06/19/13/50/07/133/
https://re-engines.com/2019/02/28/mkcertで簡単にオレオレ証明書を発行する/
https://milestone-of-se.nesuke.com/troubleshoot/ssl-cert-error/
https://zenn.dev/takumiabe21/articles/645a38c0c18389
https://support.apple.com/ja-jp/guide/keychain-access/kyca11871/mac

Discussion