WordPressの一般設定にあるURLをhttpsに変える

証明書の自動更新まで設定し終わった段階で、https化の作業は終わったと思っていたのですが、
まだ残っているのがありました。

WordPressにログインし、一般設定を見ると、
WordPress アドレス (URL) と サイトアドレス (URL) という設定を見ると、
どちらも http://analytics-note.xyz と、httpのURLが設定されてしまっていて
しかも網がかかっていて修正ができません。

記事中でブログ内でリンクを貼る時など、いろんな場面で利用する設定のようで、
このままでは不都合ありそうです。

WordPressの日本語ドキュメントの一般設定から引用します。

WordPress のアドレス(URL)
WordPressのコア・アプリケーションのファイル(たとえばwp-config.php, wp-admin, wp-content, wp-includesなど)を含むディレクトリの正式なURLを入力します。たとえば、あなたが「blog」という名前のディレクトリにWordPressをインストールした場合は、WordPressのアドレスはhttp://example.net/blogとなります(example.netは利用者のドメイン名です)。もしも、WebサイトのルートにWordPressをインストールした場合は、このアドレスはhttp://example.netとなります。URLの最後にスラッシュ(/)を付けた場合は自動的に省かれます。wp-config.php ファイル内で WP_SITEURL 定数を定義すると、定義した値がこのフィールドに入り、管理画面から編集することはできません。

サイトアドレス(URL)
WordPressサイトを呼び出す時に、ブラウザに閲覧者が入力するURLを入力します。このURLは、WordPressのindex.phpがインストールされているディレクトリです。 WordPress を専用ディレクトリに配置する場合以外は、ブログのアドレス(URL)と前述のWordPressのアドレス(URL)が同一です。URLの最後にスラッシュ(/)を付けた場合は自動的に省かれます。wp-config.php ファイル内で WP_HOME 定数を定義すると、定義した値がこのフィールドに入り、管理画面から編集することはできません。

要するに、 wp-config.php で設定されていると管理画面から変更ができないそうなので、
wp-config.php から編集します。

参考:サイト URL の変更

編集するファイルは
/opt/bitnami/apps/wordpress/htdocs/wp-config.php
です。
中に確かに次のような記載がありました。


define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');

これを下記のようにhttpsに書き換えます。


define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] . '/');

保存したら自動的に反映されたようです。

Let’s Encrypt の証明書を自動更新する

このブログのhttps化のために導入したLet’s Encrypt の証明書ですが、90日ごとに期限が切れてしまうそうです。
更新手順が用意されていますが、毎回行うのは面倒なのでそれを自動化します。

手順は、証明書を導入した時と同じbitnamiのドキュメントの下の方にあります。
Generate And Install A Let’s Encrypt SSL Certificate For A Bitnami Application
これの Step 5: Renew The Let’s Encrypt Certificate がそれです。

rootユーザーにsuし、
/etc/lego/renew-certificate.sh
というファイルを作ります。中身はこれです。
ドキュメント中の”EMAIL-ADDRESS” と “DOMAIN” は自分のものに置き換える必要があります。


#!/bin/bash

sudo /opt/bitnami/ctlscript.sh stop apache
sudo /usr/local/bin/lego --email=メールアドレス --domains=analytics-note.xyz --path="/etc/lego" renew
sudo /opt/bitnami/ctlscript.sh start apache

スクリプトファイルを作成したら実行できるように権限を修正します。(ユーザーはrootで実行)


chmod +x /etc/lego/renew-certificate.sh

そして、このスクリプトを cronに設定します。
下記コマンドを実行して編集画面を起動。


sudo crontab -e

最終行に先ほど作ったスクリプトを登録して保存したら完了です。


0 0 1 * * /etc/lego/renew-certificate.sh 2> /dev/null

Googleアナリティクス導入

ドメインも取得し、https化も済んだのでこのブログのURLがある程度固まります。
この段階で、今後アクセスを分析するためにGoogleアナリティクスを導入しておきます。
実はGoogleアナリティクスの学習/実験環境を手に入れるのがこのブログの目的の一つでもあります。

