0. 도메인 A 레코드 설정하기

사용하려는 도메인 혹은 서브도메인을 A 레코드로 설정한다.

예를 들어 https://sub.example.com 로 연결한다면 A 레코드는 sub가 된다.

1. Nginx 설정 파일 생성

/etc/nginx/sites-available 디렉토리에 새로운 Nginx 설정파일을 생성하여 도메인 또는 서브도메인을 설정한다.

$ sudo vi /etc/nginx/sites-available/[도메인 이름].com

2. Nginx 설정 파일 내용

파일에 다음 내용을 추가한다.

server {
    listen 80;
    listen [::]:80;
    server_name [도메인 이름].com;
    root /var/www/[도메인 이름].com;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

• server_name에 서브 도메인을 설정
• root는 빌드 된 파일이 위치할 디렉토리로 설정

3. 심볼릭 링크 생성

새로 만든 설정파일에 대한 심볼릭 링크를 sites-enabled 디렉토리에 생성하여 Nginx가 이 설정을 사용하도록 한다.

$ sudo ln -s /etc/nginx/sites-available/[도메인 이름].com /etc/nginx/sites-enabled/

4. React 프로젝트 내려받기

Github에 올린 React 프로젝트를 서버에 clone 한다.

$ git clone https://github.com/minijae011030/[레포지토리명]

5. React 프로젝트 빌드파일 생성

현재 프로젝트 코드에 대한 정적 빌드 파일을 생성한다.

$ npm run build

6. 디렉토리 생성 및 파일 복사

서버에서 서브도메인에 대해 설정한 웹 루트 디렉토리를 생성하고, React 프로젝트의 빌드 파일을 복사한다.

$ sudo mkdir -p /var/www/[도메인 이름].com
$ sudo cp -r build/* /var/www/[도메인 이름].com/

7. 권한 및 소유권 설정

웹 서버가 파일에 접근할 수 있도록 권한과 소유를 설정한다.

$ sudo chown -R www-data:www-data /var/www/[도메인 이름].com

8. Nginx 설정 테스트 및 재시작

$ sudo nginx -t
$ sudo systemctl restart nginx