소개

취업 중의 선고 과제로 Geolocation api를 사용하여 위치 정보를 이용하는 사이트를 만들 때
Google 크롬 브라우저에서는 https 통신하지 않으면 위치 정보를 얻을 수 없으므로,
https 통신을 할 수 있도록 했습니다.
　이 기사는, 유찬씨의 기사인 최강의 Laravel 개발 환경을 Docker를 사용해 구축하는 【신편집판】 를 베이스로 https 통신을 구축하고 있습니다. 1부터 환경을 준비하고 싶은 분은, 상기의 기사를 처음으로 참조하고 나서 본 기사를 봐 주세요.

개발 환경

개발 환경


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의 +1을 지우십시오.
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의 +1을 지우십시오.
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 통신을 요구해 오므로 환경을 정돈해 개발하는 것을 추천합니다
읽어 주셔서 감사합니다.