AWS EC2로 배포하기(4) | EC2 NginX 설정 | 프록시

방충림·2023년 6월 16일
4

AWS

목록 보기
4/10
post-thumbnail

NginX설치

sudo apt install nginx

NginX 설정파일 위치

NginX 설치가 끝나면 관련된 디렉토리와 파일들이 인스턴스 곳곳에 생성된 것을 볼 수 있다.

그 중에서 NginX의 설정과 관련된 파일은은 cd /etc/nginx경로로 들어가면 확인해 볼 수 있다.

주목 해야할 것은

  • [파일] nginx.conf
  • [디렉토리]sites-enabled > default
  • [디렉토리]sites-available > default

각각의 설명은 아래 이미지를 참고바란다.

요약하자면, sites-availabledefault에서 설정한 내용중 실제로 사용되는 것만 sites-enableddefault라는 link 파일로 저장되고, 이것을 nginx.conf가 참조하는 구조라고한다.

때문에 최종적으로 반영에 되는 것은 nginx.conf이므로 이것을 직접 수정할 수도 있지만, 원본을 직접 편집하는 걸 늘 불안하다. 그래서 sites-available > default를 많이 사용하는 모양이다.

설정 파일 코드 공유

다음은 내가 실제로 사용한 NginX 코드이다.
코드는 다음과 같은 역할을 한다.

  1. https(443포트)를 통해 수신하면 SSL인증서를 검증한다
  2. 정적 파일을 제공한다.
  3. /api 로 시작하는 경로로 요청이 들어오면 노드서버로 프록시 해준다.
  4. 주소창에서 하위 경로로 직접 접근하더라도, index.html을 받아와서 react 컴포넌트를 띄워 줄 수 있게한다.
  5. http(80포트)로 접근을 하면 https(443포트) 로 보내준다.

+ root /var/www/reloading-build 경로에는 리액트의 빌드 폴더를 복사해두어, 정정 파일을 서빙할 수 있도록 하였다.

server {
        listen 443 ssl;                             // 443 포트에서 SSL 연결을 수신한다.
        server_name reloading.co.kr;                 // reloading.co.kr 도메인으로 요청이 들어온다.
        ssl_certificate /etc/letsencrypt/live/reloading.co.kr/fullchain.pem;           // SSL 인증서 경로를 설정한다.
        ssl_certificate_key /etc/letsencrypt/live/reloading.co.kr/privkey.pem;         // SSL 인증서의 개인 키 경로를 설정한다.
        include /etc/letsencrypt/options-ssl-nginx.conf;                               // SSL 설정을 포함한 파일을 가져온다.
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;                                 // DH 파라미터 파일 경로를 설정한다.

        location /api {
        proxy_pass http://127.0.0.1:3060;            // /api 경로로 들어온 요청을 로컬 서버(127.0.0.1:3060)로 프록시한다.
        proxy_http_version 1.1;                      // 프록시 서버와의 통신에 HTTP 버전 1.1을 사용한다.
        proxy_set_header Upgrade $http_upgrade;       // 클라이언트 요청 헤더의 'Upgrade' 값을 프록시 요청 헤더에 설정한다.
        proxy_set_header Connection 'upgrade';        // 클라이언트 요청 헤더의 'Connection' 값을 'upgrade'로 설정하여 커넥션을 업그레이드한다.
        proxy_set_header Host $host;                  // 프록시 요청 헤더에 호스트 헤더를 설정한다.
        proxy_cache_bypass $http_upgrade;             // 캐시 우회를 위해 'Upgrade' 요청에 대해서는 캐시를 사용하지 않도록 설정한다.
        }

        root /var/www/reloading-build;                // 정적 파일의 기본 경로를 설정한다.
        try_files $uri $uri/ /index.html;              // 파일이 존재하지 않을 경우 /index.html을 반환한다.
}

server {
        if ($host = reloading.co.kr) {
                return 301 https://$host$request_uri;   // reloading.co.kr에 HTTP로 접속 시 HTTPS로 리디렉션한다.
        }
        server_name reloading.co.kr;                   // reloading.co.kr 도메인으로 요청이 들어온다.
        listen 80;                                     // 80 포트에서 요청을 수신합니다.
        return 404;                                    // 404 에러를 반환합니다.
}


파일 구성에 대한 더 자세한 설명은 여기 를 참고하면 좋겠다.
# NginX 관련 명령어 NginX을 처음 시작할 때는 시작 명령어를 실행해 주어야 동작이 되고, 편집하여서 새로 반영해야할 때에는 재시작을 해주어야 적용이 된다.

관련한 자주 쓰이는 명령어는 다음과 같다.

sudo systemctl start nginx // 시작
sudo systemctl stop nginx // 중단
sudo systemctl restart nginx // 재시작
sudo systemctl status nginx // 오류 발생시 상태 및 로그 확인

NginX를 재설치 하고싶다면?

NginX을 처음 사용한다면, 설정을 잘못 건드려서 작동이 되지 않게될 수 있다. 이럴 때는 NginX를 완전히 삭제하고 다시 설치하는 방법이있다.

단, 관련된 파일이 인스턴스 전반에 깔려 있으므로, 남아있지 않도록 잘 삭제해야한다. 관련된 파일을 모두 삭제하는 코드는 다음과 같다.

apt-get remove --purge nginx nginx-full nginx-common 

이후 다시 설치 명령어를 실행하면 초기화된 세팅을 다시 얻을 수 있다.



참고
Nginx로 React 배포 및 express연동
[nginx] ubuntu 20.04에서 nginx 완벽한 삭제
제로초 NGINX+https 적용하기
Nginx로 전달하는 Vue 페이지 하위 경로 접속시 나타나는 404오류

profile
최선이 반복되면 최고가 된다.

0개의 댓글