角谷鵜技術五十三次
1人でもWebアプリ（Laravel + React）を速く開発しつづける環境をつくる
本記事でわからないことがあれば↑にコメントを下さい。できる限りお答えします。

個人開発は面白いので気軽にチャレンジしたいですよね。一方で、開発環境やデプロイフローを作るのは最初知識がないと後回しにしがちです。しかし、CI/CDは最初に組んだほうがいいし、IDEの設定も最初にすると積分で効いてきます。手軽な開発・運用環境を構築するのがこの記事の役割です。

Gyazo
最終的な構成は上図のようになります
右側では、Heroku上にアプリケーションのがホストされています
WebサーバとしてApacheを利用しますが、Herokuが自動的に設定してくれるので、開発者はほぼ意識しないため、書いていません
細かいことは現時点でわからなくても大丈夫です

このチュートリアルでできるのはこのようなサイトです。DBからデータを取得して文字列を表示しています。
サイトの内容自体に意味はありません。これを実現する設定の紹介が本記事の役割です。
リポジトリをcloneして試すことができます
CircleCIやHerokuといった有償のサービスを利用しますが、無料の範囲で試すことができます。ぜひ手を動かしてみてください。

TL;DR
LaravelとReactでWebアプリケーションを個人開発するための流れを紹介します
手順はほぼcommitの流れと同じように進みます
具体的には次のような項目を説明しています
フロント/バックエンドの開発環境の作成方法
バックエンド開発にPHPのWeb Application FrameworkであるLaravel
テストフレームワークはPHPUnit（Laravelデフォルト）
フロントエンド開発にReact + TypeScript
Create React App（以下、CRA）をつかった開発環境の構築
IDE（IntelliJ IDEA（有償版））の設定方法
GraphQLによるAPI作成
バックエンド：Lighthouse
フロントエンド：Apollo
LaravelのフロントエンドをReactにするつなぎこみ
この記事の特徴は、Herokuデプロイを前提としたこのつなぎこみの解説
Herokuでの継続的デプロイメント
PHPとTypeScriptの混在するリポジトリでのHerokuの設定方法
HerokuのGitHub連携により、masterブランチにマージされたコードを自動的にデプロイ
コミットに対する自動テストと静的解析
CircleCIを使い、GitHubにcommitをプッシュするごとにCIを回す
Pull Reuqest (PR)に対して、PHPのコードをPHPStanを使って静的解析してreviewdogでコメントを付ける
PHPUnitのテストを回す
CIが落ちたらマージできなくする
ロギング
サーバにエラーがあったら通知してほしいし原因を探りたい

この記事の想定読者
PHP + LaravelでWebアプリケーションを作りたい、かつフロントはLaravelのテンプレートエンジンBladeではなく、ReactやVueなどに差し替えたい方
LaravelやReact自体の機能説明はしません
個人開発において、最低限の開発環境が欲しい方
次のことはできると仮定します
基本的なLinuxのコマンドがわかる
GitHubが使える
説明を適宜省略しますが、Scrapboxは単語から連携して関連記事が出て、それをたどることで目当ての情報にたどり着けるかもしれません
例えば上の「Laravel」をクリックするとLaravel自体の説明を書いています。Herokuの説明はしませんが、Herokuに軽く説明が書いてあります
個人でアプリケーションを作成していることがある方はやっていることだと思うので、得るものはあまりないと思います


まえがき：個人開発は楽しい
Webアプリケーションは個人でも「結構便利」レベルの問題解決ができるのが魅力です
年を増すごとにWebアプリケーションへの要求が大きくなり、それを実現するために必須となる知識の量は単調増加していると思います。2019年現在のWeb開発者のロードマップはこうらしいです
一方、人間の学習能力はそう簡単にあがりません。困りましたね。ただ、学習環境や、PaaSなどの楽をするしくみが整い始めました
学習環境の例
GitHubによって高品質なソースコードや開発の過程を見ることができるようになった

2019年現在、個人開発でWebアプリを作るときの構成としては、クライアントをVue/React/Angular（ネイティブアプリとWeb両方対応したいならFlutter）などでかき、バックエンドはFirebaseやAWSの各種サービスを使うことも多いと思います。
Firebase便利！Firebaseを使おう！

〜完〜

……そのような構成は他の誰かが書いてくれるはずなので、本記事ではバックエンドとしてHerokuを採用します。
Herokuを使うと嬉しいことは次のとおりです。
LaravelのようなWAFを動かすことができる
「Laravelを学習しながら、Webアプリケーションをつくってみたい。ついでに最近のフロントエンドを学んでみるか〜」というときに便利
設定が楽で、月額0円〜1000円程度で比較的安価かつ定額でアプリをホストできる
本当に格安を求めるとVPSとかになると思いますが、デプロイフローの簡略化と価格のバランスが取れていると思います

