[Nginx] Laravel + Create-react-app

안녕하세요, 라라벨에서 react를 쓰는법은 크게 두가지가 있습니다.

 

1. 프론트엔드 스캐폴딩

Vue, React 등을 선택할 수 있습니다. 자세한 내용은 https://laravel.kr/docs/6.x/frontend 에 나와 있습니다. 이번 게시물에서 다루지는 않겠습니다.

 

2. Nginx

Nginx로  react가 build 된 파일과 laravel을 각각 읽어 오는 방식입니다. 이럴 경우 listen 포트를 나눠야합니다.

당연히도 react가 80 포트를 써야 하겠죠?

scp react_project/build/* <server name or ip>:/var/www/html/react

 

라라벨을 구동하기 위해 key를 만들어줍시다.

php artisan key:generate
php artisan config:clear
php artisan config:cache

 

nginx  conf에 두개의 conf 파일을 연결하세요.

sudo ln -s /etc/nginx/sites-available/react_conf /etc/nginx/sites-enabled/react_conf
sudo ln -s /etc/nginx/sites-available/laravel_conf /etc/nginx/sites-enabled/laravel_conf

 

그리고 sites-available 폴더에다가 

 

react_conf

server {
    listen     80;
    server_name server_ip;
    charset utf-8;
    root /var/www/react_project;
    index index.html index.htm;
    # Always serve index.html for any request
    location / {
        root /var/www/html/react;
        try_files $uri /index.html;
    }
    error_log /var/log/nginx/react-app-error.log;
    access_log /var/log/nginx/react-app-access.log;

}

laravel_conf

server {
    listen     90;
    server_name server_ip;
    index server.php;
    charset utf-8;
    root /var/www/laravel;
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php index.html index.htm;
    # Always serve index.html for any request
    location @rewrite {
                rewrite ^/(.*)$ /server.php?_url=/$1;
    }
    location / {
                try_files $uri $uri/ /server.php?$query_string;
    }
    location /api {
        try_files $uri $uri/ /server.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_split_path_info %(.+\.php)(/.+)$;
                fastcgi_pass unix:/run/php/php7.4-fpm.sock;
                fastcgi_index server.php;
                fastcgi_param SCRIPT_FILLENAME /var/www/laravel/$fastcgi_script_name;
                fastcgi_param SCRIPT_NAME $fastcgi_script_name;
                include fastcgi_params;
    }

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

    error_log /var/log/nginx/laravel-app-error.log;
    access_log /var/log/nginx/laravel-app-access.log;

}