アカウント作成手順は非常に簡単で、
Googleアナリティクスで検索して出てきたページにアクセスし、Gmail等で利用しているアカウントでログインします。
あとはアカウント名、サイト名、トップページURLを入力して終わり。
つまずくとしたら、アカウント名に何を入れたらいいかくらいだと思いますが、これは本当になんでもよく、あとで変えられるようです。

ブログ側に設定するため、トラッキング IDという UAと数値で構成されたIDを取得し控えておきます。
これを ALL in One SEO というbitnamiのWordpressに初めから入っているプラグインに設定して完了。

GAのリアルタイム画面で自分のアクセスが検知できればテスト完了です。

httpのアクセスをhttpsにリダイレクトする

せっかくhttps通信を使うように証明書を設定しましたが、そのままではhttpでもアクセスできてしまいます。
対応として、httpでアクセスがあったらhttpsのURLへリダイレクトするようにします。

これも人によって方法の流儀があるようですが、bitnami のドキュメントにそって設定します。

Force HTTPS Redirection With Apache

方法は簡単で、設定ファイルを書き換えてapachを再起動するだけです。

書き換える設定ファイルはこれ。
/opt/bitnami/apache2/conf/bitnami/bitnami.conf
DocumentRoot の設定の下に3行追加します。


<VirtualHost _default_:80>
  DocumentRoot "/opt/bitnami/apache2/htdocs"
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteRule ^/(.*) https://analytics-note.xyz/$1 [R,L]
  <Directory "/opt/bitnami/apache2/htdocs">

設定したらapachを再起動。ちなみにコマンドはこちらです。


sudo /opt/bitnami/ctlscript.sh restart apache

あとは、httpのURLでアクセスして、httpsページが表示されたらOKです。
Chromの開発者ツールで通信をみるとリダイレクトされていることも確認できます。

LightsailのWordPressサーバーにLet’s Encryptの証明書を設定してhttps通信できるようにする

httpのままだと通信が安全でないなどの警告が出るため、https化を試みます。
本当は利用サービスをAWSに寄せていくため、AWS Certificate Managerを使いたくて、
色々調べていたのですが、結局ここで発行した証明書はサーバーに配置できないことがわかりました。
ロードバランサーに設定するそうですがロードバランサー自体がいいお値段するので断念し、
Let’s Encryptというのを利用することにしました。

各所で色々な人が手順を書いていくれていて、微妙に異なるので正しい手順がわからず混乱していたのですが、
bitnami の公式ドキュメントに、Let’s Encryptを使う手順がありますしたのでここの手順を採用します。

Generate And Install A Let’s Encrypt SSL Certificate For A Bitnami Application

ただし、ドキュメント場では下記のスクリプトを使えば簡単なように書いてありますが、Lightsailのサーバーにはこのファイルが無かったので、代替手順(Alternative Approach)の方を採用します。
/opt/bitnami/letsencrypt/scripts/generate-certificate.sh

注意点としては、X.Y.Zを最新のバージョン番号に読み替えるとか、DOMAINやEMAIL-ADDRESSを正しいものに読み替えて実行することと、
自分の場合は wwwのサブドメインを使っていないので、コマンドに含めないようにすることでしょうか。

Lego Client のインストール

サーバーにssh接続して下記コマンドを入れます。


cd /tmp
curl -s https://api.github.com/repos/xenolf/lego/releases/latest | grep browser_download_url | grep linux_amd64 | cut -d '"' -f 4 | wget -i -
# ドキュメント場の記載
# tar xf lego_vX.Y.Z_linux_amd64.tar.gz
# 実際は、curlで取得されたファイルに合わせて、バージョン番号を入れる
tar xf lego_v1.2.1_linux_amd64.tar.gz
sudo mv lego /usr/local/bin/lego

自分のドメインの証明書を作成する

Bitnami servicesを全て止める


sudo /opt/bitnami/ctlscript.sh stop

