2017年10月31日火曜日

コマンドツールで MAMP を SSL 対応しよう! - macOS High Sierra 編 -

筆者は、長らく MAMP を利用してきました。
しかし WordCamp Kyoto 2017 を契機に、 valet というツールも積極的に使うようになりました。この valet のいいところは、VCCW, Wocker などの優れたツール同様、WordPress をインストールしたり削除したりする機能が盛り込まれているので、テスト環境を作成しやすいことです。また標準で 下図のように自己証明書エラーにならない常時SSL(https://◯◯.dev) が利用できます!



【Virtual Host 対応】コマンドツールで MAMP を SSL 対応しよう! - macOS High Sierra 編 - も公開(2018年2月9日)

valet では .htaccess が使えない


valet は Apache ではなく Nginx が利用されているので、 .htaccess が利用できません。WordPress を動作させるだけなら、それでも十分なのですが、SiteGurad プラグインなど、.htaccess が利用できることを前提に作成されたプラグインのテストが出来ません。また WordPress にかぎらず、Apache でテストしたいこともあるでしょう。

そういった場合には他のツールを利用する必要があります。

MAMP に欠けているもの


  1. WordPress の自動インストールと削除
  2. 常時SSL対応
MAMP PRO だとSSLには対応していたと思いますが、それもコマンドでできるわけではありません。コマンド一発でできることが重要なのです!

なお SSL化した場合、しなかった場合、いずれにおいても WordPress の自動インストールと削除ができるツールを
に置いてます。
詳しくはそちらをチェックしてみて下さい。

また MAMP で SSL を利用するためには、 Apache Port を 80 にしなければなりません。macOS の MAMP はデフォルトで 8888 なので、これを変更することになります。


そうするとこれまで http://localhost:8888 にアクセスしていたのが、 http://localhost になり、WordPress をインストールしていたら引っ越ししないと動かなくなります。

まぁそういう場合には、 アプリケーション > MAMP を別名にしておいて、再度 MAMPをインストールし、 2つの MAMPフォルダをつかいわけるとよいかと思います。
アプリケーション > MAMP とフォルダが決め打ちになっているので、利用したいMAMPフォルダをこのフォルダにもっていきます。

MAMP を SSL 対応するコマンドツール 「mamp-enable-ssl.csh」


にある mamp-enable-ssl.csh になります。

なんでそこまでやるのかという問いには、
  • 開発環境を変えるよりは簡単だから
と答えておきましょう。まぁ半分は趣味です。
Chomre 58 以降で必須になった SAN (SubjectAltName) にも対応してみました。

どうやって利用するの?


MAMPがインストールされていることが条件になります。
また openssl がインストールされている必要があります。
HomeBrew か Macports であらかじめインストールしておいてください。

mamp-enable-ssl.csh を仮にデスクトップに置いたとします。

ターミナルアプリを起動して

$HOME/Desktop/mamp-enable-ssl.csh

※それで下記がでなければ、
csh -f $HOME/Desktop/mamp-enable-ssl.csh をタイプしてみてください。

をタイプすると、

Generating a 2048 bit RSA private key
......+++
.......+++
writing new private key to 'private/ssl.key'
Enter PEM pass phrase:

とパスフレーズを聞いてきます。
これは CA認証局用のパスワードです。
まぁ自分しか使わないのでなんでもいいです。入力したら Enter を押して下さい。

Verifying - Enter PEM pass phrase:

と今入力したパスワードの確認が必要になりますので、入力して Enter を押します。

-----
Country Name (2 letter code) [JP]:

次に、CA認証局用の情報入力画面が出てきます。
予め openssl.cnf にて入力済みなので、7回 Enter を押してそのままにしましょう。

State or Province Name (full name [LOCAL]:
Locality Name (eg, city) [LOCAL]:
Organization Name (eg, company) [MAMP]:
Organizational Unit Name [MAMP]:
Common Name (eg, YOUR name) [localhost]:
Email Address []:
Generating a 2048 bit RSA private key
.....................................+++
..............+++
writing new private key to 'server.key'
Enter PEM pass phrase:

すると、またパスフレーズ入力画面で止まります。
先程入力したパスフレーズを入力して Enter を押してください。

Verifying - Enter PEM pass phrase:

と今入力したパスワードの確認が必要になりますので、入力して Enter を押します。

-----
Country Name (2 letter code) [JP]:

次に、SSL証明書のための情報入力画面が出てきます。
予め openssl.cnf にて入力済みなので、9回 Enter を押してそのままにしましょう。

State or Province Name (full name [LOCAL]:
Locality Name (eg, city) [LOCAL]:
Organization Name (eg, company) [MAMP]:
Organizational Unit Name [MAMP]:
Common Name (eg, YOUR name) [localhost]:
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
Using configuration from openssl.cnf
Enter pass phrase for ./private/ssl.key:

すると、またパスフレーズ入力画面で止まります。
※これによって、作成した SSL証明書にCA証明局による署名をします。
先程入力したパスフレーズを入力して Enter を押してください。

Check that the request matches the signature
Signature ok
The Subject's Distinguished Name is as follows
countryName           :PRINTABLE:'JP'
stateOrProvinceName   :ASN.1 12:'LOCAL'
localityName          :ASN.1 12:'LOCAL'
organizationName      :ASN.1 12:'MAMP'
organizationalUnitName:ASN.1 12:'MAMP'
commonName            :ASN.1 12:'localhost'
Certificate is to be certified until Oct 29 08:13:51 2027 GMT (3650 days)
Sign the certificate? [y/n]:

すると、署名をしてよいかどうか聞いてくるので、y をタイプして Enter を押してください。

1 out of 1 certificate requests certified, commit? [y/n]

すると、署名を有効にしてよいかどうか聞いてくるので、y をタイプして Enter を押してください。

Write out database with 1 new entries
Data Base Updated
Enter pass phrase for server.key:

これで署名完了です。
最後にまたパスフレーズを聞いてきます。先程入力したパスフレーズを入力して Enter を押してください。

※これは、Apache に埋め込む証明書のパスワードを削除するためです。
そうしておかないと Apache を起動しようとしたときに、最初にいれたパスフレーズを毎回いれなければなりません。それを回避するためです。

writing RSA key

これで設定は完了です。

次に、CA証明書ファイル「MAMPフォルダ > conf > apache > ssl > ssl.crt 」 を macOS のキーチェーンに登録します。

CA証明書ファイル「MAMPフォルダ > conf > apache > ssl > ssl.crt 」を開いて下さい
下図のような画面になりますので、そのまま「追加」してください。
次に追加した CA証明書ファイルを「信頼」する設定をします。
アプリケーション > ユーティリティ > キーチェーンアクセス を開いて下さい。

そして「localhost」で検索すると先程インストールした「証明書」があると思います。
この時点では証明書は信頼されていません。


これをダブルクリックして設定を開いて下さい。
そして「信頼」にある SSL (Secure Sockets Layer) を「常に信頼」に変更してください。


すると、今 macOS にログインしているユーザーのみ、この証明書を信頼したことになります。



MAMPを起動してみよう!


問題なく起動したら、 https://localhost にアクセスしてみてください。


と出てきたら成功です。


と出てきたら、Cookieやキャッシュが残っている可能性があるので、それらを削除した上でブラウザを起動しなおしてみてください。あるいはそれが面倒なら、ゲストモードやプライベートモードを利用してみてください。

もし下記のようなエラーが出た場合には、「キーチェーンアクセス」にインストールした自己証明書が存在しないか、「常に信頼」設定をしていないことになります。再度チェックしてみてください。


もし途中でパスフレーズを忘れてしまった場合


再度

$HOME/Desktop/mamp-enable-ssl.csh

をしてやり直せばよいです。
初期化してやり直してくれます。

SSL 対応をやめたい場合にどうすれば?


いくつか方法があります。

  1. MAMPフォルダ > conf > apache > httpd.conf の下記をコメントする
     # Include /Applications/MAMP/conf/apache/httpd-ssl.conf
     と先頭に # を入れる。そして MAMPを再起動
  2. MAMP設定で nginx に変更する
     ※ nginx は SSL非対応
  3. MAMPを再インストールする
    1. MAMPフォルダの db と htdocs フォルダをバックアップし、 MAMPフォルダをまるごと削除
    2. MAMPをインストールし、バックアップした db と htdocs を戻す

Appendix. このツールはどういう動作をするの?


大まかな流れを説明します。
  1. openssl がインストールされていることを確認(Homebrew or MacPorts or /usr/local/bin/openssl が存在するかどうか)
  2. MAMP の conf/apache/httpd.conf を書き換え、conf/apache/httpd-ssl.conf を読み込むようにする
  3. conf/apache/extra/httpd-ssl.conf --> conf/apache/httpd-ssl.conf にコピーし、必要な置換を行う
    1. 証明書関連
    2. ログ関連
  4. CA 認証局 & SSL 証明書を発行(sha256, 2048bit)
    1. conf/apache/ssl フォルダを作成(存在したら削除し、作成)、サブフォルダ等作成
    2. conf/apache/ssl/openssl.cnf を生成
      ※中身は、本スクリプト内に埋め込み
      ※ここの localhost を別の名前にしたら、独自ドメインなども利用可能です。もちろん別途 /etc/hosts に 127.0.0.1 に対して 独自ドメインを有効にする設定が必要です。
    3. 各種証明書の発行

2017年10月31日 @kimipooh

2017年10月15日日曜日

第69 回 WordBench 大阪「WordPress ログインに Google 認証を使ってみよう」で登壇して #wbosaka #wordpress #google


今回は登壇者として参加しました。
セッションとハンズオン合わせて 3時間ほど時間をもらっていましたが、みんな優秀で 1時間強でセッションとハンズオンが終わってしました @@!
ハンズオン自体はおかげさまで好評だったようで、それぞれの実環境やクライアント環境で導入するというと言ってくださった方々がいたのでやったよかったかなと思います。

雨が降る中、会場となるファーストサーバー大阪本社へ、参加登録していただいた19名(内メンターが2名)について、全員参加していただきました。ありがとうございます!




登壇者って凄いのって思われるかもしれませんが、WordBench 勉強会に関してはそうでもありません。発表することでより深く WordPress について勉強することができるので、◯◯についてもっと詳しくなりたいな!と思ったら、発表者になってみるのもよいですよ!昔、「1週間後にクライアントに納品する WordPress はあるけれど、手持ちには 静的HTMLで作ったデータしかない、どうやって WordPress にしたらいいですか」を参加者に聞くために登壇者になった強者もいました。実際その場で逆ハンズオン(参加者が登壇者に教えていく)をしたわけですが、そういうのもありじゃないかなーと思います。

今回の反省点はこれだけ時間的余裕があるなら、「WordPress のローカル環境を手軽に作成してみよう!」なんてのを合わせてやってもよかったなぁと思いました。人によっては vagrant 環境を以前入れていたが、久しぶりに動作させようとすると動かなかったりした方もおられました。ので、そういうのを合わせてやるといい感じかなと。また機会があれば、WordCamp 等でやってみたいですね。

特に今回のために、 MAMP にコマンド一発で WordPress をインストールしたり、削除したりするツール(GitHUBで公開)を作成したので、MAMPとツールを使ったハンズオンもよいかなと思いました。ただMacしか試してないので、今回のように参加者全員が Mac ユーザーでないかぎり、Windows のことを考えないといけないので、そこはいろいろ試さないといけませんよね。

スライド




セッションとハンズオンの内容もすべて網羅しています。
これを見れば問題なく導入可能かと思います。
ただ2,3戸惑った方がおられたので、そのケースについて下記の紹介しておきます。

スライド19〜21において、Google Developer Console (Google Cloud Console内)のAPI設定におけるいろいろなケースについて紹介しています。
そこで漏れていたのが、ポート指定されたURLです。

http://localhost:8888/demo/  の場合にはどういう指定がしたらよいか


認証済みのJavaScript生成元:http://localhost
認証済みのリダイレクト URI:http://localhost:8888/wp-login.php


となります。
認証済みのJavaScript生成元については、 http://localhost:8888 をいれて保存すると自動的に、http://localhost に修正されます。

Appendix. WP-CLI コマンドで WordPress の自動メンテナンス


時間が余ったので何名かとこの話題について話しました。
ssh ログインが出来るサーバー なら出来る可能性があります。
実際には、WP-CLIコマンドをインストールできて(パスのある場所にダウンロードした WP-CLIを置くだけでいい)、cronが使えたら完璧です。当方は AMIMOTO のマネージドホスティングを使ったりします。ssh でログインできれば大抵のところはインストールできるんじゃないでしょうか。
それができれば上記のように、コマンド一発で、WordPressのバックアップ > プラグイン更新 > 本体更新を自動化できるので、多数の WordPress のメンテナンスを抱えている方々にとっては管理がとても楽になります。

wp @all  core version

なんてのを手持ちの Mac なんかでターミナルから叩くだけで、設定した全サイトの WordPress のバージョン情報が出てきます。これって深刻なセキュリティ脆弱性が報告された際、メンテナンスが必要な WordPress にログインしなくても、それぞれの現在のバージョンが一括で表示できるので超便利ですよ!

これもハンズオンしたら面白いかもしれませんね!

昼食&懇親会


昼食は会場であるファーストサーバー大阪本社から近い所にあるガストで肉を食べました。

ちょっと肉がかたい感じがしましたが、まぁやすいのでそれもまたよし。

懇親会は、GOTENさんが音頭を取って開始!懇親会費は1000円なり〜


結構はやくおわったせいで、ピザがなかなか届かずに、お菓子と飲み物で楽しく歓談できました!


2017年10月15日 @kimipooh

Google+ Badge