この記事で得られる開発環境
以降では、冒頭で述べたような「そこそこ満足できる開発環境」の構成をつくっていきます。

日々の開発の流れは次のようになります。
開発者は、コードを書いてローカル環境で確認する
コンソールやLaravel Telescopeでデバッグをして試行錯誤する
GitHubにcommitをPushしてPRをつくる
コードが静的解析され、まずいところがコメントされる
PRに問題なければマージをする
自動的にプロダクション環境（実際にユーザーがサービスをさわれる環境のこと）に反映される

開発環境をつくる
Gyazo

フロントエンドとバックエンドのローカル環境をつくります。それぞれ、公式に提供されているものを利用する設定をしていきます。

再現環境
vagrant 2.2.6
vagrant box add laravel/homestead fails. · Issue #1324 · laravel/homesteadの問題があるので2.2.5を入れたほうが良さそう
yarn 1.19.2
node v13.2.0
下の手順をやっていて、なんかおかしいなと思ったらバージョンを確認してみてください

バックエンドの開発環境をつくる
Laravelは公式にVagrantで動くVMイメージであるHomesteadが提供されているので設定します
ミドルウェアも全部入りなので、この上で開発することができます
ドキュメントの通り導入できます。全体の流れとしてはHomestead#adf20dのようなかんじです
以下では、デフォルトの設定であると仮定します。すなわち次のような設定であるとします。
folders:
# localのディレクトリはここにあると仮定します
- map: ~/dev/laravel-cra-template
# vagrant上のcode/にmappingされる
to: /home/vagrant/code
sites:
# laravel-react.testにアクセスすると
- map: laravel-react.test
# code/publicへのアクセスになる（laravelデフォルトの設定だとindex.phpがよばれる）
to: /home/vagrant/code/public
Laravelプロジェクトを作成する
Laravelのインストール
https://laravel.com/docs/6.x/installation にしたがってインストールします
zsh
# homestead.yamlのあるディレクトリで
vagrant ssh
# homestead上で
cd code
composer create-project --prefer-dist laravel/laravel .
ここまででバックエンドの開発環境が整いました。 http://laravel-react.test/ にブラウザでアクセスすると次のような画面がでます。
Gyazo
次はフロントエンドの開発環境をつくっていきます。

フロントエンドの開発環境をつくる
Create React Appを使います
Reactコミュニティが公式提供しているテンプレートで、以下の理由で初学者におすすめです
ベストプラクティスがつまった開発環境が提供されている
WebpackやBabelといった初学者には複雑なレイヤーが隠蔽されている（設定に悩むのではなくて、アプリケーションを書きたいですよね？）。かつ、いざとなれば自分でWebpackの設定を書くことができる
デフォルトはJavaScriptで書くことになりますが、TypeScriptで書くためのテンプレートが用意されています。今回はこちらを使います。型があるとコード補完でサボれて便利。
インストール
zsh
# 手元PC上で
cd ~/dev/laravel-cra-template
# project root直下のfrontディレクトリにReactのプロジェクトを作成します
yarn create react-app front --typescript
起動
zsh
cd front
# 起動
yarn run start
http://localhost:3000/ にアクセスするとReactプロジェクトにアクセスできると思います
Gyazo
ここまででフロントエンドの開発環境が整いました。
（コードをコミット時にhuskyでPrettierをかけるなどするともっとよいですが、割愛します。）
次にこれをデプロイしていきます。しかし、そのまえにやることがあります。

