LEMP + TALL(Tailwind, Alpine, Laravel, Livewire) 초기 설정법

사용환경

Ubuntu 20.04 LTS
Nginx 1.20.1, PHP 8.0.8, Mariadb 10.3.29 (LEMP Stack)
Laravel 8.5

사용환경 설정

편의상 ubuntu 계정으로 진행
- 별도의 계정을 생성하여 진행하는 것이 좋음.
Nginx 1.20.1(stable) 설치

$ sudo wget https://nginx.org/keys/nginx_signing.key
$ sudo apt-key add nginx_signing.key

$ sudo vi /etc/apt/sources.list

# 제일 하단에 아래 내용 추가 후 저장
deb https://nginx.org/packages/ubuntu/ focal nginx
deb-src https://nginx.org/packages/ubuntu/ focal nginx

$ sudo apt-get update
$ sudo apt-get install nginx
$ nginx -v
nginx version: nginx/1.20.1

PHP 8 설치

$ sudo apt-get install php8.0-fpm php8.0-pdo php8.0-mysql php8.0-gd php8.0-zip php8.0-mbstring php8.0-curl php8.0-xml php8.0-bcmath php8.0-imagick php8.0-memcached

# php 버전 확인
$ php -v
PHP 8.0.8 (cli) (built: Jul  1 2021 15:26:46) ( NTS )

# php8.0-fpm 실행 확인
$ sudo systemctl status php8.0-fpm
● php8.0-fpm.service - The PHP 8.0 FastCGI Process Manager
     Loaded: loaded (/lib/systemd/system/php8.0-fpm.service; enabled; vendor preset: enabled)
     Active: active (running) since Fri 2021-07-16 21:16:43 KST; 26s ago

php-fpm 설정

$ sudo vi /etc/php/8.0/fpm/php.ini

cgi.fix_pathinfo=0 # 주석 해제 후 0으로 변경
upload_max_filesize = 32M
post_max_size = 32M
memory_limit = 256M
max_execution_time = 500
date.timezone = 'Asia/Seoul'

# php-fpm 재시작
$ sudo systemctl restart php8.0-fpm

PHP 8 JIT 설정

$ sudo vi /etc/php/8.0/cli/conf.d/10-opcache.ini

기존 내용 아래 쪽에 추가
관련 설정은 링크 참조

opcache.enable=1
opcache.jit_buffer_size=100M
opcache.jit=tracing

Nginx 설정

nginx 실행 계정 ubuntu로 변경
- 기본값은 nginx 또는 www-data 임
(옵션) Host 최대 개수 제한 오류를 해결하기 위해 server_names_hash_bucket_size 64; 주석 해제 또는 추가

$ cd /etc/nginx
$ sudo vi nginx.conf

-------------------

user  ubuntu; 로 변경

http {
    ...
    
    # 주석 해제 또는 추가
    server_names_hash_bucket_size 64;
    
    ...
}

fastcgi-php8.0.conf 파일에 아래 내용 추가

$ sudo mkdir /etc/nginx/snippets/
$ sudo vi /etc/nginx/snippets/fastcgi-php8.0.conf

#split $uri to $fastcgi_script_name and $fastcgi_path
fastcgi_split_path_info ^(.+\.php)(/.+)$;

# Check that the PHP script exists before passing it
try_files $fastcgi_script_name =404;

# Bypass the fact that try_files resets $fastcgi_path_info
# see: http://trac.nginx.org/nginx/ticket/321
set $path_info $fastcgi_path_info;
fastcgi_param PATH_INFO $path_info;

fastcgi_index index.php;
include fastcgi_params;

##
# FastCGI PHP connection
##
fastcgi_pass unix:/var/run/php/php8.0-fpm.sock;
fastcgi_read_timeout 300;

##
# FastCGI Cache
##
#fastcgi_cache phpcache; 
#fastcgi_cache_valid 200 60m; 
#fastcgi_cache_methods GET HEAD;
#add_header X-Fastcgi-Cache $upstream_cache_status;

php-fpm 실행 계정 변경
- 기본값은 www-data 임

$ sudo vi /etc/php/8.0/fpm/pool.d/www.conf 

user = ubuntu
group = ubuntu
listen.owner = ubuntu
listen.group = ubuntu

$ sudo systemctl restart php8.0-fpm

# 변경된 계정 확인
$ ll /var/run/php/php8.0-fpm.sock
srw-rw---- 1 ubuntu ubuntu 0 Jul 17 00:56 /var/run/php/php8.0-fpm.sock=

default host 생성
- 가상 호스트(Server Block, Apache의 Virtual Host) 생성 시에는 /etc/nginx/sites-available에 Server Block 생성 후 /etc/nginx/sites-enabled 에 심볼릭 링크를 걸어준다.
- 관련 내용 참고

$ cd /etc/nginx/conf.d
$ sudo cp default.conf default.conf.bak
$ sudo vi default.conf

default.conf 내용을 아래 설정값으로 변경.
- server_name, root 등 환경에 맞추어 변경
- 단, 라라벨 사용을 위해서는 location / { } 내부에 try_files $uri $uri/ /index.php?$query_string; 가 필수적으로 들어가 있어야 한다.

