Zenn
🐣

Docker + Nginx + Laravelの開発環境構築からHerokuへのDeployまで

2020/10/17に公開
Docker
Heroku
Laravel
nginx
tech

概要

時代はSPAですが、まだまだモノリシックな環境を作る場面があるのでメモとして残しておきます。
Laravelのバージョンは調整できるようにしてあります。
※1 記事ではLTSである6系を使っています。
※2 DBはHerokuへDeployする事を前提としているのでPostgreSQLを利用しています。

DockerImageのバージョン等

  • php:7.4-fpm-alpine
  • nginx:1.19-alpine
  • postgres:12

完成図と最終的なコード

完成図

最終的なコード

https://github.com/nagi125/laravel-docker-template
Herokuに直接Deployできるようにディレクトリ構成を調整してあります。

ざっくり解説

.dockerディレクトリにDockerfileとconfファイルを準備して、docker-compose.ymlにてそれぞれのコンテナの関係を記述します。
Nginxの「/app/public」とLaravelの「/app/public」が共有しているところがポイントになります。
ここの共有ができていないと、静的ファイルを返す事ができません。

docker-compose.yml

version: '3'
services:
  nginx:
    container_name: nginx
    build: .docker/nginx
    ports:
      - 80:80
    volumes:
      - .:/app
    tty: true
    restart: always
    depends_on:
      - app

  app:
    container_name: app
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      LANG: 'ja_JP.UTF-8'
      TZ: 'Asia/Tokyo'
      LOG_CHANNEL: 'stderr'
      DB_CONNECTION: 'pgsql'
      DB_HOST: 'db'
      DB_PORT: '5432'
      DB_DATABASE: 'laravel_development'
      DB_USERNAME: 'docker'
      DB_PASSWORD: 'docker'
    volumes:
      - .:/app
    expose:
      - 9000
    tty: true
    restart: always
    depends_on:
      - db

  db:
    image: postgres:12
    container_name: db
    environment:
      TZ: 'Asia/Tokyo'
      POSTGRES_USER: 'docker'
      POSTGRES_PASSWORD: 'docker'
      POSTGRES_DB: 'laravel_development'
    volumes:
      - db:/var/lib/postgresql/data
    ports:
      - 5432:5432

volumes:
  db:

Laravelの準備

https://github.com/nagi125/laravel-docker-template
をベースにしてLaravelの準備をします。

環境立ち上げ

$ docker-compose up

Laravelのインストール

直下のディレクトリに作ろうとするとファイルが存在していて怒られるため、一度「blog」として作成します。

$ docker-compose exec app composer create-project --prefer-dist laravel/laravel blog "6.*"

blog内のファイルを直下にコピーします。
※Mac側でファイル操作をすると早く終わります。

$ docker-compose exec app cp -R ./blog/. ./

最後にblogを削除します。

$ docker-compose exec app rm -rf blog

「http://localhost」でWelcome画面が表示されれば成功です。

HerokuにDeploy

Heroku側のNginxの準備

Heroku側でnginxを利用するため、.heroku/nginx/にnginx.confを準備します。
※.herokuは私が勝手につけたディレクトリ名なので、他のディレクトリ名でも問題ありません。

.heroku/nginx/nginx.conf

location / {
    # try to serve file directory, fallback to rewrite
    try_files $uri @rewriteapp;
}

location @rewriteapp {
    # rewrite all to index.php
    rewrite ^(.*)$ /index.php/$1 last;
}

Procfileの準備

プロジェクト直下にProcfileを準備します。
Herokuの設定やデプロイ時のコマンドをここで記述します。

Procfile

web: vendor/bin/heroku-php-nginx -C .heroku/nginx/nginx.conf public/

heroku-cliのインストール

$ brew tap heroku/brew && brew install heroku

Herokuにログイン

$ heroku login

ブラウザが立ち上がるので、ブラウザ側でログインするとTerminal側もログイン完了となります。

Herokuにアプリケーションを作成する

$ heroku apps:create your-app-name

HerokuのBuild設定をする

Buildする際にPHPとNode.jsを使用するので設定を追加します。

$ heroku buildpacks:add heroku/php -a your-app-name
$ heroku buildpacks:add heroku/nodejs -a your-app-name

HerokuにDeployする

※ 2020年10月時点ではmaster、mainどちらも対応しているようです。

$ git push heroku main

Heroku側に環境変数をセットする

Heroku側の環境変数にAPP_KEYをsetする

$ heroku config:set APP_KEY=your-app-key -a your-app-name

確認

$ heroku open

最後に

以上で開発環境と本番環境の下準備が完了しました。
本番運用する場合はDB設定・S3設定・Session設定・Mail設定・カスタムドメイン設定等
設定する事がまだたくさんありますが、この記事ではHerokuへのDeployまでとします。
参考にしていただければ幸いです。

Discussion