初めに
前回「Angularの導入」ついての投稿よりAngularの導入方法を説明しております。
今回は、Laravel＋Angular連携についてご紹介したいと思います。
apache、PHP、MySQLのインストールは省略
firewall、SELinuxの設定も忘れずにしましょう。
ブラウザで見れない可能性があります。
Laravel＋Angular連携
Laravelに必要なものをインストールしていきます。
[Step1]Composerインストール
①composerダウンロード
wgetコマンドからcomposerをダウンロードしていきます。
▽コマンド
wget https://getcomposer.org/installer -O composer-installer.php
▽実行結果例
[root@localhost ~]# wget https://getcomposer.org/installer -O composer-installer.php
--2022-05-18 14:07:22-- https://getcomposer.org/installer
getcomposer.org (getcomposer.org) をDNSに問いあわせています... 54.36.53.46, 2001:41d0:302:1100::8:104f
getcomposer.org (getcomposer.org)|54.36.53.46|:443 に接続しています... 接続しま した。
HTTP による接続要求を送信しました、応答を待っています... 200 OK
長さ: 58140 (57K) [application/octet-stream]
`composer-installer.php' に保存中
100%[======================================>] 58,140 212KB/s 時間 0.3s
2022-05-18 14:07:24 (212 KB/s) - `composer-installer.php' へ保存完了 [58140/58140]
②Composerインストール
①でダウンロードしてきた Composer をインストールしてきます。
▽コマンド
php composer-installer.php --filename=composer --install-dir=/usr/local/bin
▽実行結果例
[root@localhost ~]# php composer-installer.php --filename=composer --install-dir=/usr/local/bin
All settings correct for using Composer
Downloading...
Composer (version 2.3.5) successfully installed to: /usr/local/bin/composer
Use it: php /usr/local/bin/composer
[Step2]Laravelインストール
Laravel を利用していくためにインストールします。
①ディレクトリに移動
Laravelをインストールしたいディレクトリに移動していきます。
[root@localhost ~]# cd /var/www/
②Laravelインストール
①でインストールしたいディレクトリに移動し composer でインストールしていきます。
今回はprojectというプロジェクト名でインストールしていきます。
▽コマンド
composer create-project --prefer-dist laravel/laravel {プロジェクト名}
▽実行結果例
[root@localhost www]# composer create-project --prefer-dist laravel/laravel project
Creating a "laravel/laravel" project at "./project"
Info from https://repo.packagist.org: #StandWithUkraine
Installing laravel/laravel (v8.6.12)
- Downloading laravel/laravel (v8.6.12)
- Installing laravel/laravel (v8.6.12): Extracting archive
Created project in /var/www/project
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 110 installs, 0 updates, 0 removals
- Locking asm89/stack-cors (v2.1.1)
-
・・・・・処理内容が流れます・・・・・・
Package manifest generated successfully.
77 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
No publishable resources for tag [laravel-assets].
Publishing complete.
> @php artisan key:generate --ansi
Application key set successfully.
エラーが出ずインストール処理が完了したら、
Laravelプロジェクトが作成されていることを確認しましょう。
[root@localhost www]# cd project/
[root@localhost project]# ls -al
合計 348
drwxr-xr-x. 12 root root 4096 5月 18 15:06 .
drwxr-xr-x. 5 root root 48 5月 18 15:06 ..
-rw-r--r--. 1 root root 258 4月 12 22:37 .editorconfig
-rw-r--r--. 1 root root 950 5月 18 15:07 .env
-rw-r--r--. 1 root root 899 4月 12 22:37 .env.example
-rw-r--r--. 1 root root 152 4月 12 22:37 .gitattributes
-rw-r--r--. 1 root root 207 4月 12 22:37 .gitignore
-rw-r--r--. 1 root root 194 4月 12 22:37 .styleci.yml
-rw-r--r--. 1 root root 3958 4月 12 22:37 README.md
drwxr-xr-x. 7 root root 82 4月 12 22:37 app
-rwxr-xr-x. 1 root root 1686 4月 12 22:37 artisan
drwxr-xr-x. 3 root root 34 4月 12 22:37 bootstrap
-rw-r--r--. 1 root root 1745 4月 12 22:37 composer.json
-rw-r--r--. 1 root root 290407 5月 18 15:06 composer.lock
drwxr-xr-x. 2 root root 4096 4月 12 22:37 config
drwxr-xr-x. 5 root root 74 4月 12 22:37 database
-rw-r--r--. 1 root root 473 4月 12 22:37 package.json
-rw-r--r--. 1 root root 1202 4月 12 22:37 phpunit.xml
drwxr-xr-x. 2 root root 77 4月 12 22:37 public
drwxr-xr-x. 6 root root 52 4月 12 22:37 resources
drwxr-xr-x. 2 root root 75 4月 12 22:37 routes
-rw-r--r--. 1 root root 569 4月 12 22:37 server.php
drwxr-xr-x. 5 root root 46 4月 12 22:37 storage
drwxr-xr-x. 4 root root 83 4月 12 22:37 tests
drwxr-xr-x. 44 root root 4096 5月 18 15:07 vendor
-rw-r--r--. 1 root root 559 4月 12 22:37 webpack.mix.js
③シンボリックリンクを設定
システムのストレージフォルダにシンボリックリンクを設定していきます。
システムからアップしたファイルなどをpublicフォルダから見れるように
シンボリックリンクを設定します。
[root@localhost project]# php artisan storage:link
[Step3]Angularインストール
①対象のディレクトリに移動
AngularのプロジェクトLaravelで作成作成したproject/resources配下に
インストールするためまずは対象のディレクトリに移動します。
[root@localhost resources]# cd /var/www/project/resources/
②Angularインストール
今回は「angular-app」というプロジェクトを作成いたします。
▽コマンド
ng new {プロジェクト名}
▽実行結果例
[root@localhost resources]# ng new angular-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE angular-app/README.md (1064 bytes)
・・・・・処理内容が流れます・・・・・・
CREATE angular-app/src/app/app.component.ts (215 bytes)
? Packages installed successfully.
Successfully initialized git.
Successfully となり完了したら、Angularプロジェクトが作成されていることを確認しましょう。
[root@localhost resources]# cd angular-app/
[root@localhost angular-app]# ls -al
合計 836
drwxr-xr-x 8 root root 329 5月 19 12:43 .
drwxr-xr-x. 8 root root 86 5月 19 12:37 ..
drwxr-xr-x 3 root root 19 5月 19 12:43 .angular
-rw-r--r-- 1 root root 600 5月 19 12:37 .browserslistrc
-rw-r--r-- 1 root root 274 5月 19 12:37 .editorconfig
drwxr-xr-x 8 root root 166 5月 19 12:38 .git
-rw-r--r-- 1 root root 548 5月 19 12:37 .gitignore
drwxr-xr-x 2 root root 66 5月 19 12:37 .vscode
-rw-r--r-- 1 root root 1064 5月 19 12:37 README.md
-rw-r--r-- 1 root root 3069 5月 19 12:37 angular.json
drwxr-xr-x 3 root root 25 5月 19 12:58 dist
-rw-r--r-- 1 root root 1428 5月 19 12:37 karma.conf.js
drwxr-xr-x 597 root root 20480 5月 19 12:43 node_modules
-rw-r--r-- 1 root root 776205 5月 19 12:38 package-lock.json
-rw-r--r-- 1 root root 1074 5月 19 12:37 package.json
drwxr-xr-x 5 root root 156 5月 19 12:37 src
-rw-r--r-- 1 root root 287 5月 19 12:37 tsconfig.app.json
-rw-r--r-- 1 root root 863 5月 19 12:37 tsconfig.json
-rw-r--r-- 1 root root 333 5月 19 12:37 tsconfig.spec.json
③ビルド
Angularが作成されているのを確認したらビルドを実行してみましょう。
▽コマンド
ng build
▽実行結果例
[root@localhost angular-app]# ng build
? Browser application bundle generation complete.
? Copying assets complete.
? Index html generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.02408d5469f596bd.js | main | 116.00 kB | 34.84 kB
polyfills.27aaeabf4f6b0771.js | polyfills | 33.02 kB | 10.62 kB
runtime.79d21f8bbc5382a8.js | runtime | 1.05 kB | 590 bytes
styles.ef46db3751d8e999.css | styles | 0 bytes | -
| Initial Total | 150.07 kB | 46.03 kB
Build at: 2022-05-19T03:43:45.103Z - Hash: 52a9d477f8ca8b2e - Time: 16008ms
※ビルドして生成された各ファイルのパス・名前を確認します。
初期状態では生成されるファイル名にランダム文字列が含まれます。
ランダム文字列を含まないようにするには「angular.json」の内容を以下のように変更します。
//"outputHashing": "all"
"outputHashing": "none" //outputHashingの値を「all」から「none」に
これでランダム文字列を含まないファイル名になります。
もう一度ビルドしてみましょう。
[root@localhost angular-app]# ng build
? Browser application bundle generation complete.
? Copying assets complete.
? Index html generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.js | main | 116.03 kB | 34.82 kB
polyfills.js | polyfills | 33.02 kB | 10.62 kB
runtime.js | runtime | 1.05 kB | 590 bytes
styles.css | styles | 0 bytes | -
| Initial Total | 150.10 kB | 46.01 kB
Build at: 2022-05-19T20:08:11.433Z - Hash: 8dcfb0fc1a288f0f - Time: 28596ms
ランダム文字列で表示されることがなくなりました。
④webpack.mix.jsを修正
project/の配下にあるwebpack.mix.jsにビルド・コンパイルした際の格納先を指定していきます。
[root@localhost project]# cd /var/www/project/
[root@localhost project]# vi webpack.mix.js
mix.js([
'resources/angular-app/dist/angular-app/runtime.js',
'resources/angular-app/dist/angular-app/styles.css',
'resources/angular-app/dist/angular-app/polyfills.js',
'resources/angular-app/node_modules/autoprefixer/lib/vendor.js',
'resources/angular-app/dist/angular-app/main.js'
], 'public/js/app.js');
⑤必要なパッケージをインストール
Laravelの作業フォルダでpackage.jsonをもとに、必要なパッケージをインストールします。
[root@localhost project]# npm install
⑥コンパイル
ビルドしたものをコンパイルしていきます。
▽コマンド
npm run dev
▽実行結果例
[root@localhost project]# npm run dev
> dev
> npm run development
> development
> mix
● Mix ????????????????????????? building (54%) 4/5 entries 13/13 dependencies 7/10 modules 3 active
node_modules/css-loader/dist/runtime/api.js
● Mix ????????????????????????? done (99%) plugins
WebpackBar:done
? Mix
Compiled successfully in 663.24ms
Laravel Mix v6.0.43
? Compiled Successfully in 658ms
+----------------------------------------------------------+---------+
| File | Size |
+----------------------------------------------------------+---------+
| /js/app.js | 340 KiB |
+----------------------------------------------------------+---------+
webpack compiled successfully
何もなければ正常にコンパイルが完了し、「File」に書かれている場所にjsファイルが生成されます。
[Step4]Laravel＋Angular連携
生成されたjsをLaravel側のviewに組み込みをしていきます。
Laravelのresources/views/welcome.blade.phpにAngularを組み込んでいきます。
[root@localhost project]# vi resources/views/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Laravel + Angular</title>
<meta charset="UTF-8">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="/js/app.js"></script> //追記
</body>
</html>
これで、Laravelの初期画面のかわりにAngularの初期画面が表示されるようになりました。
おわりに
ここまでが、Laravel＋Angular連携になります。
次回は、Laravel＋Angularでapi通信をします。