legoを実行。


# ドキュメントの記載
# sudo lego --email="EMAIL-ADDRESS" --domains="DOMAIN" --domains="www.DOMAIN" --path="/etc/lego" run
# 実際に打ったコマンド(ただしメールアドレスは伏せます)
sudo lego --email=メールアドレス --domains=analytics-note.xyz --path="/etc/lego" run

証明書を利用するようにサーバーを設定する

Apache用の手順を使用します。


sudo mv /opt/bitnami/apache2/conf/server.crt /opt/bitnami/apache2/conf/server.crt.old
sudo mv /opt/bitnami/apache2/conf/server.key /opt/bitnami/apache2/conf/server.key.old
sudo mv /opt/bitnami/apache2/conf/server.csr /opt/bitnami/apache2/conf/server.csr.old
# sudo ln -s /etc/lego/certificates/DOMAIN.key /opt/bitnami/apache2/conf/server.key
sudo ln -s /etc/lego/certificates/analytics-note.xyz.key /opt/bitnami/apache2/conf/server.key
# sudo ln -s /etc/lego/certificates/DOMAIN.crt /opt/bitnami/apache2/conf/server.crt
sudo ln -s /etc/lego/certificates/analytics-note.xyz.crt /opt/bitnami/apache2/conf/server.crt
sudo chown root:root /opt/bitnami/apache2/conf/server*
sudo chmod 600 /opt/bitnami/apache2/conf/server*

お恥ずかしながら、DOMAIN.key や DOMAIN.crtのDOMAIN を見落とし、置き換えないまま実行してしばらくここで詰まりました。

Bitnami servicesを再開


sudo /opt/bitnami/ctlscript.sh start

アクセステスト

https://analytics-note.xyz/
にアクセスします。
正常につながったのでOKです。

一旦設定は完了ですが、このままでは、
httpでも普通にアクセスできてしまうのと、
数ヶ月おきに証明書の有効期限が切れる問題があるのでそれぞれ対応します。

Lightsailにドメインを設定する

Route53で取得したドメインをこのサーバーに紐付けます。

ちなみにドメインの登録については最大3日かかると書いてありましたが、
メールアドレスの認証が済んだら数分後には完了し、
Route53のResistered domains に表示されていました。

ドメインは登録しただけだと使えないので作業を進めます。
公式ドキュメントはこちら
Amazon Lightsail の DNS ゾーンを作成する

DNSゾーン作成手順

  1. Lightsailのホーム画面で、[ネットワーク]を選択。(ドキュメントにはDNS ゾーンと書いてあるが)
  2. DNSゾーンの作成をクリック
  3. ドメイン名を入力
  4. [DNSゾーンの作成]をクリック

この段階では、Wordpressのサーバーと、DNSゾーンがそれぞれ独立して存在するだけで、
このドメインでブログにアクセスすることはできないようです。
続けてレコードの追加という作業が必要になります。

DNS ゾーンにレコードを追加する手順

  1. +レコードの追加をクリック
  2. Aレコードを作成。解決先にblogの固定IPアドレスを入れる(プルダウンから選べる)

Aレコードを作成するとき、サブドメイン無しのURLを使いたい場合は、
サブドメインに@を入れるといいようです。(ポップアップの吹き出しで指定されました)

他のサイトをみてみると、 www.ドメイン名 を サブドメインを含まないドメイン名のみのアドレスに
紐づける設定(CNAMEレコード)を設定していることが多いようですが、
必要性がなさそうなのでそれは設定しませんでした。

この後、画面に表示されている通り
ドメインプロバイダにネームサーバーを設定してあげる必要があります。
Lightsail側に4個表示されているので、これをコピーしてRoute53に持っていきます。

Route53のドメインにネームサーバーを設定

  1. Route53の管理画面にアクセスし、ドメインを選択
  2. Add or edit name serversをクリック
  3. 設定済みのものを消して書き換える
  4. [update]をクリック

Your request for update nameserver was successfully submitted. You will receive an email when it is done.
と表示されたので、メールを待ちます。

