本アプリで出来ること
簡単に言うとhabitifyのパクリ。
その日にやるべきことを一覧で確認して、完了したかどうかを記録する。
後からカレンダー表示でいつやったかを確認できれば良し。
Githubのソースはこちら。
使用したミドルウェア
アプリには下記ミドルウェアを使用した。
フロント・バックともに細かなライブラリは後の記事で書く(予定)。
フロントエンド | 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でドキュメントをガリガリ書いていくのみ。