ローカル環境でnginxをhttps通信にする方法

8028 ワード
nginx HTTPS Laravel docker-compose Docker nginx テキストリンク

はじめに

　就活中の選考課題でGeolocation apiを使って、位置情報を利用するサイトを作る際に
Google chromeのブラウザでは、https通信しないと位置情報を取得できないので、
https通信をできるようにしました。
　この記事は、ゆうきゃんさんの記事である最強のLaravel開発環境をDockerを使って構築する【新編集版】をベースにhttps通信を構築しています。１から環境を用意したい方は、上記の記事をはじめに参照してから本記事をご覧ください。

開発環境

開発環境
Mac
Windows10 Home
docker tool box 19.03.1
docker-compose 1.24.1
Mysql 8.0.20
Nginx 1.18.0

https通信する手順

Chocolateyのインストール(windows)

https通信に必要なSSL証明書を簡単に発行することができるmkcertというツールをインストールするために
Chocolateyというパッケージ管理ツールをインストールします

①スタートメニューを右クリックしてコマンドプロンプトを管理者権限で開く

②コマンドか公式サイトからChocolateyインストール

・コマンド
C:\>Chocolatey Install
Chocolatey v0.10.15

・公式サイト

C:\>Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePoin<img width="1439" alt="スクリーンショット 2020-07-02 18.13.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524511/d7d956bd-b135-15ff-33b0-5ef309a39f96.png">
tManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))`

mkcertをインストールしてSSL証明書を発行

C:\>choco install mkcert
#Macユーザーはbrew install mkcert
C:\>mkcert localhost 196.168.99.101(ご自身のIPアドレスを入力)
mkcert localhost 196.168.99.101
Using the local CA at "C:\Users\ユーザ名\AppData\Local\mkcert" 

Created a new certificate valid for the following names 
 - "localhost"
 - "196.168.99.101(ご自身のIPアドレス)"

The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem"

発行したら今いるディレクトリに発行させるので
localhost+1.pem　localhost+1-key.pemの+１を消して
docker-laravel\infrastructure\docker\nginxのディレクトリにファイルを移動します

⚠もし、mkcert localhost 196.168.99.101(ご自身のIPアドレスを入力)と打って
システムリソース不足のため...と言われたら、
セキュリティーソフトのリアルタイムスキャンの停止や再起動をして見てください

brewをインストール(Mac)

①ターミナルにサイト中央のコマンドをペーストする

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Password:ご自身のMacのパスワードを入力

②mkcertをインストールしてSSL証明書を発行する

brew install mkcert
mkcert -install
mkcert localhost 127.0.0.1

発行したら今いるディレクトリに発行させるので
localhost+1.pem　localhost+1-key.pemの+１を消して
docker-laravel\infrastructure\docker\nginxのディレクトリにファイルを移動します

⚠もし、mkcert localhost 196.168.99.101(ご自身のIPアドレスを入力)と打って
システムリソース不足のため...と言われたら、
セキュリティーソフトのリアルタイムスキャンの停止や再起動をして見てください

docker-compose.ymlの記述

web:
    build: ./docker/nginx
    ports:
      - 196.168.99.101:80:80
      - 196.168.99.101:443:443(ここを追加で記述する)
    volumes:
      - php-fpm-socket:/var/run/php-fpm
      - ../backend:/work/backend

Dockerfileの記述

FROM node:14.2-alpine as node
FROM nginx:1.18-alpine
SHELL ["/bin/ash", "-oeux", "pipefail", "-c"]

ENV TZ=UTC

RUN apk update && \
  apk add --update --no-cache --virtual=.build-dependencies g++

  COPY --from=node /usr/local/bin /usr/local/bin
  COPY --from=node /opt /opt
  COPY ./default.conf /etc/nginx/conf.d/default.conf
  ADD ./localhost.pem /etc/certs/localhost.pem(ここを追加で記述する)
  ADD ./localhost-key.pem /etc/certs/localhost-key.pem(ここを追加で記述する)

  WORKDIR /work/backend

default.confの記述

access_log /dev/stdout main;
error_log /dev/stderr warn;

  server {
    listen 80;
    root /work/backend/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
  }

  server {(ここから追加で記述する)
    listen 443 ssl;
    root /work/backend/public;
    ssl_certificate /etc/certs/localhost.pem;
    ssl_certificate_key /etc/certs/localhost-key.pem;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
  }

docker-compose の起動

//コンテナをビルド
make build　＝　docker-compose build --no-cache --force-rm
//コンテナを作成する
make up　＝　docker-compose up -d
//全コンテナを起動する
docker start $(dokcer ps -a -q)
⚠makefileがない場合はdockerコマンドを入力してください

結果

https://（ご自身のアドレス）を入力して接続すると下記のようにhttps通信ができました！
最近のブラウザはhttps通信を要求してくるので環境を整えて開発することをおすすめします
お読み頂きましてありがとうございました。