1. Laravelのインストール

今回はDocker環境でLaravelを実行していきたいと思います。

$ mkdir contact_app
$ cd contact_app
$ curl -LO https://raw.githubusercontent.com/bitnami/bitnami-docker-laravel/master/docker-compose.yml
$ docker-compose up
Creating contact_app_mariadb_1 ... done
Creating contact_app_myapp_1   ... done

これでサーバーが立ち上がったみたいです。

Dockerってやっぱりめちゃくちゃ便利ですね。

では動作確認です。

localhost:3000

正常にLaravelのデフォルトサイトが表示されました。

データベースの方も確認しておきましょう。

$ docker-compose exec mariadb  mysql --version
mysql  Ver 15.1 Distrib 10.6.4-MariaDB, for Linux (x86_64) using readline 5.1

ちゃんと動いてるみたいです。

2. バージョン管理

GitHubにレポジトリを作成しました。

$ git init
Initialized empty Git repository in /Users/user_name/projects/contact_app/.git/

$ git status
On branch main

No commits yet

Untracked files:
 (use "git add <file>..." to include in what will be committed)
	.editorconfig
	.env.example
	.gitattributes
	.gitignore

....................... 中略 .......................

	webpack.mix.js

nothing added to commit but untracked files present (use "git add" to track)

$ git add .

$ git status
On branch main
No commits yet
Changes to be committed:
 (use "git rm --cached <file>..." to unstage)
	new file:   .editorconfig
	new file:   .env.example
	new file:   .gitattributes
	new file:   .gitignore

....................... 中略 .......................

	new file:   webpack.mix.js

git commit -m "first commit"
[main (root-commit) 5c2ed37] first commit
86 files changed, 11299 insertions(+)
create mode 100644 .editorconfig
create mode 100644 .env.example
create mode 100644 .gitattributes
create mode 100644 .gitignore

....................... 中略 .......................

create mode 100644 webpack.mix.js

$ git branch -M main
$ git branch
* main

