Nginx를 이용하여 React 실행시켜보기

음.. 일을하는데 더이상 aws를 안쓰고 사설서버를 셋팅해서 사용한다고하여

 

지금 aws s3를 사용하여 React를 배포하고있엇는데.. 이거를 이제 못하게 되었다.

 

그럼 어떤걸 써서 배포를 해야하나 찾는중에 Nginx를 사용하면 가능하다하여 검색해서 셋팅을 하여 배포에 성공하였다.

 

생각보다 엄청쉬워서 놀랐음 ㅋㅋ

 

그럼 차근차근 해보죠 고고 ( 아 참고로 저는 우분투로 설치 하였습니다)

 

1. 서버에 접속하여 Nginx설치 

• sudo apt-get update
• sudo apt-get install nginx  # nginx 설치
• sudo service nginx start    # nginx 실행
• sudo service nginx status # nginx 가 제대로 동작하는지 확인

이렇게 순서대로 하면 설치가 완료된다 재대로 설치가 되어 상태 확인하면

요런식으로 나옴

이러면 정상적으로 설치되어 실행중인겁니다

 

 

2. Nginx 설정파일 수정하기

 

설치가 완료되면 해당경로  /etc/nginx  <<< 이쪽 경로에 sites-available 이라는 폴더가 있을겁니다

빨간색 네모칸 참조

여기 안에 들어가보면

default.conf 이라는 파일 하나가 있을것이다

여길들어가서 수정을 해도 되고 밑에사진처럼 default.conf 파일을 백업파일로만들고

새로운자기만의 파일을 하나 만들어서 셋팅을 해줘도 된다.

ex)

요런식으로 myapp.conf파일을 만듬

*** 단 새로 파일을 만들어서 하려면 설정을 하나더 해줘야함 ***

심볼릭 링크라는 것을 해줘야해여 

기본적으로 available에 설정파일을 셋팅해놓고 이 파일의 심볼릭 링크를 /etc/nginx/sites-enabled/ 에도 만들어주자.

이유는 이름처럼 웹서버가 동작될 때 sites-enabled 에 있는 설정파일을 참조한다.

 

설정파일에 대한 안에 내용은

sudo nano /etc/nginx/sites-available/myapp.conf (새로운파일을 만듦)

안에 내용
server {
      listen 80;
      location / {
            root /home/user/myapp/build;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
            }
     }

 

설명을 하면

• listen 80은 포트 80에 대한 설정이다.
• location / 는 URL이 ‘/’가 포함된 경로에 대한 설정을 의미한다.
• root는 실행할 파일들의 루트 위치를 의미한다. 위에서 빌드한 파일 경로를 입력하면 된다.

리액트는 npm run build를 하여 생성되는 build파일의 경로의 위치를 적어주면된다 .
(pwd를 사용하여 경로 위치를 알수있으니 참고)

 

• index는 인덱스의 파일들을 지정하는 곳이고, 이 파일들 중 꼭 하나는 root (위에 root적은) 경로 안에 존재해야 한다.
• try_files는 어떤 파일을 찾을 때 명시된 순서로 찾으며, 가장 먼저 발견되는 파일을 사용한다는 의미이다.

 ( try_files  솔직히 이건 나도 무슨의미인지 잘모르겠음... 검색을 더해서 공부를 더해봐야겠네요 ㅠ)

 

위 내용대로 설정을 하고 저장을 해놓고 심볼릭 링크를 실행하면된다.

 

만약 여기서 default.conf파일을 수정을안하고 새로운(위에 사진처럼) myapp.conf를 만들어서 사용한다면

 

만들파일이름.conf로 파일을 만든다음에  심볼릭 링크를 해줘야한다 (심볼릭 링크에 대한 설명은 밑에 참조)

심볼릭 링크란

심볼릭 링크(symbolic link) : 절대 경로 또는 상대 경로의 형태로 된 다른 파일이나 디렉터리에 대한 참조를 포함하고 있는 특별한 종류의 파일이다. 즉, 링크를 연결하여 원본 파일을 직접 사용하는 것과 같은 효과를 내는 링크이다. 윈도우의 바로가기와 비슷한 개념이다.

 

sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf << 요 명령어 사용하면됨

기존에 defualt.conf로 수정해서 셋팅해논거여도 
경로랑, 파일이름 잘바꿔서 심볼릭 링크 실행해주셈 !

 

3. Nginx 재시작

 

위에 내용대로 설정한 파일을 만들었다면 아래명령어로 nginx를 재시작 시켜주면 끝 !

정지 후 시작
sudo systemctl stop nginx
sudo systemctl start nginx

상태확인
sudo systemctl status nginx

 

상태 확인을 하여 Nginx가 동작중이면, 브라우저에서 localhost:80으로 접속해보자. 포트설정을 다른 곳으로 했다면 거기로 접속하면 될 것이다.

 

※ 전 여기서 서버에 셋팅을 했기때문에 서버아이피:포트번호로 접속을 하였음

 

정상적으로 사이트가 켜진것을 확인..

 

여기서부턴 참고!!!

위에처럼 셋팅을 했는데 오류가 나와서 페이지가 안열리는 경우가 있다.

저같은 경우는 음...
"Permission denied" 이런에러가 떳었음
리액트를 빌드한 build폴더 권한 때문에 nginx가 접근을 못해서 생긴 오류가 있었다.

권한 수정: 필요한 경우, 파일의 권한을 수정하여 Nginx가 접근할 수 있도록 합니다.
예를 들어, 모두 읽을 수 있도록 하려면 다음 명령어를 입력하세요
sudo chmod 644 /home/ubuntu/global_admin_pro/build/index.html
sudo chmod -R 755 /home/ubuntu/global_admin_pro/build

소유자 변경: Nginx가 실행되는 사용자(대개 www-data)에게 파일 소유권을 변경할 수 있습니다.
sudo chown www-data:www-data /home/ubuntu/global_admin_pro/build/index.html

위에 내용은 gpt검색을 했더니 해결방법을 알려준 예시임


www-data 이거는
sudo nano /etc/nginx/nginx.conf 이걸로 이경로로 들어가면
파일의 시작 부분에 user 지시어가 있습니다. 밑에 사진참고

근데 이렇게해도 계속 똑같은 에러가 뜨길래 ... 계속 검색해보고 고민해보고 하다가
위에 build폴더 권한만 저렇게 바꾸지말고 아예 처음부터 다바꿔보자 해서
sudo chmod +rx /home/ubuntu이 명령어를 사용해서 처음 폴더부터 권한을 바꿧더니 

정상적으로 웹페이지가 열렸다.

참고만 해주시길 바람.. (자기 로컬서버에서는 저렇게 안해도될듯?? 저는 새로운 사설서버에서 안되는 문제여서..ㅠ

 

쨋든 성공하여 정상적으로 웹 페이지를 열었다 !  끝~ ㅋㅋ