Angular + Laravel + MySQLの開発環境

Question

##最終目標
フロントエンド：Angular
バックエンド：Laravel
データベース：MySQL
のアプリを開発しようと考えています。
その開発環境をDockerを用いて構築したいです。

##アプリについての詳細
基本的にはLaravelAdminを用いて大半の画面は作ろうと思っています。
HTML + css + Javascriptで特にAngular等のフレームワークは使用しません。

ただ、特定の機能のみAngularで開発しようと考えております。
その為、メニューのあるボタンを押したらブラウザの別タブで、ほぼ別アプリ(Angularで作ったSPA)が起動するイメージです。
ただ、処理のロジックはPHPにおまかせして、DBもAngularではない部分と同じものを使います。

##開発環境についての詳細
エディタはVSCodeを使用予定です。
デバッグもVSCodeでできたらいいなと思っています。

##わからないこと
①AngularはフロントエンドのJavaScriptなので、普通に考えたらブラウザだけあれば動くような気もするのですが、調べているとnode.jsのイメージを使ったコンテナで環境構築をしている人が多いように思います。
これはAngularCLIを使いたい→npmが便利→node.jsが必要
ということで、node.jsのコンテナを立てているのでしょうか。
それとも、Angularアプリを動かすためにwebサーバやアプリケーションサーバが必要なのでしょうか？

②フロントエンドとバックエンドでコンテナを分けたほうが良いのでしょうか？
もし①の質問の回答として「Angularアプリを動かすためにwebサーバやアプリケーションサーバが必要」なのであれば分けたほうがいいんだとは思うのですが、
その場合は、nginxのコンテナとPHPコンテナでLaravelやLaravelAdminで作った簡単な管理画面を動かして、
node.jsコンテナでAngularのSPAを動かす
というイメージでよいでしょうか。

③Docker関係なしに、LaravelとAngularの組み合わせを調べていると、Laravelのresourcesディレクトリ内にAngularプロジェクトを導入しているパターンを結構見かけます。

コンテナを分ける場合はこのディレクトリ構成ではまずいのかな？と考えています。
理由としてはPHPコンテナにLaravelソースコードをマウントした際にAngularのSPAのソースコードも一緒にマウントされるようになるからです。
さらにnodeコンテナにもAngularのソースコードをマウントするようにしたら冗長になってしまうのはあまり綺麗ではないのかなと考えて居いるのですが、どうなのでしょうか。
AngularプロジェクトのディレクトリはLaravelの中に含めなくてもうまく連携できるのでしょうか。

以上、よろしくお願いいたします。

Answer 1

①AngularはフロントエンドのJavaScriptなので、普通に考えたらブラウザだけあれば動くような気もするのですが、調べているとnode.jsのイメージを使ったコンテナで環境構築をしている人が多いように思います。

これはAngularCLIを使いたい→npmが便利→node.jsが必要
ということで、node.jsのコンテナを立てているのでしょうか。
それとも、Angularアプリを動かすためにwebサーバやアプリケーションサーバが必要なのでしょうか？

まず、ES6とかPromise、アロー関数 とかご存知でしょうか？
これらは古いブラウザ（特にIE/Safari）とかでは動きません。
古いブラウザでも動くようにするために、古いJSに書き換えないといけません。
そのためによく使われるのがbabelです。babelはnodejsのパッケージです。
また、複数のJSファイル(moduleとかcompnentでファイル別れてますよね？)を1個に統合してダウンロードさせる方が良いという風潮があり、これを行うwebpackやrollupを使うのですが、これもnodejsのパッケージです。
他にも、sassやscss、postcssなど聞いた事ありませんか？これらのaltcssを普通のcssに変換するにもnodejsのパッケージが必要です。
まとめるとブラウザで動かすjsでも、それをコンパイルするためにnodejsが必要ってことですね。

②フロントエンドとバックエンドでコンテナを分けたほうが良いのでしょうか？

そもそもコンテナには1プロセスみたいな風潮（実際箱の限りではない）があるので
性格が違うコンテナは分けてlinkしたりnginxコンテナいれてリバースプロキシした方が良いです

③Docker関係なしに、LaravelとAngularの組み合わせを調べていると、Laravelのresourcesディレクトリ内にAngularプロジェクトを導入しているパターンを結構見かけます。

理由としてはPHPコンテナにLaravelソースコードをマウントした際にAngularのSPAのソースコードも一緒にマウントされるようになるからです。

マウントしても構わないのでは？

さらにnodeコンテナにもAngularのソースコードをマウントするようにしたら冗長になってしまうのはあまり綺麗ではないのかなと考えて居いるのですが、どうなのでしょうか。

コピーされるわけではないし冗長ではないのでは？

---

kawaxさんの言う通り、まずは単体ごとで理解を深めてからやってみてはどうでしょうか？
全体的に浅知恵だと、原因はどのミドルウェアか判別するだけで詰まると思います。

Answer 2

プログラミングは段階を踏んで学習していくしかないので
「Angular単体で覚える」「Laravel単体で覚える」
両方やれば組み合わせる方法は自分で分かる。
Dockerはいらないので無視していい。

AngularとLaravelの「半年ごとにメジャーバージョンアップ」なんて狂気に本当についていけるかを先によく考えたほうがいいけど。
Laravelの標準はVue。ここ数年Laravelが普及したのはVue側に大きな変化がなかったから。
Angular+Laravelはたぶん死ぬ。

Comments

[mikkame]

LaravelとVueが特段相性が良いわけではないと思います。
Vue/Angularどちらもやりますが
結局繋がる部分はAPIだけですからね