LaravelへのリクエストをReactでハンドリングする
ここまでの設定は、以下のような開発環境を想定した設定です
localhost(Ceate React App） - APIアクセス -> Laravel（homestead）
HTTPサーバーがlocalhostとhomestead（Apache）の2つたっていることがわかります
ところで、このアプリケーションはHerokuにホストします。
開発環境と同じ構成でフロントのためにサーバを建てるとその分インスタンスが必要で運用コストが上がってしまいます。そこで、1インスタンス（Heroku用語ではDyno）に乗せることを考えます。

これを実現するために、次のような設定をしていきましょう
デプロイの際にReactをビルドして、public/以下にビルド結果を配置する
Laravelへのリクエスト（ GET / など）を、Reactにわたす設定を書く
デフォルトだと、http://laravel-react.test/ にアクセスすると、初期状態（現状）だとBladeテンプレートの welcome.blade.php の内容が表示されてしまいます
Gyazo

実現したいこと
http://laravel-react.test/ にアクセスしたときに、frontのビルド結果（Reactで組んだビュー）を出したい
アイデア
Homesteadのデフォルトのルーティングでは、public/以下にアクセスするようになっているので、フロントのビルド結果をここにおきます
手順
front/package.json に次のコマンドを追加します
"build:production": "yarn build && mv build/* ../public",
次のルーティングを routes/web.php に追加します
<?php
# どのルートにもマッチしないときに
Route::fallback(function () {
# public/index.htmlにはCRAのビルド結果がおいてある
return file_get_contents(public_path('index.html'));
});
この設定をしておくと、APIを作成したときにLaravel側にルーティングが存在すればそれが利用されるようになります。この設定はとても重要です。すべてのリクエストはLaravelがまずうけ、そののちにルーティングしていることを意識してください。
yarn run build:production を叩いたのち http://laravel-react.test/ にアクセスすると、フロントが差し替わっていることがわかります
本番ではこのビルドが必要になるので、Herokuにデプロイする際に自動化します
開発環境のフロント開発においては、 yarn run start をつかってローカルサーバをたてて開発をするので、このコマンドは開発環境でつかうことはありません。

Herokuにデプロイする

Gyazo

ここまでで、フロントエンドの成果物をブラウザで表示できるようになりました。
一旦Herokuにデプロイしましょう。Herokuを使うのは手軽だからです。

手順
https://dashboard.heroku.com/new-app で新しいインスタンスを作成します
例として、 kadoyau-laravel-react という名前にしました。以下ではこれを YOUR_APP_NAME とよびます。
GitHubからデプロイできるようにします
GitHubを紐付けます
Gyazo
masterブランチをpushする（あるいはPull Requestがmasterにマージされる）ごとにデプロイする設定にします
Gyazo

Laravelに必要な環境変数を設定する
最低限必要なのはLaravelのAPP_KEYですが、まとめて設定してしまいましょう
https://dashboard.heroku.com/apps/YOUR_APP_NAME/settings でGUIから設定できますが、次のようにコマンドラインでも設定できます。
.env の内容を設定しましょう。HerokuではPostgreSQLが標準で、HomesteadはデフォルトMySQLなので接続先をPostgreSQLにかえる設定も混ぜておきます。
heroku config:set -a YOUR_APP_NAME \
APP_KEY=base64:YOUR_KEY_IS_HERE \
APP_NAME=laravel-react\
APP_ENV=production \
APP_DEBUG=false \
LOG_CHANNEL=stack

nodejsのBuildPackを追加する
pushするだけではrootディレクトリのcomposer.lock（PHP）しか認識されてインストールされません
クライアントのプロジェクトもビルドしたいので、ビルドパックを追加します
https://dashboard.heroku.com/apps/YOUR_APP_NAME/settings にアクセスして、次のようにビルドパックを設定します
一度でもデプロイをしていれば、 heroku/php は自動的に検知されていると思います
Gyazo
Herokuでyarnをつかうの設定を入れる
rootで yarn install すればOK。ただしrootのpackage.jsonはこんなふうに依存物はなしにしておきましょう。フロントエンドはfront以下におしこめたので不要なはずです。
Procfileの追加
ApacheのDocument Rootとしてpublicディレクトリを指定します
ロギングの設定をする
papertrailというログ保存サービスがあるのでそのアドオンを使うとよいです

デプロイが完了すると以下のように表示されます
Gyazo

🚀ここまででできるようになったこと
フロントとバックエンドの開発環境が揃った
masterブランチにコミットしたものが自動的にHerokuにデプロイされるようになった
エラーやアクセスログをpapertrailのダッシュボードで見ることができるようになった

次はこんなことがしたくなると思います
Laravelでアプリケーションを作成してAPIを公開する
ReactのフロントでそのAPIを叩く
やっていきましょう💪

APIを作成し、開発環境で動くようにする
この例ではMySQLのuserテーブルに格納されているユーザの名前を返すAPIを作りました
DBのシーディングもしておきます

フロントからHomestead上のGraphQL APIを利用する準備をする
GraphQLのクライアントライブラリApolloを入れます
zsh
yarn add apollo-boost graphql react-apollo
userを取得して表示します
コードを書いてlocalhost:3000（CRAが起動しているポート）にアクセスすると、エラーになります
Gyazo
Chrome dev toolを見てみると、404になっています
Gyazo
localhostには /graphql というエンドポイントはないので、CRA側でハンドリングされて404になっています
React側にコードがない際にリクエストをLaravel側にproxyする設定を入れます
"proxy": "http://laravel-react.test/", # CRAがよしなにproxyしてくれる。APIリクエストはこのホストに飛ぶようになる
一度ローカルサーバを落としてから yarn run start 正常に表示されるようになりました
Gyazo


APIを本番環境で利用可能にする（HerokuでDBを作成し、接続設定をし、Seedingする）
作成したAPIをHerokuにデプロイしてみます。デプロイ自体は前述のとおりmasterブランチにコミットするだけです。
しかし、この状態でデプロイすると以下のようにエラーが表示されてしまいます。
Gyazo
HerokuのDBに接続できないのが原因です。LaravelからDBに接続するための設定をしていきます。

HerokuのDBを設定を接続する
HerokuはMySQLではなくPostgres。Addonを追加する
Gyazo
Heroku Postgresをクリックして、データベースのcredentialを確認する
Gyazo
ここにユーザー名やパスワードが記載されている
LaravelからDBに接続するために環境変数を追加する
zsh
heroku config:set -a YOUR_APP_NAME \
DB_CONNECTION=pgsql \
DB_HOST=上で確認したもの \
DB_PORT=上で確認したもの \
DB_DATABASE=上で確認したもの \
DB_USERNAME=上で確認したもの \
DB_PASSWORD=上で確認したもの

Heroku上でDBをマイグレーションする
zsh
$ heroku run bash -a kadoyau-laravel-react
Running bash on ⬢ kadoyau-laravel-react... up, run.1796 (Free)
~ $ php artisan migrate
**************************************
* Application In Production! *
**************************************
Do you really wish to run this command? (yes/no) [no]:
> yes
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table (0.03 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated: 2014_10_12_100000_create_password_resets_table (0.04 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated: 2019_08_19_000000_create_failed_jobs_table (0.02 seconds)

Seedingする
LaravelでDBにテストデータを入れる（とりあえず版）でSeederを作成しているので、次のコマンドでユーザを一人追加することができます
zsh
$ php artisan db:seed --class=UsersTableSeeder
**************************************
* Application In Production! *
**************************************
Do you really wish to run this command? (yes/no) [no]:
> yes
Database seeding completed successfully.

これで本番でもAPIの結果が表示されるようになりました。

CI環境を作ろう
Gyazo
ここをつくっていきます

CIではいろいろなことができますが、テストと静的解析をかけます
HerokuにもCIがあるのですが、無料枠で使えるCircleCIを使います

テストを追加する
CI環境で回すためにテスト
Laravelのデフォルトがすでにあるのでそれをつかいます

CircleCIの設定をする
CircleCIにログインして、プロジェクトをセットアップします（リポジトリを選ぶだけ）
Gyazo
CircleCIの設定のためにconfig.ymlを書いてGitHubにpushします

テストが通っていることが確認できます
Gyazo

静的解析をかけ、自動でレビューをしてもらおう
Larastan + reviewdog + CircleCIの設定をします
GitHubで、CIが落ちたらPRをマージできないようにします
Gyazo


以上で、当初の目的を達成できました。お疲れさまでした。

さらに開発していくためのTips
Reactの別のページを追加する方法
「Laravel側で常にindex.htmlしか返さないんだったら、それ以外のページを作るにはどうすれば？たとえば /about ページとかどう作るの？」とはじめてやったときに疑問に思いました
React Routerを使うと、クライアント側のJavaScriptででルーティングしてくれるようになります
GET / でも GET /about でもLaravelはindex.htmlを返すのですが、React Routerが適切にルーティングをしてくれます。
Vueにもこのようなライブラリが存在します

アプリケーションとしてユーザに公開する際に便利な設定も紹介しておきます
Herokuではドメインが割り当てられますが、わかりやすいドメインをとるのもいいかもしれません（必須ではありません）
静的なリソースをユーザに送るときには、CDNを使うと早く、かつサーバの負荷も軽減できます。さらにCDNの各種サービスのメリットを受けることができます

ローカル環境のLaravelのデバッグ
Laravel TelescopeはLaravelのローカル環境のデバッグにとても便利です。ぜひ入れましょう。

IDEとしてIntelliJ IDEAを使うと、次のような便利なことがあります
Homestead環境のDBにアクセスしたり
手元からhomestead環境でUnit testを回すことができるようになったり
保存時にコードフォーマットを整える
静的解析をかける
設定しておきましょう

監視

関連

Most related