PHPを使ったSPA環境をDockerでつくる

はじめに

SPAを作ろうとしているが Dockerの勉強とかは抜きにとりあえず動く環境作りたい という方の為にボイラープレートを作ってみました。

いきなりですが、モノはこちらに置いてあります。
https://github.com/TsukasaGR/SPA-BoilerPlate-PHP

Laradockで良いのでは？

1コンテナ1プロセス ってきれいではあるんですが結構入り口のハードルが高い気がしています。

ですので、今回は

• フロントエンド
• バックエンド
• DB

の3コンテナだけにしています。

ちょっとだけ中身を解説

docker-compose.yml

まずはdocker-compose.yml。
ソースコードにコメントを付け足しています。

docker-compose.yml

version: '2'
services:
  # フロントエンド用コンテナ
  frontend:
    container_name: frontend
    build: ./docker-compose/frontend
    # VueやReactを想定していて、ほっとリロード用にポートを2つ空けています
    ports:
      - 80:80
      - 8080:8080
    # ソースコードをコンテナ内の/var/www/htmlにマウントし、ログファイルもマウントしています
    volumes:
      - ./frontend:/var/www/html
      - ./docker-compose/frontend/log/nginx:/var/log/nginx
    environment:
      TZ: "Asia/Tokyo"
    command: /sbin/init
    privileged: true
  # バックエンド用コンテナ
  backend:
    container_name: backend
    build: ./docker-compose/backend
    # フロントエンドとぶつからないようにポート番号を変えています
    ports:
      - 8000:80
    # PHPからDBにアクセスするため、DBコンテナと同一ネットワークの設定をしています(このコンテナからDBに接続する際のホスト名はapp-dbとして下さい)
    networks:
      - app_network
    # ソースコードをコンテナ内の/var/www/htmlにマウントし、ログファイルもマウントしています
    volumes:
      - ./backend:/var/www/html
      - ./docker-compose/backend/log/nginx:/var/log/nginx
      - ./docker-compose/backend/log/php-fpm:/var/log/php-fpm
    environment:
      TZ: "Asia/Tokyo"
    command: /sbin/init
    privileged: true
  app-db:
    container_name: app-db
    # 特に細かい設定をしないのでimageをそのまま使います
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      TZ: "Asia/Tokyo"
    ports:
      - 3306:3306
    # PHPからのアクセスを許容する為、バックエンドコンテナと同一のネットワークを設定しています
    networks:
      - app_network
    volumes:
      - ./docker-compose/db:/var/lib/mysql
    privileged: true
# バックエンドコンテナとDBコンテナを紐付けるためのネットワーク設定です
networks:
  app_network:

frontend/Dockerfile

次にフロントエンド用のDockerfile。
こちらもソースコードにコメントを付け足しています。

Dockerfile

# イメージファイルをCentOS7に設定
FROM centos:7.3.1611

# 実行コマンド設定
## nginxをインストール
RUN rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
RUN yum -y update nginx-release-centos
RUN yum -y --enablerepo=nginx install nginx
RUN mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.bk
ADD default.conf /etc/nginx/conf.d/
RUN systemctl enable nginx

## node.js,npmをインストール
RUN yum -y install epel-release bzip2
RUN yum -y update openssl
RUN yum-config-manager --enable cr
RUN yum -y install nodejs npm
RUN npm install -g n
RUN n latest

RUN npm install -g npm-check-updates
RUN npm install -g yarn

# 起動時実行コマンド(1コンテナ1プロセスの場合、CMDはプロセス起動のコマンドを指定すると思いますが、今回は複数混ぜ込んだコンテナなので/sbin/initとしています)
CMD ["/sbin/init"]

backend/Dockerfile

最後にバックエンド用のDockerfile。
こちらもソースコードにコメントを付け足しています。

Dockerfile

# イメージファイルをCentOS7に設定
FROM centos:7.3.1611

# 実行コマンド設定
## nginxをインストール
RUN rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
RUN yum -y update nginx-release-centos
RUN yum -y --enablerepo=nginx install nginx
RUN mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.bk
ADD default.conf /etc/nginx/conf.d/
RUN systemctl enable nginx

## phpをインストール
RUN yum -y install epel-release
RUN rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
RUN yum -y install --enablerepo=remi,remi-php71 php php-devel php-mbstring php-pdo php-gd php-mysql php-mcrypt php-xdebug php-xml php-zip
RUN mv /etc/php.ini /etc/php.ini.bk
ADD php.ini /etc/php.ini

## php-fpmをインストール
RUN yum -y install php-fpm --enablerepo=epel --enablerepo=remi --enablerepo=remi-php71
RUN mv /etc/php-fpm.d/www.conf /etc/php-fpm.d/www.conf.bk
RUN systemctl enable php-fpm
ADD www.conf /etc/php-fpm.d/www.conf

## git(composerで利用する為)
RUN yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker wget && \
    cd /usr/local/src/ && \
    wget https://www.kernel.org/pub/software/scm/git/git-2.9.3.tar.gz && \
    tar xzvf git-2.9.3.tar.gz && \
    cd git-2.9.3 && \
    make prefix=/usr/local all && \
    make prefix=/usr/local install

# composerをインストール(ホストOSに入れたくない方の為に)
RUN curl -sS https://getcomposer.org/installer | php
RUN mv composer.phar /usr/local/bin/composer

# 起動時実行コマンド(フロントエンドと同様です)
CMD ["/sbin/init"]

さいごに

ものすごくざっくりした説明で これおかしいんじゃないの？ というところも少なからずあると思います。
また、説明がだいぶザックリすがDockerを使ってSPAを初めて作られる方の何かしらの一助になれば幸いです。