概要
ビューを作成するにあたって、とりあえず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 で開発環境構築をみると、同じく落ちているよう。
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 となるエラー
これを試してみる。
#
#--------------------------------------------------------------------------
# Final Touch
#--------------------------------------------------------------------------
#
+ # node_modulesを書き込む用のディレクトリをコンテナ内に用意
+ RUN mkdir -p /var/www/node_modules
+ RUN chmod 777 /var/www/node_modules
USER root
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
これによって作成されるバンドルファイルを、レイアウトファイルから読み込むなどする。
<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>
これをGCPにあげてみる。
静的ファイルの場所をGCPの環境変数に追加。
前回までだと、静的ファイルがなかったので設定されていなかった。
runtime: php72
+ handlers:
+ - url: /css
+ static_dir: public/css
+ - url: /js
+ static_dir: public/js
デプロイして確認。
bootstrapっぽい見た目にできた。
参考
Laravel6.0 で Vue.js と Bootstrap を使う方法
laravel frontend
laravel/ui
laradock と nuxt で開発環境構築
Laravel5.5 インストールから Bootstrap4 を導入するまで
Laravel Mix
【全 6 回】Laravel5.8 で Twitter っぽい SNS ツールを作る（第 1 回 DB 設計と Migration）
Laravel 6.0 基本のタスクリスト
gcp example