Laravel × Vue CLI를 이용한 환경 구축 방안을 생각해 보았습니다.

소개

전직 후, Laravel과 Vue를 만지는 기회가 많아졌습니다.
Laravel은 프런트 엔드의 개발이 쉽도록 Laravel Mix의 구조가 준비되어 있습니다.
지금까지는 이쪽을 이용하여 Vue, React 등을 Laravel에 통합했습니다.
이번 Vue CLI의 병아리를 그대로 사용하고 싶어 그 환경을 구축해 보았으므로 정리해 둡니다.

이번 방법에서는 Vue CLI의 병아리를 이용할 수 있는 것 이외에도 다음과 같은 이점을 들 수 있습니다.

・프런트 엔드 엔지니어가 Laravel을 의식하지 않고 개발할 수 있다
・Laravel Mix가 대응하고 있지 않기 때문에, Vue CLI의 새로운 기능을 사용할 수 없다는 것이 없어진다
・백엔드에 Laravel을 이용하지 않게 된 경우에도 대응할 수 있다
향후 변화에 대비하여 프런트 엔드가 Laravel에 의존하지 않도록 환경을 만들고 싶다! ! 단지 흥미 본위로 해 보았다는 것도 있다,,,

목표로 하는 구성

docker-laravel/
├─ docker-compose.yml 
├─ backend/ .......... Laravelコード
│  ├─ app/
│  ├─ bootstrap/
│  ├─ config/
│  ├─ database/
│  ├─ public/
│  │  ├─ docker-laravel/
│  ├─ resources/
│  │  └─ views/ .......... spa/app.blade.phpが作成される
│  ├─ routes/
│  ├─ storage/
│  ├─ tests/
│  └─ vendor/
├─ frontend/
│  ├─ // Vue.jsのコードを格納    
└─ infra/
   └─ docker/

frontend 디렉토리가 Vue CLI의 프로젝트입니다.
frontend 디렉토리에서 npm run build를 실행하면 resources/views/spa/app.blade.php가 만들어지고 화면이 그려집니다.

Laravel 준비

이번은 Laravel 환경의 준비는 본제가 아니기 때문에, 이쪽을 이용하겠습니다.

이대로 진행하면 backend 디렉토리 아래에 Laravel 앱이 생성됩니다.
백엔드 측 준비는 이상으로 완료됩니다.
만약을 위해, 이 단계에서 Laravel의 welcome 화면이 표시되는 것을 확인해 둡시다.

앞면 준비

Vue CLI 설치

Vue.js 를 사용하는 환경을 준비하기 위한 커멘드 라인 인터페이스를 인스톨 합니다.

$ npm install -g @vue/cli

// 完了後バージョンが表示されればOK
$ vue --version
@vue/cli 4.5.13

Vue CLI로 프런트 엔드 앱의 병아리 만들기

루트 디렉토리에서 vue-cli 명령을 사용하여 vue3을 설치합니다. 이번에는 Vue3, TypeScript의 조합으로 이용합니다.
이쪽도 본제가 아니므로 링크를 참고로 준비해 주세요.

Laravel Mix 파일 삭제

이번 환경에서는 Laravel Mix를 이용하지 않기 때문에 불필요한 파일은 삭제해 둡니다.

$ cd backend
$ rm -rf package.json webpack.mix.js

Vue 앱을 라라벨로 전송

현재의 구성이라면 frontend 디렉토리의 Vue 앱과 backend 디렉토리의 Laravel 앱이 2개 존재하는 상태입니다.npm run build 를 실행하면 blade의 출력과 자산이 Laravel 이하로 출력되도록 설정합니다.

Vue.config.js 만들기

$ cd frontend
$ touch vue.config.js

vue.config.js

module.exports = {
    // アセットはLaravelのpublic/appディレクトリ配下に作成される
    outputDir: '../backend/public/app',

    // app配下にjs, cssなどが置かれるので、publicPathを調整
    publicPath: '/app',

    pages: {
        // appのエントリポイント、テンプレート、出力先を調整
        app: {
            entry: 'src/main.ts',
            template: 'templates/base.html',
            filename: `../../resources/views/spa/app.blade.php`,
        },
    },
}

public/index.html을 Laravel 측에서 생성하기 위해 Vue 측의 index.html을 base 템플릿으로 지정하도록 변경합니다.

// テンプレートディレクトリの作成
$ mkdir templates
$ mv public/index.html templates/base.html

Laravel 측에서 루트 준비

이전 vue.config.js 설정에서 frontend 측에서 npm run build를 실행하면 Laravel의 resources/views/spa 아래에 app.blade.php가 생성됩니다.
그 블레이드를 호출하는 spa 용 라우팅을 준비합니다.

web.php

Route::get('/{any}', function () {
    return view('spa.app');
})->where('any', '.*');

이렇게 하면 어떤 URL에서도 spa/app.blade.php가 표시됩니다.
그런 다음 gitignore에 다음을 추가합니다.

.gitignore
/public/app
/resources/views/spa

동작 확인

frontend 디렉토리로 이동하여 빌드를 실행합니다.

$npm run build

localhost에 액세스하고 Vue.js의 welcome 화면이 묘사되어 있으면 완성입니다.

요약

이번에는 Vue CLI와 Laravel을 이용한 환경 구축을 진행해 갔습니다.
Laravel의 app 디렉토리 이하에 frontend 디렉토리를 자르고 있는 기사가 많았습니다만, Laravel의 디렉토리내에 Vue CLI의 코드가 혼동되고 있는 것이 개인적으로 기분 나빴기 때문에 이번과 같은 구성을 시험해 보았습니다.
아직도 시험적인 시도이기 때문에 좀더 이런 편이 좋다면 댓글을 주실 수 있으면 다행입니다.

참고 기사