Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@hide4649(hide @インフラエンジニア)

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

Last updated at Posted at 2020-06-03

#はじめに
　就活中の選考課題で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というパッケージ管理ツールをインストールします

①スタートメニューを右クリックしてコマンドプロンプトを管理者権限で開く
スクリーンショット (37).png
②コマンドか公式サイトからChocolateyインストール

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

・公式サイト
スクリーンショット (39).png

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)
①ターミナルにサイト中央のコマンドをペーストする
image.png

/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通信を要求してくるので環境を整えて開発することをおすすめします
お読み頂きましてありがとうございました。
スクリーンショット (41).png

9
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?