【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の環境構築
NPM ANGULAR CLIのインストール
参考：3. Documentation - Laradock
laradockの.envを編集する。
.env
WORKSPACE_INSTALL_NPM_VUE_CLI=false //trueからfalseに変更
WORKSPACE_INSTALL_NPM_ANGULAR_CLI=true //falseからtrueに変更
コンテナを再構築する。
laradock $ docker-compose build workspace
LaravelにAngularプロジェクトを導入
resourcesディレクトリ内にAngularプロジェクトを導入します。
project $ cd resources
resources $ npm install -g @angular/cli
resources $ ng new angular-project
resources $ cd angular-project
LaravelのAuth機能を導入
Auth機能は便利なので、ここで入れておきます。
参考：Laravel 6.0 で「make:auth」が利用できなくなったので、対応方法記載します。｜Koushi Kagawa 😊｜note
project $ composer require laravel/ui
project $ php artisan ui vue --auth
Angularのビルド先を変更
angular.jsonのoutputPathを変更して、Angularのビルド先を変更します。
angular.json
"outputPath": "../../public/dist" //編集
※ビルド先をpublicにしてしまうと、元のデータが上書きされて消えてしまうので気を付けてください。
Angularでビルドしたjsを集約させる
webpack.mix.js
mix.js(['public/dist/runtime.js',
'public/dist/styles.js',
'public/dist/polyfills.js',
'public/dist/vendor.js',
'public/dist/main.js'
], 'public/js/app.js')
念のために、Vue.jsの設定を削除しておく。
resources/js/app.js
-window.Vue = require('vue');
-Vue.component('example-component', require('./components/ExampleComponent.vue'));
-const app = new Vue({
- el: '#app'
-});
ビルドする
angular-project $ ng build
project $ npm install && npm run dev
blade.phpでAngularビューを表示させる
resources/views/home.blade.php
You are logged in!
<br />
<app-root></app-root>
<script type="text/javascript" src="/js/app.js"></script>
これでログインしたらAngularのビューが表示されます。
で、、、もしかしたら、ここでビューが表示されない場合があります汗
お急ぎのようでしたら、こちらの記事を参考に設定し直してみてください。
Angularビルドの出力先を変更していないのが問題かと思われます。
お急ぎでないようでしたら、次回の記事をご確認頂ければ、無事にAngularのビューが表示されると思います。
今後に向けて
とりあえず次で最後です。
次回は、Blade.phpを使わずにAngularビューを表示させることをします。
参考
素晴らしい記事に感謝いたします。
Laravel 6.0 で「make:auth」が利用できなくなったので、対応方法記載します。｜Koushi Kagawa 😊｜note
