1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

Vite with Laravel

Vite with Laravel

by ta9to
1 / 11

自己紹介

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

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

概要

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


参考資料


Laravel Vite

スクリーンショット 2021-06-12 11.43.36.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
スクリーンショット 2021-06-06 22.21.30.png


Laravelの設定(簡易)

スクリーンショット 2021-06-12 19.42.03.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

スクリーンショット 2021-06-12 20.23.52.png


Vue.jsでカウンター実装

スクリーンショット 2021-06-13 11.30.39.png

スクリーンショット 2021-06-14 13.43.18.png

スクリーンショット 2021-06-14 13.44.47.png

スクリーンショット 2021-06-14 13.48.59.png

画面収録-2021-06-14-13.56.28.gif


build & deploy

スクリーンショット 2021-06-16 15.18.00.png

$ 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?