Laravel 설치 및 초기 설정

요즘 라라벨 공부 및 업무를 하고 있어.. 개인 pc에서 공부를 하기 위해 초기 설정을 하였습니다.

저는 docker container 환경으로 진행하고 있고 ubuntu 22.04 환경에서 진행합니다.

추가적으로 composer, php 가 설치되어있다는 가정하에 진행합니다.

 

사실 제일 쉬운것은 sail이라는것을 사용하는것이지만 제 개인 pc에서 사용중인 docker 에 직접 설치하고

진행을 해보고 싶어 sail은 진행하지 않으려고 합니다.

sail에 대해 자세히 확인하고싶은 분들께서는 라라벨 한국어 문서 혹은 라라벨 10.x 공식 문서 확인 부탁드립니다!

 

라라벨 문서(한국어 버전) - https://laravel.kr/docs/9.x

라라벨 10.x 공식 문서 - https://laravel.com/docs/10.x

Laravel - The PHP Framework For Web Artisans

라라벨 9.x

 

시작 전 composer, php 버전은 아래와 같습니다.

 

라라벨 설치 및 웹서비스를 진행 할 폴더 생성(기본 파일들도 같이 생성)

# composer 를 통한 라라벨 설치
composer create-project laravel/laravel {생성 할 폴더명}

생성 후 아래와 같이 파일들이 생깁니다.

라라벨 버전은 10.14.1 입니다.

확인 명령어는 생성 한 폴더 하위로 이동 후 php artisan -V or php artisan --version 입니다.

 

breeze 다운로드 및 설치

breeze라는 것은 laravel에서 제공하는 스타터킷입니다.

권장하고 있으니.. 저도 사용해보려 합니다.

# breeze 다운로드
composer require laravel/breeze --dev

# breeze 설치
# 설치를 진행하면 가장 중요한것이 어떤 front환경에서 진행할것이냐고 합니다.
# react, vue, blade 환경등이 제공되는데 laravel에서 기본적으로 사용하게되는 blade 환경을 선택하였습니다.
php artisan breeze:install

 

db migrate!

설치 된 항목들 중 database > migrations 폴더에 있는 migration 파일들을 제가 설정 한 db 테이블에 migrate 를 진행합니다.

db 정보는 .env 파일에 추가해주면 됩니다.

# db migration 진행
php artisan migrate

진행하면 db에 테이블들이 자동적으로 생성됩니다.

설정 한 db에 생성 된 db table들..

 

위 설정들을 완료 한 화면들

migration 하기전까지는 register 화면에서 회원가입을 하게 되면 우리가 migrate를 통해 생성 한 user테이블에 가입 한 정보가 저장되고

login 페이지에서 로그인까지 가능합니다.

 

register 페이지 화면

login 페이지 화면

로그인 완료 후 대시보드 화면

 

이상으로 laravel 설치 및 초기 설정을 진행해보았습니다.

감사합니다.

 

 

 

+추가

 

반드시 필요한것은 아니지만 프론트 쪽 수정사항이 바로 브라우저에 반영되도록 하려면 npm을 설치해줘야 합니다.

- npm install : npm 설치

- npm run dev : npm 실행

 

다만 npm run dev 실행 시 기본 port가 5173인데 제가 처음 docker를 설정할 때 5173 port를 허용하지 않아 npm이 정상적으로 실행되지 않는것같습니다.

그래서 저는 vite.config.js 파일에 아래와 같이 추가하였습니다.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server:{ // 임의로 변경 (docker port 사용을 위함)
        host: '0.0.0.0',
        port: 8080,
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

server 객체에 host, port를 따로 설정해줘서 실행을 하니 정상적으로 실행되었습니다.

 

- 관련내용 추가

https://buchet.tistory.com/77