[React.js] 리액트 프로젝트 우분투 서버에서 구동하는 방법(npx, nginx 사용)

여기에서는 리액트 프로젝트를 우분투 서버에서 구동하는 방법을 다루고자 한다. 먼저 프로젝트 빌드부터 해보자!

1. 프로젝트 빌드

리액트 프로젝트의 package.json에 설정된 빌드 명령어를 사용하더 프로젝트를 빌드한다. 아래는 명령어 예제이다.

npm run build 

빌드가 완료되면 index.html이 포함된 build 폴더가 생성된다.

2. 구동 명령

2-1. npx로 구동

npx로 간단하게 구동해 볼 수 있다. 프로젝트 경로에서(build 경로로 이동할 필요가 없다.) 아래 명령어를 실행하면 빌드된 프로젝트가 포그라운드에서 구동된다.

npx serve -l [실행할 포트 번호] -s build

예를 들어 3000번 포트로 프로젝트를 구동하고 싶다면 아래와 같이 명령어를 작성하면 된다.

npx serve -l 3000 -s build

2-2. nginx로 구동

nginx로 백그라운드에서 빌드된 프로젝트를 구동할 수 있다. 혹시 nginx가 설치되어 있지 않다면 아래의 명령어를 차례대로 실행해 보자!

1. nginx 설치 전 패키지 목록 업데이트

sudo apt update && sudo apt upgrade

2. ngix 설치

설치 중간에 "Do you want to continue?" 물어보면 "y" 입력한다.

sudo apt install nginx

3. default 파일 수정

nginx의 default 파일을 수정해야 한다. 아래 명령어로 vi 편집기를 이용해 수정해 보자!

sudo nano /etc/nginx/sites-available/default

default 파일에 아래 코드를 추가한다.

server {
    listen 3000;  # 3000번 포트로 구동
    server_name your-domain.com;  # 도메인이 있다면 여기에 입력

    root /path/to/your/react/build;  # 리액트 프로젝트 build 폴더의 실제 경로를 입력
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 리액트 라우터를 위한 설정
    }
}

위 코드를 입력할 때 root에 입력할 경로를 모른다면 리액트 build 폴더에서 pwd 명령으로 출력된 경로를 복붙하면 된다.

4. nginx 설정 테스트

위에서 작성한 설정이 올바른지 테스트한다.

sudo nginx -t

5. nginx 시작

테스트가 성공이라면 nginx를 시작한다.

sudo service nginx start

만약 이미 구동 중이라면 재시작한다. 변경 사항이 있을 경우 이 명령을 사용하면 된다.

sudo service nginx restart

참고로 중지 명령은 아래와 같다.

sudo service nginx stop

서버가 재부팅시 자동 시작하도록하는 명령은 다음과 같다.

sudo systemctl enable nginx

3. 오류 해결

브라우저에서 구동 중인 프로젝트에 접근했는데 (13: Permission denied)가 포함된 오류가 발생할 수 있다. 이는 nginx가 build 폴더에 접근할 권한이 없어서 발생하는 문제이다.

참고로 nginx의 error 로그는 아래 명령어로 확인 가능하다.

sudo tail -f /var/log/nginx/error.log

이 문제를 해결하려면 build 폴더 뿐만 아니라 모든 상위 폴더에 대하여 nginx가 실행(x) 권한을 가져야 한다. 또한 사용자와 그룹을 www-data로 변경해야 한다. 이렇게 권한을 변경하는 일은 여간 번거로운 일이 아니다. 따라서 이 방법 보다는 nginx.conf를 수정하는 편이 간편하다.

아래 명령어로 vi 편집기를 열어보자!

sudo vi /etc/nginx/nginx.conf

파일의 최상단에 user가 작성되어 있는데 그 값을 현재 사용자로 변경하면 된다. 현재 사용자 이름 확인 방법은 아래와 같다.

whoami

만약 사용자가 your_username라면 nginx.conf 파일의 최상단의 user를 다음과 같이 변경하면 된다.

user your_username;

수정이 완료되었다면 저장 후 nginx를 재시작한다.

sudo systemctl restart nginx

재시작 명령어가 위에서 설명한 내용과 다른데, 이 역시 재시작 명령어이다.

---

2025-03-06 추가

※ Nginx 사용법

1. Nginx 상태 확인

• 시스템 서비스 상태 확인:
  • sudo systemctl status nginx (systemd 사용하는 경우)
  • sudo service nginx status (sysVinit 사용하는 경우)
  • 이 명령어를 통해 Nginx 서비스가 활성화되어 있는지, 실행 중인지, 또는 오류가 발생했는지 확인할 수 있다.
• 프로세스 확인:
  • ps aux | grep nginx
  • 이 명령어를 통해 Nginx 프로세스가 실행 중인지, 어떤 프로세스가 실행 중인지 확인할 수 있다.
• 포트 확인:
  • sudo netstat -tulpn | grep nginx
  • 이 명령어를 통해 Nginx가 어떤 포트에서 실행 중인지 확인할 수 있다.
• Nginx 로그 확인:
  • /var/log/nginx/error.log (오류 로그)
  • /var/log/nginx/access.log (접근 로그)
  • 로그 파일을 통해 Nginx의 작동 상태와 오류 메시지를 확인할 수 있다.
• stub_status 모듈 사용:
  • Nginx 빌드에 stub_status 모듈이 있는지 확인하려면 nginx -V를 실행한다.
  • 이 모듈을 사용하면 Nginx의 연결 상태, 요청 수 등의 정보를 확인할 수 있다.

2. Nginx 기본 명령어

• Nginx 시작:
  • sudo systemctl start nginx
  • sudo service nginx start
• Nginx 재시작:
  • sudo systemctl restart nginx
  • sudo service nginx restart
• Nginx 중지:
  • sudo systemctl stop nginx
  • sudo service nginx stop
• Nginx 설정 파일 확인:
  • sudo nginx -t
  • 이 명령어를 통해 Nginx 설정 파일의 문법 오류를 확인할 수 있다.
• Nginx 버전 확인:
  • nginx -v
  • nginx -V (버전 및 설정 옵션 표시)

3. Nginx 설정 파일 위치

• /etc/nginx/nginx.conf (기본 설정 파일)
• /etc/nginx/sites-available/ (가상 호스트 설정 파일)
• /etc/nginx/sites-enabled/ (활성화된 가상 호스트 설정 파일)