Laravel6.0 + Laradock で laravel/ui を使ってBootstrap4を導入してAppEngineにデプロイしたメモ

## 概要
ビューを作成するにあたって、とりあえずbootstrapを入れてみた。
結構ハマったのでメモ。
ReactかVue.jsか、選択できるようだが、今はどちらが良いのだろうか。。

## 環境

* Windows 10 Home
* Vagrant 2.2.5
* virtualbox 6.0.12
* Ubuntu 18.04 LTS (Bionic Beaver)
* Docker version 19.03.2, build 6a30dfc
* docker-compose version 1.24.1, build 4667896b
* Laradoc 
* Laravel 6.0

## bootstapを導入。

以下コマンドで、workspaceコンテナ上で作業
```
./bin/bash.sh
```

6.0から標準ではインストールされないようなので別途インストール。

```
composer require laravel/ui --dev
```

bootstrapの準備。package.jsonなどができる。

```
php artisan ui bootstrap
```

パッケージのインストールをしたいが。。

```
npm install
```

以下のエラーで落ちた。

```
ENOENT: no such file or directory, open '/var/www/node_modules/yargs/node_modules/yargs-parser/package.json.2616725530'
```

[laradock と nuxt で開発環境構築](https://qiita.com/aoarashi/items/535feeca48d15516d450)をみると、同じく落ちているよう。

```
laradock@be06cfe4e524:/var/www$ npm --version
6.11.3
laradock@be06cfe4e524:/var/www$ node --version
v12.11.1
```

```
npm install -g npm@5.7.1
npm install
```

上記をしても解決しない。
原因が違う気がする。
そういえば、以前も、コンテナ上の npm install に失敗した覚えが。。
[npm install すると text file is busy となるエラー](https://qiita.com/hibohiboo/items/cbcff1faa9935671bc5a)
これを試してみる。

```diff:laravel_docker/laradock/workspace/Dockerfile
#
#--------------------------------------------------------------------------
# Final Touch
#--------------------------------------------------------------------------
#
+ # node_modulesを書き込む用のディレクトリをコンテナ内に用意
+ RUN mkdir -p /var/www/node_modules
+ RUN chmod 777 /var/www/node_modules

USER root
```

```diff:laravel_docker/laradock/docker-compose.yml
    volumes:
      - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}${APP_CODE_CONTAINER_FLAG}
+      - /var/www/node_modules # コンテナ内のnode_modulesを使用. npm install でエラーとなるため。
```

```
./bin/bash.sh
npm i
```

動いた！ こちらの原因は、 windows のファイルシステムだった模様。
npm install しているときの一時ファイルが深すぎたり、とかだろうか。

以下のコマンドで、取得したファイルのビルドなどを開始する。

```
npm run watch-poll
```

これによって作成されるバンドルファイルを、レイアウトファイルから読み込むなどする。

```diff:larabel_docker/whitemap/resources/views/layouts/app.blade.php
    <title>{{ config('app.name', 'Laravel') }} - @yield('title')</title>
    @yield('css')
+    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @yield('head-scripts')
    <!-- Google Tag Manager -->

// 省略
        </nav>
        @yield('content')
    </div>

    <!-- Scripts -->
+    <script src="{{ asset('js/app.js') }}"></script>
  </body>
</html>

```

[ここまでのソース](https://github.com/hibohiboo/whitemap/tree/587ffa617f70f62079c7e67191cc9fcba2e07870/laravel_docker)

これをGCPにあげてみる。

静的ファイルの場所をGCPの環境変数に追加。
[前回](https://qiita.com/hibohiboo/items/526566ffa007fe1ec84b)までだと、静的ファイルがなかったので設定されていなかった。

```diff:larabel_docker/whitemap/app.yaml
runtime: php72


+ handlers:
+   - url: /css
+     static_dir: public/css
+   - url: /js
+     static_dir: public/js
```

デプロイして確認。
bootstrapっぽい見た目にできた。

https://whitemap-255523.appspot.com/


## 参考

[Laravel6.0 で Vue.js と Bootstrap を使う方法](https://www.webopixel.net/php/1554.html)
[laravel frontend](https://laravel.com/docs/6.x/frontend)
[laravel/ui](https://github.com/laravel/ui)
[laradock と nuxt で開発環境構築](https://qiita.com/aoarashi/items/535feeca48d15516d450)
[Laravel5.5 インストールから Bootstrap4 を導入するまで](https://qiita.com/hondy12345/items/fef482c347b883acff84)
[Laravel Mix](https://readouble.com/laravel/6.0/ja/mix.html)
[【全 6 回】Laravel5.8 で Twitter っぽい SNS ツールを作る（第 1 回 DB 設計と Migration）](https://qiita.com/namizatop/items/d79017aa474966244073)
[Laravel 6.0 基本のタスクリスト](https://qiita.com/ucan-lab/items/36f6e89abad26a68f69a)
[gcp example](https://cloud.google.com/appengine/docs/standard/php7/config/appref#example)