質問: 最終目標 ---- フロントエンド:Angular バックエンド:Laravel データベース:MySQL のアプリを開発しようと考えています。 その開発環境をDockerを用いて構築したいです。 アプリについての詳細 ---------- 基本的にはLaravelAdminを用いて大半の画面は作ろうと思っています。 HTML + css + Javascriptで特にAngular等のフレームワークは使用しません。 ただ、特定の機能のみAngularで開発しようと考えております。 その為、メニューのあるボタンを押したらブラウザの別タブで、ほぼ別アプリ(Angularで作ったSPA)が起動するイメージです。 ただ、処理のロジックはPHPにおまかせして、DBもAngularではない部分と同じものを使います。 開発環境についての詳細 ----------- エディタはVSCodeを使用予定です。 デバッグもVSCodeでできたらいいなと思っています。 わからないこと ------- 1AngularはフロントエンドのJavaScriptなので、普通に考えたらブラウザだけあれば動くような気もするのですが、調べているとnode.jsのイメージを使ったコンテナで環境構築をしている人が多いように思います。 これはAngularCLIを使いたい→npmが便利→node.jsが必要 ということで、node.jsのコンテナを立てているのでしょうか。 それとも、Angularアプリを動かすためにwebサーバやアプリケーションサーバが必要なのでしょうか? 2フロントエンドとバックエンドでコンテナを分けたほうが良いのでしょうか? もし1の質問の回答として「Angularアプリを動かすためにwebサーバやアプリケーションサーバが必要」なのであれば分けたほうがいいんだとは思うのですが、 その場合は、nginxのコンテナとPHPコンテナでLaravelやLaravelAdminで作った簡単な管理画面を動かして、 node.jsコンテナでAngularのSPAを動かす というイメージでよいでしょうか。 3Docker関係なしに、LaravelとAngularの組み合わせを調べていると、Laravelのresourcesディレクトリ内にAngularプロジェクトを導入しているパターンを結構見かけます。 コンテナを分ける場合はこのディレクトリ構成ではまずいのかな?と考えています。 理由としてはPHPコンテナにLaravelソースコードをマウントした際にAngularのSPAのソースコードも一緒にマウントされるようになるからです。 さらにnodeコンテナにもAngularのソースコードをマウントするようにしたら冗長になってしまうのはあまり綺麗ではないのかなと考えて居いるのですが、どうなのでしょうか。 AngularプロジェクトのディレクトリはLaravelの中に含めなくてもうまく連携できるのでしょうか。 以上、よろしくお願いいたします。
回答: > > 1Angularはフロントエンドの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が必要`ってことですね。 > > 2フロントエンドとバックエンドでコンテナを分けたほうが良いのでしょうか? > > > そもそもコンテナには1プロセスみたいな風潮(実際箱の限りではない)があるので 性格が違うコンテナは分けてlinkしたりnginxコンテナいれてリバースプロキシした方が良いです > > 3Docker関係なしに、LaravelとAngularの組み合わせを調べていると、Laravelのresourcesディレクトリ内にAngularプロジェクトを導入しているパターンを結構見かけます。 > > > 理由としてはPHPコンテナにLaravelソースコードをマウントした際にAngularのSPAのソースコードも一緒にマウントされるようになるからです。 > > > マウントしても構わないのでは? > > さらにnodeコンテナにもAngularのソースコードをマウントするようにしたら冗長になってしまうのはあまり綺麗ではないのかなと考えて居いるのですが、どうなのでしょうか。 > > > コピーされるわけではないし冗長ではないのでは? kawaxさんの言う通り、まずは単体ごとで理解を深めてからやってみてはどうでしょうか? 全体的に浅知恵だと、原因はどのミドルウェアか判別するだけで詰まると思います。