React+Laravelで習慣管理アプリを作る(その1・準備編)

フロントエンド	React+Typescript
バックエンド	Laravel
デプロイ先	heroku

また開発にあたって下記を利用した。

実行環境	Docker
自動テスト	CircleCI
ドキュメント	GitBook

実行環境の構築

参考サイトはこちら。

Laravelのインストールやnpmには実行環境が必要なので、まずは実行環境をDockerで構築する。
(なお、DockerおよびDockerComposeはインストール済みのものとする。)
必要なイメージはPHPとNginx、MySQLであり、ComposerやnpmはPHPイメージ内でインストールする。

下記がdocker-compose.yml。

version: '3'
services: 
    nginx:
        image: nginx:1.15.6
        ports:
            - '8000:80'
        depends_on:
            - php
        volumes:
            - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
            - .:/var/www/html
    php: 
        build: ./docker/php
        volumes:
            - .:/var/www/html
    mysql:
        image: mysql:5.7
        environment:
            MYSQL_DATABASE: my_habit
            MYSQL_USER: default
            MYSQL_PASSWORD: default
            MYSQL_ROOT_PASSWORD: default
        ports:
            - '3306:3306'
        volumes:
            - mysql-data:/var/lib/mysql
volumes:
    mysql-data:

【nginx】
portでローカルの8000番とnginxコンテナの80番のポートフォワーディングの設定を記述。
depends_onにphpを指定し、phpコンテナの起動を待つ。
設定ファイルとLaravelのプロジェクトをマウントさせるためにvolumesを記述。
default.confは下記。

server {
    listen 80;

    root /var/www/html/public;
    index index.php index.html index.htm;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;

        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

portや公開ディレクトリの設定を記述。
locationディレクティブでLaravelのindex.phpファイルを読み込む設定を記述しておく。

【php】
phpはnpmのインストール等があるので、buildにDockerfileのあるディレクトリを指定する。

phpのDockerfileは下記。

FROM php:7.2-fpm

RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer
RUN apt-get update \
    && apt-get install -y \
    git \
    zip \
    unzip \
    vim

RUN apt-get update \
    && apt-get install -y libpq-dev \
    && docker-php-ext-install pdo_mysql pdo_pgsql

RUN apt-get update && apt-get -y install gosu
COPY entrypoint.sh /usr/local/bin/entrypoint.sh
RUN chmod +x /usr/local/bin/entrypoint.sh
#ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
RUN /usr/local/bin/entrypoint.sh

RUN apt-get -y update
RUN apt-get install -y \
    curl \
    gnupg
RUN curl -sL https://deb.nodesource.com/setup_11.x | bash -
RUN apt-get install -y nodejs
RUN npm install npm@latest -g

WORKDIR /var/www/html

基本的にphp-fpmのイメージにcomposerやnpmをインストールするコマンドを実行させている。
4段目のRUNで実行ユーザを作成するシェルスクリプトを実行している。

【mysql】
environmentでデータベースやユーザ名などの情報を環境変数に設定する。
ポートは3306をそのままローカルに転送する。
コンテナのデータ永続化のため、volumesを記述。

LaravelとReactのセットアップ

$ docker-compose up -d
$ docker-compose exec php bash
$ composer create-project --prefer-dist laravel/laravel

ドキュメントに従ってコマンド実行。
Reactはcreate-react-appを利用するのが手っ取り早いので下記コマンド実行。

$ npx create-react-app front

CircleCIのセットアップ

CircleCIにログインし、対象のGithubリポジトリを登録する。
そして、リポジトリのルート直下に.circleciディレクトリを作成し、中にconfig.ymlを作成する。

# PHP CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-php/ for more details
#
version: 2
jobs:
  build:
    docker:
      - image: circleci/php:7.3-apache-node-browsers # ...with this image as the primary container; this is where all `steps` will run
        environment:
          REVIEWDOG_VERSION: 0.9.11
      - image: circleci/postgres:11.6
        environment:
          POSTGRES_DB: default
          POSTGRES_USER: default
          POSTGRES_PASSWORD: secret
    working_directory: ~/laravel # directory where steps will run

    steps:
      - checkout
      - run:
          name: Install and enable pdo_pgsql php extension
          command: |
            sudo apt-get update && sudo apt-get install libpq-dev
            sudo docker-php-ext-install bcmath json pdo_pgsql && sudo docker-php-ext-enable pdo_pgsql
      - run: sudo composer self-update

      # Download and cache dependencies
      - restore_cache:
          keys:
            # "composer.lock" can be used if it is committed to the repo
            - v1-dependencies-{{ checksum "composer.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: composer install -n --prefer-dist

      - save_cache:
          key: v1-dependencies-{{ checksum "composer.json" }}
          paths:
            - ./vendor
      - restore_cache:
          keys:
            - node-v1-{{ checksum "package.json" }}
            - node-v1-
      - run: yarn install
      - save_cache:
          key: node-v1-{{ checksum "package.json" }}
          paths:
            - node_modules
      - run:
          name: Install and build CRA
          command: | # TODO: cache
            yarn install
            yarn run build:production
          working_directory: ~/laravel/front
      - run: cp .env.ci .env.testing
      - run: php artisan key:generate --env=testing
      - run: php artisan migrate --env=testing --force

      - run:
          name: Run tests
          command: |
            ./vendor/bin/phpunit --log-junit /tmp/test-results/phpunit/logfile.xml
      - store_test_results:
          path: /tmp/test-results

大まかな流れとしては、実行環境のイメージから、必要なライブラリをインストールし、最後にphpunitを実行する。

Herokuのセットアップ

Herokuにログインし、新規インスタンスを作成する。
対象リポジトリのmasterブランチをデプロイする設定にする。
環境変数はheroku-cliを用いて設定する。
また、nodejsのビルドパックを追加しておく。

GitBookのセットアップ

$ npm i -D gitbook-cli gitbook-plugin-plantuml

上記コマンドを実行し、ライブラリをインストール。
PlantUMLを利用してUMLを記述するのでPlantUMLのインストールとプラグインのインストールもしておく。
book.jsonに下記を記述し、プラグインを利用する設定をする。

{
    "plugins": ["uml"],
    "pluginsConfig": {
        "uml": {
            "format": "png",
            "nailgun": false
        }
    }
}

後はmarkdownでドキュメントをガリガリ書いていくのみ。

次回

React+Laravelで習慣管理アプリを作る(その2・React編)