server {
    listen 80;
    server_name _;
    ## 라라벨 프로젝트 생성 위치의 public 폴더로 지정
    root /home/ubuntu/tall-stack/public;
    index index.html index.php;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include snippets/fastcgi-php8.0.conf;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

syntax 검사 후 nginx 재시작

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

$ sudo systemctl restart nginx
$ sudo systemctl status nginx
● nginx.service - nginx - high performance web server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Fri 2021-07-16 21:12:14 KST; 4s ago

TALL Stack이란?

TALL Stack은 라라벨을 중심으로 한 풀 스택 프레임워크(Full-Stack Framework) 를 말한다.
- Tailwind CSS: 일관된 디자인 컨셉과 미리 세팅된 Utility Class를 사용해서, HTML 코드 내에서 바로 CSS 스타일링을 할 수 있는 CSS 프레임워크이다.
  - Tailwind CSS 사이트 바로가기
- Alpine.js: jQuery와 비슷한 경량화된 Javascript 프레임워크. 기본적으로 Vue와 문법이 비슷하다.
  - Alpine.js 사이트 바로가기
- Laravel: 오픈소스 PHP 웹 프레임워크로, PHP 프레임워크 중에 Codeigniter와 더불어 가장 많이 사용한다.
  - 라라벨 사이트 바로가기
  - 라라벨 한국어 매뉴얼 바로가기
- Livewire: Javscript 없이 Laravel과 Blade로 동적 페이지 생성이 가능한 Full-Stack Framework이다.
  - Laravel Livewire 사이트 바로가기

TALL Stack 설정

Composer 설치
- 라라벨 사용을 위해서는 Composer가 필요하다.

$ cd
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
$ php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Installer verified

# /bin에다가 설치 또는 /usr/local/bin 등 원하는 경로
$ sudo php composer-setup.php --install-dir=/bin --filename=composer
$ php -r "unlink('composer-setup.php');"

# composer 설치 확인
$ composer
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.1.3 2021-06-09 16:31:20

# PATH 경로 추가
# .profile 또는 .bashrc 하단에 composer 경로를 추가한다.
$ vi ~/.profile

PATH="$HOME/.config/composer/vendor/bin:$PATH"

# 설정 다시 불러오기
$ source ~/.profile

# PATH 확인
$ echo $PATH
/home/ubuntu/.config/composer/vendor/bin:...

Laravel 설치

$ composer global require laravel/installer

Laravel 프로젝트 생성

$ composer create-project laravel/laravel tall-stack

Creating a "laravel/laravel" project at "./tall-stack"
Installing laravel/laravel (v8.5.22)
  - Installing laravel/laravel (v8.5.22): Extracting archive
Created project in /home/ubuntu/tall-stack
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 105 installs, 0 updates, 0 removals

...

Package manifest generated successfully.
74 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan key:generate --ansi
Application key set successfully.

또는

$ laravel new tall-stack

본인 IP로 접속 확인
- 아래 처럼 라라벨 화면이 뜨면 성공
- 페이지가 열리지 않으면, 방화벽 또는 설정 값을 확인 해 볼 것

Livewire 추가
- 라라벨 프로젝트 디렉토리에서 실행

tall-stack$ composer require livewire/livewire

Using version ^2.5 for livewire/livewire
./composer.json has been updated
Running composer update livewire/livewire
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking livewire/livewire (v2.5.5)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing livewire/livewire (v2.5.5): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: livewire/livewire
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
75 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

Breeze 추가
- Laravel Breeze 는 로그인, 회원가입, 비밀번호 찾기/재설정, 이메일 확인/비밀번호 확인 등과 같은 인증(Auth) 기능이 구현된 기본 템플릿
- Tailwind CSS, Alpinejs가 같이 설치된다.

tall-stack$ composer require laravel/breeze

Using version ^1.3 for laravel/breeze
./composer.json has been updated
Running composer update laravel/breeze
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking laravel/breeze (v1.3.1)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing laravel/breeze (v1.3.1): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/breeze
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: livewire/livewire
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
75 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

프로젝트에 breeze 적용

tall-stack$ php artisan breeze:install

Breeze scaffolding installed successfully.
Please execute the "npm install && npm run dev" command to build your assets.

컴파일 및 마이그레이션 실행

tall-stack$ npm install && npm run dev
tall-stack$ php artisan migrate

프로젝트를 살펴보면 Controllers 등에 Auth 디렉터리가 생성된 것을 볼 수 있다.
package.json 파일을 살펴보면, tailwindcss와 alpinejs가 적용된 것을 확인할 수 있다.

사이트 접속 후, 우측 Register를 클릭하면, TALL 스택이 적용된 화면을 볼 수 있다.

회원가입을 해보면 대시보드를 볼 수 있다.

이렇게 LEMP 스택에 TALL 스택 설치가 정상적으로 완료된 것을 볼 수 있다.

저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

스위프트(Swift) 5 배워보기 - 6. 상속, 인스턴스 생성/소멸 (0)	2021.06.08
스위프트(Swift) 5 배워보기 - 5. 프로퍼티 (0)	2021.06.08
스위프트(Swift) 5 배워보기 - 4. 클로저 (0)	2021.06.07
[언리얼4] C++ 컴파일이 느린 경우 해결 방법 중 1개 (0)	2021.06.02
스위프트(Swift) 5 배워보기 - 3. 클래스, 구조체, 열거형 (0)	2020.10.09

LEMP + TALL(Tailwind, Alpine, Laravel, Livewire) 초기 설정법

사용환경

사용환경 설정

TALL Stack이란?

TALL Stack 설정

'IT' 카테고리의 다른 글

전체 카테고리

티스토리툴바

사용환경

사용환경 설정

TALL Stack이란?

TALL Stack 설정

'IT' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

티스토리툴바