南 健太郎 
こんにちは！
個人開発者の南です！
今回はローカル環境内にあるLaradockにSSLを追加して、「https」で開発しているアプリにアクセスする方法を紹介します。
最近、PayPalのExpressCheckoutを使ってプログラムを書いていたのですが、どうやらhttps経由でアクセスしないとダメかもと思い色々調べていました。
今回の記事を読むことで、ローカルのLaradockにSSLを導入する流れがわかると思います。
ちなみにSSL化の方法に関して、今回の記事は下記の方の記事を参考に、今後自分でやる時に忘れないようにメモとして残しています。
SSL化について、手順通りのものがなかなか見つからなくて、とても助かりました。
素晴らしい記事をありがとうございます！！
SSLを設定する手順について
ローカル環境内のLaradockにSSLを導入するには、下記の手順で導入していきます。
１．nginxの設定ファイルの変更
２，SSL証明書の追加
nginxの設定ファイルの変更について
laradock/nginx/sites/配下に、「default.conf」ファイルもしくは「app.product-name.conf」といったような設定ファイルがあると思います。
１つのサイトを運用している開発は、「default.conf」という設定ファイル。
複数のドメインで切って運用している開発は、「app.product-name.conf」、「app.product-name２.conf」という風に設定ファイルをわけていると思います。
そのファイルの中に、下記のような記述があります。
|
1 2 3 4 5 |
# For https # listen 443 ssl; # listen [::]:443 ssl ipv6only=on; # ssl_certificate /etc/nginx/ssl/「任意のアプリの名前」.app.crt; # ssl_certificate_key /etc/nginx/ssl/「任意のアプリの名前」.app.key; |
この記述の「#」の部分を外して、「任意の名前」の部分を好きな名前に変更しましょう。
僕は開発しているドメインの名前に変更して下記のようにファイルの中身を変更しました。
このように設定したら、設定したファイルを保存します。
SSL証明書の追加
設定したファイルの保存ができたら、今度は「laradock/nginx/」配下にある「startup.sh」をというファイルを開きます。
デフォルトだと、下記のような記述があるだけだと思います。
|
1 2 3 4 5 6 7 |
#!/bin/bash if [ ! -f /etc/nginx/ssl/default.crt ]; then openssl genrsa -out "/etc/nginx/ssl/default.key" 2048 openssl req -new -key "/etc/nginx/ssl/default.key" -out "/etc/nginx/ssl/default.csr" -subj "/CN=default/O=default/C=UK" openssl x509 -req -days 365 -in "/etc/nginx/ssl/default.csr" -signkey "/etc/nginx/ssl/default.key" -out "/etc/nginx/ssl/default.crt" fi |
上記の下に下記のように記述を追加します。
|
1 2 3 4 5 6 7 |
if [ ! -f /etc/nginx/ssl/guildpress-payment.app.crt ]; then openssl genrsa -out "/etc/nginx/ssl/「任意のアプリの名前」.app.key" 2048 openssl req -new -key "/etc/nginx/ssl/「任意のアプリの名前」.app.key" -out "/etc/nginx/ssl/「任意のアプリの名前」.app.csr" -subj "/CN=「任意のアプリの名前」.app/O=「任意のアプリの名前」.app/C=UK" # ↓ Chrome用に設定を追加。ホスト名を指定する。 echo subjectAltName=DNS:「任意のアプリの名前」.app > "/etc/nginx/ssl/「任意のアプリの名前」.ext" openssl x509 -req -days 365 -in "/etc/nginx/ssl/「任意のアプリの名前」.app.csr" -signkey "/etc/nginx/ssl/「任意のアプリの名前」.app.key" -out "/etc/nginx/ssl/「任意のアプリの名前」.app.crt" -extfile "/etc/nginx/ssl/「任意のアプリの名前」.ext" fi |
「任意のアプリの名前」の部分には、「nginxの設定ファイルの変更」のところでコンフィグファイルで記述したものと同じものを設定します。
上記を追加して、僕は下記のようなファイルになりました。
これでSSL証明書の追加も完了です。
これが完了したら、一度Laradocで稼働させているもの「docker-compose」コマンドで停止させましょう。
ちなみに、このコマンドは「laradock」のディレクトリ内で実行します。
|
1 |
docker-compose stop |
「docker-compose」コマンドで停止させたら、次はLaradockのnginxをビルドし直します。
ビルドし直すには、下記のコマンドを使用します。
ちなみに、このコマンドは「laradoc」のディレクトリ内で実行します。
|
1 |
docker-compose build nginx |
コマンドを実行すると下記のように色々表示されます。
「Successfully tagged laradock_nginx:latest」と表示されたら、ビルド完了なので、いつものようにdockerを立ち上げましょう。
僕は下記のコマンドをいつも立ち上げる時に使用しているので、下記のコマンドを実行します。
このコマンドも「laradock」のディレクトリ内で実行します。
|
1 |
docker-compose up -d nginx mysql workspace phpmyadmin |
立ち上げた後に、httpsで自分のサイトにアクセスしてみましょう。
下記のように、httpsでアクセスすることができます。
GoogleChromeのエラーについて
おそらく、そのまま普通にChromeでアクセスすると下記のようChromeから警告が表示されると思います。
これは、ローカルで使用している証明書がオレオレ証明書なためエラーが出ています。
色々調べてみたのですが、対処の仕方がわかりませんでした。。。
ただこの状態でも、サンドボックスのPayPal環境にアクセスできるので特に問題ないかと思います。
このエラーには、下記の順番で対処すればhttpsでサイトにアクセスできます。
１．詳細設定をクリック。
２．表示された「自分のドメイン」にアクセスする(安全ではありません)をクリック。
まとめ
今回は、ローカル内のLaradockにSSLを導入してhttpsでアクセスする方法を紹介しました。
今回の記事が同じように悩んでいる方のお役に立てれば幸いです。