PHP Laravel(라라벨)+Next.js(React/리액트) CLI 프로젝트 생성

 

Laravel은 커뮤니티가 활발한 PHP Framework 중 하나입니다. (많이 사용된다는 의미기도 함)

 

Next.js또한 Reactjs를 사용하는 개발자들이 SSR(Server Side Rendering)을 위해 많이 사용을 합니다. 그리고 커뮤니티 또한 활발합니다.

 

Laravel에서는 Next.js 조합으로 공식적으로 SPA(Single Page Application) Boilerplate를 문서에 포함하고 있습니다.

 

이 Boilerplate는, 사용자 인증과 API 기능을 기본으로 제공하고 있어서 프로젝트를 시작하기에 매우 편리합니다.

 

Laravel+Next.js 조합을 CLI를 사용하여 설치하는 방법을 알아보겠습니다.

 

이 글은 Laravel 9.0, PHP 8.1.2 기준으로 작성되었습니다.

 

 

요구사항

• PHP 8.0 이상
• Composer
• npm
• git

 

 

설치

먼저 Laravel 프로젝트를 Windows/Linux에 맞게 아래 명령어로 설치합니다.

Windows
> composer create-project laravel/laravel backend

Linux
$ curl -s https://laravel.build/backend | bash

backend은 프로젝트 이름입니다. 적절히 변경합니다.

리눅스인 경우, permission을 위해 sudo 명령어가 포함되어 있어서 superuser 패스워드를 물어봅니다. 패스워드를 입력해서 완료합니다.

 

생성된 프로젝트로 이동합니다.

Windows
> cd backend

Linux
$ cd backend

 

laravel/breeze 패키지를 설치합니다.

Windows
> composer require laravel/breeze --dev

Linux
$ composer require laravel/breeze --dev

 

프로젝트의 .env파일을 열어서 데이터베이스 연결 설정을 적절히 편집합니다.

... DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=laravel DB_PASSWORD=laravel ...

 

저장하고, Database에 migration을 합니다. (테이블 생성)

Windows
> php artisan migrate

Linux
$ php artisan migrate

 

여기까지 백엔드를 위한 Laravel 설치가 완료되었습니다. 이제 프론트엔드인 Next.js를 설치해 보겠습니다.

 

Next.js 프로젝트의 위치는 Laravel 프로젝트 하위나 별도의 위치에 생성해도 무관합니다. 원하는 위치에서 아래 명령어를 실행하여 프로젝트를 생성합니다.

Windows
> git clone https://github.com/laravel/breeze-next frontend

Linux
$ git clone https://github.com/laravel/breeze-next frontend

frontend은 프로젝트 이름입니다. 적절히 변경합니다.

 

생성된 프로젝트 위치로 이동합니다.

Windows
> cd frontend

Linux
$ cd frontend

 

npm 패키지를 설치합니다.

Windows
> npm install

Linux
$ npm install

 

.env.example 파일을 .env.local 파일로 복사합니다.

Windows
> copy .env.example .env.local

Linux
$ cp .env.example .env.local

 

이렇게 모든 프로젝트가 설치되었습니다.

 

 

실행

먼저 Laravel 프로젝트 위치에서 serve로 웹서버를 실행합니다.

Windows
backend> php artisan serve

Linux
backend$ php artisan serve

 

Next.js 프로젝트 위치에서 npm으로 어플리케이션을 실행합니다.

Windows
frontend> npm run dev

Linux
frontend$ npm run dev

 

웹브라우저를 실행하고, 주소에 http://localhost:3000를 입력하고 이동합니다.

 

완료되었습니다.