大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

【Angular × Laravel 連携・環境構築④】Angularのビューを表示させるまで【全4回】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

背景

バックエンドにLaravel、フロントエンドにAngularを使った開発の知識をさらに深めるために、実際に独自でLaravel×Angularのアプリを開発することにしました。

 

案の定、環境構築の部分で時間が取られたので、ブログにまとめておきたいと思います。

 

内容が少し多いので、4回に分けて投稿していきます。

 

概要

以下の手順で環境構築を行います。

・第1回 LaradockでDocker内にLaravelの環境構築を行う
・第2回 LaravelのコンテナとMySQLのコンテナを接続する
・第3回 フロントエンドにAngularを導入する
・第4回 LaravelのBlade.phpを使わずにAngularビューを表示させる

 

環境は以下の内容で構築します。

・Docker
・Laravel 6.5.1
・Angular 8.0.0
MySQL 5.7 ※最新版8.0は使ったことがないので、慣れている5.7を使いました

 

Laravel×Angularの環境構築

前回でblade.phpを使ってAngularのビューを表示させました。

今回は、blade.phpを使わずにAngularのビューを表示させようと思います。

 

welcome.blade.phpを編集

welcome.blade.php

<a href="{{ url('/home') }}">ホーム</a>
<a href="{{ url('/test') }}">テスト</a> //追加

 

routeを作成

web.phpにtestのrouteを追加します。 

web.php

Route::get('/test', PageController::class . '@index' );

 

PageControllerを作成

Contorollerの作成方法は割愛します。

Http/Contorollers/PageController.php/index

public function index()
{
return app('files')->get(public_path('dist/index.html'));
}

 

index.htmlのBase要素を変更

最後にビルド前のindex.htmlのBase要素を変更します。

 

Base要素のhref属性値が「/」のままだと、リソースなどをドキュメントルートからのパスで読み込もうとするため、ファイルが見つからずエラーになります。

つまり、bodyのscript要素がファイルを見つけることができず、consoleで404エラーとして返ってきます。

 

src/index.html

<base href="/dist/"> //"/"から"/dist/"に変更

Base要素のpathを変更することで、ビルド出力先のpublic/dist/index.htmlのBase要素もしっかりと変更されます。

 

これで、ホーム画面のheaderからテストをクリックすると、blade.phpを使わずにindex.html(Angularビュー)が表示されていると思います。

 

今後に向けて

思い出しながら書いたので、間違っているところが多々あるかもしれません。

間違っているところは、ご指摘いただけると助かります。

 

今後は、routerでによって呼び出すコンポーネントを変更したいと思っています。

 

恐らく、app.component.tsでtemplateを「`<outlet-router></outlet-router>`」に変更したらできるのではないかなと憶測は立てています。

 

記事にできるかは分かりませんが、その辺りの学習を今後は進めていきます。

 

参考

素晴らしい記事に感謝いたします。

Angular CLIでサブディレクトリにビルドする方法 – APOC

LaravelでAngularを使うには? - Qiita