Vite with Laravel

## 自己紹介

ナイル（株）メディアテクノロジー事業本部 開発マネージャ
工藤択斗 / 1990.09.01 / 北海道 / PCゲー廃人

- 2012年にエンジニアとして入社
- コンサルティング事業のアクセス解析ツールなどの開発に携わった後ナイルを退職
- 受託開発や起業、飲食店経営などを経験し2017年にナイルへ再入社
- 直近は電子コミック事業の立ち上げやアドテク事業の開発監修等

---

## 概要

Laravel実装のwebアプリケーション（と言っても何も実装されてない）のフロントアセットをlaravel mixからviteでの管理へ置き換えてみました。
その際、参考にした資料や具体的な手順について紹介します。

---

## 参考資料

- https://vitejs.dev/guide/backend-integration.html
- https://sebastiandedeyne.com/vite-with-laravel/

---

## Laravel Vite

![スクリーンショット 2021-06-12 11.43.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/5d899647-078c-aab7-ba6f-7a8e6a34c772.png)
https://laravel-vite.innocenzi.dev/

---

## package.json

```package.json
{
    "private": true,
    "scripts": {
        "dev": "vite serve",
        "prod": "vite build",
        "serve": "vite preview"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^1.2.3",
        "@vue/compiler-sfc": "^3.0.5",
        "vite": "^2.3.7"
    },
    "dependencies": {
        "axios": "^0.21.1",
        "lodash": "^4.17.21"
    }
}

```

---

## Viteの設定

```vite.config.js
export default ({ command }) => ({
    // serveで起動する開発サーバはoutDirを参照しないのでオーバーライドしない
    base: command === 'serve' ? '' : '/build/',
    // 指定したDirのファイルをoutDirにコピーしちゃうので存在しないDirを指定
    publicDir: 'no_need',
    build: {
        // manifest.jsonを生成してlaravelがアセットのパスやファイル名を探せるように
        manifest: true,
        // laravelのpublicディレクトリに出力する
        outDir: 'public/build',
        rollupOptions: {
            // スタイルはapp.jsの中でimportする
            input: 'resources/js/app.js',
        },
    },
});
```

![スクリーンショット 2021-06-06 22.22.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/06df9c90-4203-58e8-2f65-c13dcd9b7e14.png)
![スクリーンショット 2021-06-06 22.21.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/b88c3bff-37e6-32a2-cd40-f6da59a8ede1.png)

---

## Laravelの設定（簡易）

![スクリーンショット 2021-06-12 19.42.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/caa73698-c301-c41c-b83e-9f6f969f3f60.png)

---

## Laravelの設定（ディレクティブ）

```AppServiceProvider.php
public function boot()
{
    if ($this->app->environment() == 'production') {
        URL::forceScheme('https');
    }
    Blade::directive('vite', function() {
        if ($this->app->environment() === 'production') {
            $manifest = json_decode(file_get_contents(public_path('build/manifest.json')), true);
            return <<<script
                <script type="module" src="/build/{$manifest['resources/js/app.js']['file']}"></script>
                <link rel="stylesheet" href="/build/{$manifest['resources/js/app.js']['css'][0]}">
            script;
        }
        return <<<script
            <script type="module" src="http://localhost:3000/@vite/client"></script>
            <script type="module" src="http://localhost:3000/resources/js/app.js"></script>
        script;
    });
}
```

![スクリーンショット 2021-06-12 20.22.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/919a23b6-7081-9d6e-669e-b4d57cb9387b.png)

![スクリーンショット 2021-06-12 20.23.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/ace98f3c-2136-765e-ad5e-5dc350cb5e30.png)

---

## Vue.jsでカウンター実装

![スクリーンショット 2021-06-13 11.30.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/e572dff3-5a9c-c16c-82c9-5027050847c6.png)

![スクリーンショット 2021-06-14 13.43.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/55bca530-f44e-9d7c-9127-3ad43ff17585.png)

![スクリーンショット 2021-06-14 13.44.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/74c5f429-230b-e534-fef9-88e529298f4b.png)

![スクリーンショット 2021-06-14 13.48.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/3e45b6e0-1b46-1289-3aab-6a858545f3ca.png)

![画面収録-2021-06-14-13.56.28.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/d90d65c8-f724-3a63-f969-6f8264031227.gif)

---

## build & deploy

https://aws.amazon.com/jp/apprunner/

https://qiita.com/ta9to/items/96d27e4cfd5393a4cf51

![スクリーンショット 2021-06-16 15.18.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192321/6475c63a-57a9-c450-64d7-a77ffb6283b4.png)

```zsh
$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin ****.dkr.ecr.ap-northeast-1.amazonaws.com/ta9to
$ docker build -t ta9to:1.0 .
$ docker tag ta9to:1.0 ****.dkr.ecr.ap-northeast-1.amazonaws.com/ta9to:1.0
$ docker push ****.dkr.ecr.ap-northeast-1.amazonaws.com/ta9to:1.0
```

https://www.ta9to.com/