さてさて、以前公開した記事 Laravel + JSでバーコード配送チェックする でも少し触れたのですが、現在Google Chromeのはセキュリティ・レベルの初期設定が上がっていて、カメラを使う場合、必ずHTTPSで接続していないといけません。
そのため、上の記事を書いたときは一時的な解決策としてFirefoxで開発を行いました。
ただ、そうはいっても今後もいろいろとHTTPSは使えた方がいいのは事実なので、ここいらで重い腰を上げて、自己証明を使ったHTTPS接続をローカル環境に整えておくことにしました。
ということで、今回はnginxでHTTPS接続をする設定する方法を紹介します。
ぜひ参考にしてくださいね。
実行環境： Ubuntu 18.04, nginx 1.4.0
証明書とプライベートキーをつくる
まず証明書とプライベートキーを次のコマンドでつくります。
sudo openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout /etc/ssl/private/my-nginx.key -out /etc/ssl/certs/my-nginx.crt
すると、以下のような文章が表示されます。
writing new private key to ‘/etc/ssl/private/my-nginx.key’
—–
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter ‘.’, the field will be left blank.
要約としては、
- 今から証明書に組み込まれる質問をいくつかするよ！
- でも、質問はブランク（回答なし）でもOKだよ！
と言っているので、無視して全てEnterキーを押しても問題ありません。
これを実行すると、以下２つのファイルが作成されます。
- プライベートキー ・・・ /etc/ssl/private/my-nginx.key
- 証明書 ・・・ /etc/ssl/certs/my-nginx.crt
※ ちなみにローカル環境なので、有効期間は3650日（＝１０年）にしました。
nginxのコンフィグファイルを変更する
続いて、nginx側の設定です。
例えば、example.testというドメインを設定する場合です。
server {
listen 443 ssl;
ssl_certificate /etc/ssl/certs/my-nginx.crt;
ssl_certificate_key /etc/ssl/private/my-nginx.key;
server_name example.test;
root /******/public;
index index.php index.html;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
error_page 404 /index.php;
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
}
}
この中で変更すべき場所は、次のとおりです。
- ssl_certificate ・・・ 先ほど作った証明書（保存場所を変更した場合）
- ssl_certificate_key ・・・ 先ほど作ったプライベートキー（保存場所を変更した場合）
- server_name ・・・ HTTPS接続したいドメイン名
- root ・・・ サイトのルートフォルダ
- fastcgi_pass ・・・ 環境によってPHP-FPMのパスも変更しておいてください。
nginxの443ポートを開ける
おそらくまだ443ポートが空いていないので許可しておきましょう。
sudo ufw allow 'Nginx HTTPS'
これを実行すると次のような表示が現れます。
ルールをアップデートしました ルールをアップデートしました(v6)
nginxを再起動する
では、次のコマンドでnginxを再起動します。
sudo systemctl restart nginx
そして、念のためPHP-FPMも再起動しておきましょう。（環境にあわせてください）
sudo systemctl restart php7.2-fpm
ブラウザでアクセスする
では、サーバー設定は完了しました。
実際にブラウザでローカル環境のサイトにアクセスしてみましょう。
エラーが出ても慌てないでください。
これで合っています。
というのも、今回作った証明書はGoogle Chromeが信頼できる機関が発行したものではないので、このような表示が出ています。（つまり、HTTPSはできるということです）
ということで、このページの「詳細設定」リンクをクリックします。
すると、次のような表示がでますので、「******にアクセスする（安全ではありません）」をクリックしましょう。（当然自分のサイトなので自分で自分の情報を抜き取るはずがありませんので。とはいっても、PCのセキュリティはきちんとしておく必要がありますよ。）
そして、https://******.test（Laravel + JSでバーコード配送チェックする で作ったページ）へアクセスするときちんとカメラも利用することができました。
もちろん、きちんとした証明書ではないのでアドレスバーには次のような警告がでていますが、開発環境なので気にすることはないでしょう。
ということで今回は短いですがこれで終了です。
お疲れ様でした！
「今日はもうお休みします・・・zzz」
開発のご依頼お待ちしております 😊✨
開発効率を上げるための機材・まとめ
