【M1 mac】docker × Laravel9 × Vue3 × Vite環境構築エラー対処まとめ

# はじめに
なかなかdockerでlaravelとvueの環境構築がうまくいかなかったのですが、
次を参考にやっと環境ができたので備忘録として残しておきます。
また、docker初心者のため色々間違えているかもしれませんがご了承ください。


docker laravel viteの環境構築はこちらを参考にしました。
[①Laravel 9 + VITEの開発環境をdockerで実現する方法](https://qiita.com/hitotch/items/aa319c49d625c2a9b65e)
Vue3の導入はこちら
[②【Laravel】Vue.js v3導入とComposition API実装【Vite】](https://chigusa-web.com/blog/laravel-vue3-vite/)
以下①、②と省略します

## 作成手順とこの記事の内容
先に①でvue以外の環境を構築しました。
次に②を参考にVueをインストールしてComposition APIを使い動作確認しました。
手順通りに行いすんなり環境ができました。
しかし結構エラーはでたので、
エラーの対処や①を先に作った後どの手順で②を構築したかをメインに紹介していきます。

## docker laravel viteの環境構築時に起きたエラー
エラー対処メインなのでプロジェクトフォルダの内容は①をご覧ください。

### dockerビルドでエラー

初めのエラーのログ内容はこちら
```
no matching manifest for linux/arm64/v8 in the manifest list entries
```
テキトーに調べ、[こちら](https://zenn.dev/marumarumeruru/articles/55173a98863d4e)を参考に `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`を見にいくと

```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です。なぜなぜと思い、調べましたが、再インストールでいけそー。[参考はこちら](https://qiita.com/okohs/items/ced3c3de30af1035242d)
```
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`を覗き検証ツールを開くと
![スクリーンショット 2023-07-09 11.32.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3020721/15c09b3a-13e3-3094-a480-8e90a0f94a1e.png)
`[Vue warn]`が表示されたらVueの設定はできていると思います。

あとは②の記事通りサンプルコードを作成し、`localhost`でサンプルコードが画面が表示できれば完成です。

# おわりに
結構エラーはでたので、すんなりではないな？と思いましたが、前に環境構築した時はDBだけ起動しなかったり、nginxがどうやっても起動しなかったり、、、
今回は調べたら全部か解決できたのでだいぶ楽に環境作れました！

そういえばDBの動作確認をしていないので、
次はマイグレーションやらシーダーやらをちょっと作ってDBを動かしていきたいと思います。
DBがちゃんと動いたらでVueのcomponentを使ってMPAも作りたいのでぼちぼちやっていこうかと思ってます。

最後までご閲覧いただきありがとうございました。
少しでもお役に立てれば光栄です。