少し長めに待ち時間がかかって、ドメイン名でアクセスできるようになりました。

wordpressの管理画面にも自サイトのURLを指定するところがあるので設定変更が必要、
と思っていたのですが勝手に反映されていました。
Lightsailの機能でしょうかね。

Amazon Route 53 を利用して新規ドメインを取得する

このブログで使用するドメインを取得します。
現状、ブログ構築ブログみたいになっていますが、
早々にデータ分析に関する話をメインにしたいのでそれっぽいドメインを取ります。

色々な管理をAWSに集約したいので、お名前.com等ではなく、
Amazon Route 53で取得します。
公式ドキュメントはこちら。
新しいドメインの登録

手順

  1. AWS マネジメントコンソール にサインイン
  2. Route 53 コンソールを開く
  3. [Domain Registration] の [Get Started Now] を選択
  4. [Register Domain] をクリック
  5. Choose a domain name で登録したいドメインを入力
  6. checkをおして、登録できること(StatusがAvailable)を確認
  7. [Add to Cart]をクリック
  8. 登録する年数を選択
  9. [Continue] をクリック
  10. Registrant Contactに自分の情報を登録
  11. [Continue]をクリック
  12. I have read and agree to the AWS Domain Name Registration Agreement にチェック
  13. [Complete Purchase]をクリック

ドメイン登録が完了するまでに最大3日かかるそうです。
(Domain registration might take up to three days to complete.)

ドメインの一覧画面に行くと、Statusが
Domain registration in progress になっていました。

数分後に入力したメールアドレスの確認メールが届きましたので、
中のリンクをクリックして待ちます。

Macbook に Homebrewをインストールする

タイトルにはMacbook と書きましたが、デスクトップでも手順は同じはず。
ちなみに、普段の分析ではMac book Proを使用しています。

手順は簡単で、公式サイトにあるコマンドをターミナルで実行するだけ。
ここにもコマンドを転記しておきますが、公式サイトからコピーしたほうが確実です。


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Macではmecabもpyenvもhomebrewで導入すると簡単です。

トップページ右下に出てくるbitnamiのバナーを消す

ブログの右下がペロッとめくれた見た目になり、bitnamiのバナーが見えているのでこれを消します。

公式マニュアルの方法はこちら。
Remove The Bitnami Banner

サーバーにSSHでログインして、以下のコマンドを実行して設定変更とサーバー再起動を行います。
公式キュメントで、 APPNAME と書かれてる部分は wordpressですね。


sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
sudo /opt/bitnami/ctlscript.sh restart apache

syntax highlighter の Prismjsを導入

今後プログラムを含む記事が増える予定なのでsyntax highlighter を導入しました。
色々方法があるようですが、とりあえず検索した中で比較的評判の良かったprismjsを採用します。

公式サイト

Prismjsの導入

WordPress用に Prism For WP というプラグインがあるようなのでこれをインストールして有効化。
設定画面で、利用予定の言語(Pythonなど)にチェックを入れました。
MarkupというのがHTMLらしいです。

行番号表示機能も使いそうなので、Select Pluginsの Line Numbers にもチェック。
また、Normalize Whitespace を有効化しておくと先頭行の不要な空白を消してくれるそうです。

Prismjsの使い方

ソースコードをpreタグとcodeタグで囲み、preタグのclassにline-numbers、codeタグのクラスにlanguage-x(xは言語名)を設定します。

HTMLで使用した例


<pre class="line-numbers"><code class="language-markup">
    ここにHTMLのソースコードを書く
</code></pre>

Pythonで使う場合は language-python。使ってみた例。

記事に書いたコード


<pre class="line-numbers"><code class="language-python">
a, b = 0, 1
for _ in range(10):
    a, b = b, a + b
    print(b)
</code></pre>

表示結果


a, b = 0, 1
print(b)
for _ in range(10):
    a, b = b, a + b
    print(b)

ちなみにサンプルのプログラムはフィボナッチ数列を出力します。