0
0

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.

初心者がDockerのLaravelでHTTPS化してみた(Windows、Mac両方可)

Posted at

つい4日ほど前にDockerを勉強し始めたのですが、「何をやってるかわからん」と毎日思っています。

色々調べてメリットを探ってみたのですが、初心者の内はどうも実感できそうにないです。

とまぁこんな感じの初心者がDockerで立ち上げたプロジェクト(ローカルホスト)をHTTPS化することに成功したので、ぜひ皆さんにも参考にして頂けたらなと思います。

ディレクトリ構造は以下のようになります。

project/
└─backend
│    ├─laravel
└─infra
│    ├─mysql
│    │      Dockerfile
│    │      my.cnf
│    │
│    ├─nginx
│    │      default.conf
│    │      Dockerfile
│    │      localhost-key.pem
│    │      localhost.pem
│    │
│    └─php
│            Dockerfile
│            php.ini
docker-compose.yml

プロジェクトを作成するにあたり、以下の記事を参考にさせて頂きました。とても分かりやすいのでぜひご覧ください!

【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン
Docker × Laravel ローカル環境でHTTPS(SSL)通信する

また、このようなディレクトリ構造でない方でも適時変えて頂ければできます。

それでは一緒に説明を見ていきましょう!!

#mkcertのインストール#

まずは、infra/nginx.pemという拡張子のファイルを作成していきます。

これは証明書というものです。

HTTPS化するにはこの証明書が必要なわけです。

とりあえず「mkcert」をインストールをしていない方は下記の記事参考にインストールしてください。

・Windows:Windows10にmkcertをインストールする

・マックの方は以下のコマンドで実行

brew install mkcert
mkcert -install

#証明書の発行#

Windowsの方はPowershellで行ってくださいね。

cd infra\iginx
mkcert -cert-file localhost.pem -key-file localhost-key.pem localhost

#Dockerfile、default.confの設定#

infra\nginx\Dockerfileにて以下を追記します。

FROM nginx:1.18-alpine

COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY ./localhost.pem /etc/nginx/conf.d/localhost.pem
COPY ./localhost-key.pem /etc/nginx/conf.d/localhost-key.pem

次に、infra\nginx\default.confにて以下を追記します。

server {
    # ここから
    listen 443 ssl;
    server_name localhost;
    ssl_certificate /etc/nginx/conf.d/localhost.pem;
    ssl_certificate_key /etc/nginx/conf.d/localhost-key.pem;
    # ここまでを追加
    root /work/laravel/public;

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

    index 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 app:9000;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

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

#docker-compose.ymlの設定#

docker-compose.ymlでポート番号を${WEB_PORT:-443}:443と変え、volumesで証明書を読み込みます。

docker-compose.yml
version: "3.8"
services:
  app:
    build: ./infra/php
    volumes:
      - ./backend:/work
  web:
    image: nginx:1.18-alpine
    ports:
      - ${WEB_PORT:-443}:443
    volumes:
      - ./backend:/work
      - ./infra/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./infra/nginx/localhost.pem:/etc/nginx/conf.d/localhost.pem
      - ./infra/nginx/localhost-key.pem:/etc/nginx/conf.d/localhost-key.pem
    working_dir: /work
  db:
    build: ./infra/mysql
    volumes:
      - db-store:/var/lib/mysql

volumes:
  db-store:

#プロジェクトの立ち上げ#

docker-compose down
docker-compose up -d --build
docker-compose exec app bash

そして、https://localhostにアクセス

無題.png

このようになっていれば成功です。

dockerって慣れるまで大変なんだろうけど頑張りやす。

以上、「初心者がDockerのLaravelでHTTPS化してみた(Windows、Mac両方可)」でした!

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい!!

Thank you for reading

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?