배포

react 정적 프로젝트 nginx로 리눅스에 배포

MDanderson 2024. 7. 8. 14:10

@루트폴더에 .env파일을 만들고 PORT=포트번호를 작성합니다!!!!!!!!!!!!!

 

윈도우 개발환경에서 npm run build 합니다

 

@리눅스로 보내기

scp -r build/ 사용자명@서버IP:/path/to/webroot        로 빌드파일 보냅니다

 

@리눅스에서 nginx설치

sudo apt update
sudo apt install nginx

 

@config파일 수정

 

sudo nano /etc/nginx/nginx.conf

 

저장하기 ctrl+o

종료 ctrl +x

 

 

server {
    listen 1234; # 포트 1234에서 듣기
    server_name 서버IP; # 서버 IP 혹은 도메인( 포트포워딩을 했다면 공유ip, 사설ip 둘다가능 그래도 보안상 사설ip사용추천) 

    location / {
        root /path/to/webroot/build; # 정적 파일이 위치한 경로
        index index.html; # 기본으로 서빙할 파일
        try_files $uri $uri/ /index.html; # SPA를 위한 설정
    }
}

 

 

 

@nginx구성 테스트 및 재시작

sudo nginx -t

 

@nginx 재시작

sudo systemctl restart nginx

 

@nginx돌아가는지 확

ps aux | grep nginx

sudo netstat -tulnp | grep nginx

 

-------에러날떄..------ 빨간색 코드를 실행하여 권한을 줘야합니다. -----

@nginx 상태 확인

sudo systemctl status nginx.service

 

@상세 로그 확인

journalctl -xeu nginx.service

 

 

@웹페이지상 500 Internal Server Error가 나는 경우

@로그확인

sudo cat /var/log/nginx/error.log

 

@디렉토리 및 파일 권한문(sudo chown [옵션] [소유자][:그룹] 파일명)

-R (재귀적, Recursive): chown이나 chmod 명령에 사용될 때, 지정된 디렉토리와 그 안에 있는 모든 파일 및 하위 디렉토리에 대해 명령을 적용합니다.

755: 이 숫자는 파일이나 디렉토리의 권한 설정을 나타냅니다. 각 숫자는 특정 권한을 나타내며, 세 자리 각각은 소유자(owner), 그룹(group), 그리고 다른 사용자(others)의 권한을 의미합니다.

  • 7 (소유자 권한): 읽기(4), 쓰기(2), 실행(1) 권한을 모두 부여 (4+2+1=7)
  • 5 (그룹 권한): 읽기(4), 실행(1) 권한을 부여 (4+1=5)
  • 5 (다른 사용자 권한): 읽기(4), 실행(1) 권한을 부여 (4+1=5)

 

sudo chown -R www-data:www-data /home/사용자명/프로젝트명/build  (소유권 변해서 덮어쓰기가 나중에 안됨..)
sudo chmod -R 755 /home/사용자명/프로젝트명/build

 

@상위디렉토리 권한문제 (상위디렉토리에도 권한을 줘야)

ls -ld /home/사용자명/kht-webpage

sudo chmod o+rx /home/사용자명

 

 

ls -ld /home/사용자명

권한확인시 drwxr-xr-x 이렇게되어있어야

 

 

@방화벽검사

sudo ufw allow 포트번호
sudo ufw reload