react 프론트 작업시 nginx 설정 방법

먼저 이 설명을 보기전에 라라벨로 php nginx 설정을 해보신 적이 없다면 라라벨 셋팅(A-Z) 따라서 진행해보시고 시도해주시길 바랍니다. 

지금 이 설명은 라라벨 셋팅을 이해했다는 가정하에 설명하고 있습니다. 

 

1. code 폴더 안에 react 프론트 작업할 폴더를 생성합니다. 

2. nginx 등록하는 과정에서 php로 작성할때는 public->build로 수정해주시고 형식도 전환해주시길 바랍니다.

server {
    listen 80;
    #listen 443 ssl http2;
    server_name crypto_admin_frontend;
    root "/home/vagrant/market/crypto_admin_frontend/build";
    index index.html index.htm index.php;
    charset utf-8;
    location / {
        try_files $uri $uri/ /index.html?$query_string;
    }
    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }
    access_log off;
    error_log  /var/log/nginx/vtm-user.homestead.test-error.log error;
    sendfile off;
   location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_intercept_errors off;
        fastcgi_buffer_size 17k;
        fastcgi_buffers 4 16k;
        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
    }
    location ~ /\.ht {
        deny all;
    }
    #ssl_certificate     /etc/nginx/ssl/test1.homestead.test.crt;
    #ssl_certificate_key /etc/nginx/ssl/test1.homestead.test.key;
}

참고) 

• root - 오른쪽 맨끝 부분에 public->build 변경
• location - index.php->indext.html 변경 

3.  sudo systemctl restart nginx 으로 nginx을 정상적으로 연결합니다.

4. C:\Windows\System32\drivers\etc 안에 hosts에 경로를 추가합니다.

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

192.168.56.56   crypto-admin-frontend.test

참고)

• 이건 예시이니 본인 경로에 맞게 설정하시면 됩니다.

5. react는 composer이 안되므로 바로 yarn install로 node module을 설치합니다. 

6. yarn run build로 build를 실행합니다. 

7. nginx에 설정한 경로로 접속합니다.