はじめに
なかなかdockerでlaravelとvueの環境構築がうまくいかなかったのですが、
次を参考にやっと環境ができたので備忘録として残しておきます。
また、docker初心者のため色々間違えているかもしれませんがご了承ください。
docker laravel viteの環境構築はこちらを参考にしました。
①Laravel 9 + VITEの開発環境をdockerで実現する方法
Vue3の導入はこちら
②【Laravel】Vue.js v3導入とComposition API実装【Vite】
以下①、②と省略します
作成手順とこの記事の内容
先に①でvue以外の環境を構築しました。
次に②を参考にVueをインストールしてComposition APIを使い動作確認しました。
手順通りに行いすんなり環境ができました。
しかし結構エラーはでたので、
エラーの対処や①を先に作った後どの手順で②を構築したかをメインに紹介していきます。
docker laravel viteの環境構築時に起きたエラー
エラー対処メインなのでプロジェクトフォルダの内容は①をご覧ください。
dockerビルドでエラー
初めのエラーのログ内容はこちら
no matching manifest for linux/arm64/v8 in the manifest list entries
テキトーに調べ、こちらを参考に docker-compose.ymlのMySQLの箇所に以下を追加。
platform: linux/amd64
色々初心者なのでarm64だと何かと環境構築でコケます。
dockerビルド後のエラー
次のエラーはnjinxが起動してくれないことです。
ログはこちら
nginx: [emerg] open() "/src/docker/nginx/logs/access.log" failed (20: Not a directory)
ファイルがないっぽいのでdocker配下のnginx/logs/の中を見ると確かに何もログファイルがありませんでした。
とりまnginxのdefault.confを見にいくと
server {
省略
access_log /src/docker/nginx/logs/access.log;
error_log /src/docker/nginx/logs/error.log;
省略
}
確かにエラーログ設定してましたね。
調べたらログ系の箇所をコメントアウトしている人が多かったのですが、
これファイル作ったらいけそーちゃう？と思ったのでaccess_logとerror_logを作って
docker/nginx/log/に配置。
そしてdockerをもう一回起動するとnginxちゃん動きました！
composerインストールできない
お次のエラーログ、composerさんをインストールした際に
Could not delete /src/vendor:
、、、消せなかったんやなと思い、該当箇所のvenderフォルダを消したらいけた⭐︎
その次もエラーは出たのですが、忘れました。。
すでに何かがインストールされてますみたいなエラーだったので、該当箇所をまた削除して無事laravelインストール成功☆
npmコマンドでpermission denied
Laravelインストールまで完了したのでChromeでhttp://localhostにアクセスすると
laravelの初期画面が表示されるようになりました。
次はviteの環境構築ですが、
phpのコンテナ内でnpm installを実行しnpmをインストール。
\resources\views\welcome.blade.phpの</head>の前の行に
@vite(['resources/css/app.css', 'resources/js/app.js'])
を追加し、viteを起動するためnpm run devを実行するとpermission deniedです。なぜなぜと思い、調べましたが、再インストールでいけそー。参考はこちら
npm install -g npm
このコマンドで再インストール。
npm install実行後、http://localhostにアクセス。
すると無事画面が表示されました。あとは①の記事通りに設定し、viteまで環境構築完了。
エラーは主にLaravel Viteの環境構築時のみでVueの設定をするときはエラーは出ませんでした。
Vueの設定
②の記事ではsailコマンドを使っていますが、私はsailで環境構築していませんのでsailを抜いてコマンド実行してます。
Laravelや、npmをインストールしたコンテナ内でViteのプラグインのVue3をインストールするために以下のコマンド実行。
npm i @vitejs/plugin-vue
package.jsonにvueが追加されていると思います。
{
..
"dependencies": {
"@vitejs/plugin-vue": "^*.*.*",
}
}
あとは②の記事に従ってvite.config.jsを修正し再びlocalhostを覗き検証ツールを開くと
[Vue warn]が表示されたらVueの設定はできていると思います。
あとは②の記事通りサンプルコードを作成し、localhostでサンプルコードが画面が表示できれば完成です。
おわりに
結構エラーはでたので、すんなりではないな？と思いましたが、前に環境構築した時はDBだけ起動しなかったり、nginxがどうやっても起動しなかったり、、、
今回は調べたら全部か解決できたのでだいぶ楽に環境作れました！
そういえばDBの動作確認をしていないので、
次はマイグレーションやらシーダーやらをちょっと作ってDBを動かしていきたいと思います。
DBがちゃんと動いたらでVueのcomponentを使ってMPAも作りたいのでぼちぼちやっていこうかと思ってます。
最後までご閲覧いただきありがとうございました。
少しでもお役に立てれば光栄です。