search
LoginSignup
0
Help us understand the problem. What are the problem?

posted at

Laravel+Angular連携

初めに

前回「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通信をします。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0
Help us understand the problem. What are the problem?