Mac + Vagrant でローカルSSL証明書を作成 | Lang-Lang-Lang

ローカル開発環境だとhttpsで表示を確認したいときに警告が出て不都合があるので、mkcertsをMacにインストールして、証明書を作成します。

その証明書を開発環境である Vagrantのnginxで読み込ませることで、ローカル環境でもhttps接続ができるようになります。

Mac で homebrewをインストール

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

xcode-tool のインストールをするか聞かれるので、Enterを押す。

インストーラーが立ち上がるので、そのままインストール。

homebrew で mkcertsをインストール

brew install mkcert

## mkcertsの立ち上げ
mkcert -install

mkcertで公開鍵と秘密鍵をそれぞれ作成

今回はVagrantのIPアドレスと適当なホスト名を指定

mkcert  -cert-file dev.pem -key-file dev.key 192.168.10.1 dev dev.com

Mac の hostsファイルを編集

Mac のブラウザでアクセスしたときにVagrantのサーバーにアクセスできるようにhostsで指定

sudo vim /etc/hosts

192.168.10.1    dev dev.com

Vagrant のnginxにSSL設定を追加

先程作成した公開鍵と秘密鍵をVagrant 内の適当なところにコピーしておく

ここでは適当に /etc/nginx/sites-available/ssl に配置

nginx の設定ファイルを編集

/etc/nginx/sites-available/default

PHP7.3をインストールしている場合は以下

server {
  listen 443 ssl http2;
  server_name localhost;

  ssl_certificate     /etc/nginx/sites-available/ssl/dev.pem;
  ssl_certificate_key /etc/nginx/sites-available/ssl/dev.key;

  location / {
    root /var/www/html;
    index  index.html  index.php;
  }

  location ~ \.php$ {
    root /var/www/html;
    fastcgi_pass unix:/run/php/php7.3-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }

  location ~ /\.ht {
    deny all;
  }
}

server {
  listen 80;
  server_name 127.0.0.1;

  location / {
    root /var/www/html;
    index  index.html  index.php;
  }

  location ~ \.php$ {
    root /var/www/html;
    fastcgi_pass unix:/run/php/php7.3-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }

  location ~ /\.ht {
    deny all;
  }
}

nginx を再読み込み

systemctl reload nginx

Vagrantfile で 80と443のポートフォワーディングも忘れずに行う。

  config.vm.network "forwarded_port", guest: 80, host: 80
  config.vm.network "forwarded_port", guest: 443, host: 443

Mac で動作確認

ブラウザを開いて https://dev.com/ で動作を確認

開発環境

# Vagrant # SSL # Mac