$ git remote add origin https://github.com/Yokota0204/contact_app.git
$ git push -u origin main
Enumerating objects: 111, done.
Counting objects: 100% (111/111), done.
Delta compression using up to 8 threads
Compressing objects: 100% (92/92), done.
Writing objects: 100% (111/111), 72.75 KiB | 3.83 MiB/s, done.
Total 111 (delta 7), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (7/7), done.
To https://github.com/Yokota0204/contact_app.git
* [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

これで最初のコミットが完了しました。

#3. ライブラリのインストール

次に使いたいライブラリをダウンロードします。

この動きのあるフォント使った見たかったんですよ✨

Twitter見てたらたまたまウェブ制作の方が使っている動画を見つけてしまって、それ以来ずっと気になっていました。

ということでローカルにクローンしていきます。

$ git clone https://github.com/cmiscm/leonsans.git
Cloning into 'leonsans'...
remote: Enumerating objects: 278, done.
remote: Total 278 (delta 0), reused 0 (delta 0), pack-reused 278
Receiving objects: 100% (278/278), 11.20 MiB | 296.00 KiB/s, done.
Resolving deltas: 100% (116/116), done.

あとはBootstrapもインストールしておけば、デザインで便利かなと思います。

BootstrapはLaravelが推奨しているcomposerコマンドでインストールしてみましょうか。

こちらのサイトを参考にさせていただきました。

まずlaravel/uiというのをインストールしないといけないみたいです。

$ docker-compose run myapp composer require laravel/ui
Creating contact_app_myapp_run ... done
Welcome to the Bitnami laravel container
Subscribe to project updates by watching https://github.com/bitnami/bitnami-docker-laravel
Submit issues and feature requests at https://github.com/bitnami/bitnami-docker-laravel/issues
Using version ^3.3 for laravel/ui
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
 - Locking laravel/ui (v3.3.2)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
As there is no 'unzip' nor '7z' command installed zip files are being unpacked using the PHP zip extension.
This may cause invalid reports of corrupted archives. Besides, any UNIX permissions (e.g. executable) defined in the archives will be lost.
Installing 'unzip' or '7z' may remediate them.
 - Downloading laravel/ui (v3.3.2)
 - Installing laravel/ui (v3.3.2): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/sail
Discovered Package: laravel/sanctum
Discovered Package: laravel/tinker
Discovered Package: laravel/ui
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
78 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
No publishable resources for tag [laravel-assets].
Publishing complete.

次にbootstrapの枠組みをインストールします。

$ docker-compose run myapp php artisan ui bootstrap
Creating contact_app_myapp_run ... done
Welcome to the Bitnami laravel container
Subscribe to project updates by watching https://github.com/bitnami/bitnami-docker-laravel
Submit issues and feature requests at https://github.com/bitnami/bitnami-docker-laravel/issues
Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

次にメッセージにあるように、npmコマンドでコンパイルが必要みたいです。

$ docker-compose run myapp npm install && npm run dev
Creating contact_app_myapp_run ... done
Error: You are using an unsupported version of Node. Please update to at least Node v12.14
   at assertSupportedNodeVersion (/Users/user_name/projects/contact_app/node_modules/laravel-mix/src/Engine.js:6:15)
 --------------------------- 以下、略。  ---------------------------

エラー文は大部分をはしょりましたが、nodeのバージョンが違うみたいなエラーですね。

エラー文的にローカルにインストールされているnodeのことを言ってそうです。

バージョン確認してみます。

まずはDockerのコンテナの方から見てみましょう。

$ docker-compose run myapp node --version
Creating contact_app_myapp_run ... done
v14.18.1

コンテナの方は14.18.1のバージョンみたいです。

さっきのエラーメッセージは最低でも12.14にアップデートが必要って言っていたので、やっぱりローカルの方でしょう。

ローカルの方を見てみましょう。

$ node --version
v12.12.0

予想通り、12.14よりも前のバージョンです。

ローカルのnode.jsをv14.18.1にアップデートします。

ここからインストーラをダウンロードして、Mac版をインストールしていきます。

※ちなみにこの記事を書いている時点で、node.jsのバージョンは16系が最新みたいです。
今回はDockerのLaravelにインストールされているバージョンに合わせました。

スクショ撮るの忘れてましたが、インストールしました。

$ node --version
v14.18.1

ちゃんとインストールできてますね。

では、改めてコンパイルしていきましょうか。

$ docker-compose run myapp npm install && npm run dev
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

audited 763 packages in 9.105s

81 packages are looking for funding
 run `npm fund` for details

found 0 vulnerabilities


> @ dev /Users/user_name/projects/contact_app
> npm run development


> @ development /Users/user_name/projects/contact_app
> mix

	Additional dependencies must be installed. This will only take a moment.

	Running: npm install resolve-url-loader@^4.0.0 --save-dev --legacy-peer-deps

	Finished. Please run Mix again.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user_name/.npm/_logs/2021-11-11T08_07_29_747Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user_name/.npm/_logs/2021-11-11T08_07_29_773Z-debug.log

さっきのエラーはなくなりましたが、またエラーが出てますね。

さっきは略しましたが、実は最初のときも同じエラーが出ていました。

エラー文を一つずつ見てみます。

	Additional dependencies must be installed. This will only take a moment.
→Google翻訳「追加の依存関係をインストールする必要があります。」。
→「なにかのパッケージで依存しているパッケージをさらにインストールしてください」ということでしょう。

	Running: npm install resolve-url-loader@^4.0.0 --save-dev --legacy-peer-deps
→なんか自動的にインストールしてくれているみたいですね。

	Finished. Please run Mix again.
→完了して「Mix」というのをもう一度実行してください。といってますね。
「mix」と実行すればいいのかな？
ググってみよう。

ググったらこちらの記事が出てきたので参考にしてみました。

どうやら既にパッケージをインストールしているのに「npm install && npm run dev」と２つのコマンドを一緒に実行していたからみたいですね。

なのでコンパイルだけをするために「npm run dev」を単体で実行してあげればうまくいくとのことです。

$ docker-compose run myapp npm run dev
Creating contact_app_myapp_run ... done

   Laravel Mix v6.0.39


✔ Compiled Successfully in 8277ms
┌────────────────────────┐
│　　　　 　　　　   File │ Size     │
├────────────────────────┤
│  /js/app.js │ 2.93 MiB │
│ css/app.css │ 178 KiB  │
└────────────────────────┘
webpack compiled successfully

※メッセージは横長で見にくかったので、手を加えて短くしてます。

とりあえずうまくいったみたいです。

これでBootstrapのインストールは完了です。

ビュー側でapp.cssを読み込んで動作確認したらちゃんとCSSが適用されていたので、うまくいったみたいです。