個人用の備忘録で、雑な記事です。
ちょっと特殊な環境だからあんまり参考にしない方が無難。

wordpressをよく実装するんだけど、http://localhost:8999をspでwifi経由で確認しようとしたら、リンク切れになっちゃうんだよね。だから、https://seisei.local:8999/みたいな接続方法になってる。

詳しくはこちら

localhostのwordpress（Mac）で、sp（iPhone）実機確認する。

wordpressの場合は、設定>一般>WordPress アドレス (URL)って箇所がlocalhostのurlとかになってても駄目

# NG （WordPress アドレス (URL)）
http://localhost:8999
https://localhost:8999
http://seisei.local:8999

# OK
https://seisei.local:8999


前提1：既にMAMPで複数のサイトを使ってる前提の記事です。そして、それをSSL化したい人向けの記事。

前提2：http://localhost:8999 を普段は使わず、コンピュータ名+local+portの http://seisei.local:8999/ で開発してる状態。

まずは『http://seisei.local:8999/』を『https://seisei.local:8999/』にする

そのための手順は以下。

Homebrewでmkcertのインストール

mkcertはローカル開発環境でのSSL証明書を簡単に生成するための便利なツール

$ brew install mkcert

#って打ったら

Created a new local CA 💥
Sudo password:
The local CA is now installed in the system trust store! ⚡️
Warning: "certutil" is not available, so the CA can't be automatically installed in Firefox! ⚠️
Install "certutil" with "brew install nss" and re-run "mkcert -install" 

#ってなった。
#Firefoxでは独自の証明書ストアを使うため、システムの信頼ストアとは別に設定が必要とのこと

Homebrewでcertutilをインストール（Firefoxを使う場合）

$ brew install nss

これでFirefoxの証明書ストアにもローカルCAが登録する準備が整った

$ mkcert -install

もう一度、上記コマンドを叩いて、mkcert準備完了。

SSL証明書の生成

$ mkcert -key-file /Users/seisei/ssl/seisei.local-key.pem -cert-file /Users/seisei/ssl/seisei.local.pem "seisei.local" "localhost" "127.0.0.1" "::1"

# seisei.local:8999専用のSSL証明書を作成
# 以下表示されたら成功

Created a new certificate valid for the following names 📜
 - "seisei.local"
 - "localhost"
 - "127.0.0.1"
 - "::1"

The certificate is at "/Users/seisei/ssl/seisei.local.pem" and the key at "/Users/seisei/ssl/seisei.local-key.pem" ✅

It will expire on 13 April 2027 🗓

/Applications/MAMP/conf/apache/httpd.conf

Listen 8999
# ポート追加

/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

<VirtualHost *:8999>
    DocumentRoot "/Applications/MAMP/htdocs/999_JAVREV"
    ServerName seisei.local

    SSLEngine on
    SSLCertificateFile "/Users/seisei/ssl/seisei.local.pem"
    SSLCertificateKeyFile "/Users/seisei/ssl/seisei.local-key.pem"

    <Directory "/Applications/MAMP/htdocs/999_JAVREV">
        Require all granted
    </Directory>
</VirtualHost>

以下のコマンドでApacheを再起動

$ sudo /Applications/MAMP/Library/bin/apachectl restart

この時点で、
http://seisei.local:8999/にアクセスすると『Bad Request』と表示されて見られない。

代わりに、
https://seisei.local:8999/にアクセスすると無事表示される！
ってのが、期待する動作。

スマホの設定

現時点でhttps://seisei.local:8999/にスマホでアクセスすると、安全でないサイトって言われる。

『安全でない方法で接続』すると、一応、サイトは見られる状態。

これをsslが効いた安全な接続にしたい。

原因と対策

原因：ローカルCA証明書がスマホにインストールされていない

対応方法：スマホへのCA証明書のインストール

手順: スマホにローカルCA証明書をインストール

  1. CA証明書ファイルの確認
    • mkcert -CAROOT の結果 /Users/seisei/Library/Application Support/mkcert に保存されています。
    • このディレクトリにある rootCA.pem ファイルを見つけてください。
  2. 証明書ファイルの転送
    • 方法1: メールに添付してスマホに送信。
    • 方法2: GoogleドライブやDropboxなどのクラウドストレージにアップロード。
    • 方法3: スマホをUSBケーブルで接続し、ファイルを直接コピー。
  3. スマホへのインストール
    • iPhone (iOS)
      1. ファイルを開き、「インストール」を選択します。
      2. 設定 > 一般 > プロファイル に移動し、証明書を信頼します。
      3. 設定 > 一般 > 情報 > 証明書信頼設定 に進み、「rootCA.pem」を信頼済みにします。
    • Android
      1. 設定 > セキュリティ > 認証情報のインストール に進みます。
      2. ダウンロードした rootCA.pem を選択します。
      3. 「VPNとアプリ」または「Wi-Fi」を選択してインストールします。
  4. ブラウザのキャッシュクリア
    • 設定からブラウザのキャッシュをクリアし、再度アクセスを試してください。
  5. 再確認
    • https://seisei.local:8999 にアクセスし、「安全」表示がされることを確認します。

次にhttp://localhost:8122/をSSL化してみる

2つ目のSSLを作成します

さっきはseisei.local:8999 用でした。新たに localhost に対応した証明書を生成する必要があります。でもこの方法だとwordpressは駄目だね。

mkcert -key-file /Users/seisei/ssl/localhost-key.pem -cert-file /Users/seisei/ssl/localhost.pem "localhost" "127.0.0.1"
# /Applications/MAMP/conf/apache/httpd.confに追記
Listen 8122

# /Applications/MAMP/conf/apache/extra/httpd-vhosts.confに追記
<VirtualHost *:8122>
  DocumentRoot "/Applications/MAMP/htdocs/122_mount"
  ServerName localhost
  SSLEngine on
    SSLCertificateFile "/Users/seisei/ssl/localhost.pem"
    SSLCertificateKeyFile "/Users/seisei/ssl/localhost-key.pem"

  <Directory "/Applications/MAMP/htdocs/122_mount">
    Require all granted
  </Directory>
</VirtualHost>

あとはMAMP再起動で動作するはず。

SP版は、さっきと同じ手順でOK。

新たに、sss.local:8200とかdev.local:8777とか追加したかったら、同じ方法でlocalhost.pemとlocalhost-key.pemを追加す。

最後にhttp://localhost:8096/をSSL化してみる

localhostはさっき上述した箇所で追加済み。localhost.pemとlocalhost-key.pemは使い回せるから、単純に以下をコピペしてMAMP再起動でOK。

<VirtualHost *:8096>
  DocumentRoot "/Applications/MAMP/htdocs/096_projectname"
  ServerName localhost
  SSLEngine on
    SSLCertificateFile "/Users/seisei/ssl/localhost.pem"
    SSLCertificateKeyFile "/Users/seisei/ssl/localhost-key.pem"

  <Directory "/Applications/MAMP/htdocs/096_projectname">
    Require all granted
  </Directory>
</VirtualHost>