키워드 요약 설명

* SSL (Secure Sockets Layer)

인터넷 통신에서 데이터를 암호화하여 안전하게 전송하는 프로토콜. SSL은 TLS로 대체되었으며, 현재는 더 이상 사용되지 않음.

 

* TLS (Transport Layer Security)

SSL의 후속 버전으로 더 안전하고 효율적인 암호화 프로토콜.

 

 

적용 환경

버전 : Amazon Linux release 2023.5.20240722 (Amazon Linux)

 

Python기반의 웹 애플리케이션 프레임워크인 'Reflex'를 AWS에 셀프호스팅을 진행중이다.

Reflex 소스코드를 받아 환경설정을 하고 production모드 실행까지 성공했으나, https 적용을 위해 TLS를 적용해야 하는 단계.

 

Reflex에서 직접 https를 다룰 수 있는 기능은 없으며, reverse proxy구조를 이용하여 Nginx를 거쳐서 인증하도록 해야한다.

 

nginx 설치

sudo yum install nginx

 

Nginx 설치 후 설정 진행

 

Nginx 명령어

sudo systemctl start nginx  // 실행
sudo systemctl status nginx  // 상태 조회
sudo systemctl stop nginx  // 중지

 

Nginx 설정파일 경로 : /etc/nginx/nginx.conf

* /etc/nginx/nginx.conf 파일에 오류가 있다면 아래 메시지 발생

Job for nginx.service failed because the control process exited with error code.
See "systemctl status nginx.service" and "journalctl -xeu nginx.service" for details.

 

 

EPEL, Certbot 설치

아마존(AMI3)의 보안정책이 바뀌면서 amazone linux에서는 certbot만 설치 하지 못하고 nginx를 이용해서 설치해야 한다.

 

인증서 구조

Browser <-- HTTPS --> Nginx <-- HTTP --> Reflex App

 

시스템 종속성 설치

sudo dnf install python3 augeas-libs

 

가상환경 설정

sudo python3 -m venv /opt/certbot/

sudo /opt/certbot/bin/pip install --upgrade pip

 

Certbot그리고 Certbot Nginx 플러그인 을 가상환경에 설치

/opt/certbot/bin/pip install certbot certbot-nginx

 

 

certbot을 이용해서 nginx에 SSL 인증서를 적용

/etc/nginx/nginx.conf 수정

server {
    listen 80;
    # 구입한 도메인 이름을 기입한다. ex) www.localstorybe.site
    server_name my.domain.com;

    # 기본 경로에 대해 localhost:3000으로 프록시
    location / {
    proxy_pass http://localhost:3000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    location /_next/webpack-hmr {
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header X-Forwarded-Proto $scheme;
    }

    # /_event 경로에 대해 localhost:8000으로 프록시
    location /_event {
            proxy_pass http://localhost:8000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header X-Forwarded-Proto $scheme;
    }
}

 

체크리스트

1)웹서버 실행 종료 확인 

2)80번 포트 사용중 확인

3)80번 포트 포트포워딩 해제(필자는 포트포워딩 중이었음)

  • iptables -t nat -L --line-numbers -v -n
  • sudo iptables -t nat -D PREROUTING <규칙 번호>
sudo certbot certonly --standalone

 

 

 

추가 정보

인증서 경로 : /etc/letsencrypt/live/cookeng.site

 

 

인증서 자동 갱신

TLS 인증서는 90일동안만 유효하기 때문에 이후 재발급을 진행해야 한다.

crontab을 통해 인증서 재발급을 자동화 하자.

 

crontab 설치

sudo yum install cronie -y

 

cronie 서비스 활성화

sudo systemctl start crond
sudo systemctl enable crond

 

crontab 편집

crontab -e

 

인증서 갱신 스케줄 추가

 

service nginx stop

sudo certbot renew

 

 

인증서 재발급

 

 

sudo certbot --nginx -d example.com

 

참고 자료

1) https://certbot.eff.org/instructions?ws=other&os=pip

 

 

현상

웹 개발을 하면서 CORS (Cross-Origin Resource Sharing) 정책 오류는 매우 자주 마주치는데 이번에 발생한 문제는 서버로부터 응답이 차단되었다는 것을 의미한다. 전체 오류 메시지는 아래와 같다.

Access to fetch at 'http://127.0.0.1:3000/api/admin/custom/gen-script?type=1' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' 
to fetch the resource with CORS disabled.

 

원인

http://localhost:3000 으로 부터 요청이 Block되었다는 오류메시지이다.

fetch를 수행한 주소는 http://127.0.0.1:3000/api/~ 로 되어있지만 응답을 받은 주소는 http://localhost:3000/~로 두 주소가 상이하기에 Block이 된 것으로 보인다.

웹 프론트에서 현재 fetch의 주소는 환경변수에서 읽어오는 것이며, <.env.development>파일의 변수값을 보면 아래와 같이 되어있었다.

REACT_APP_WEB_BASE_URL=http://127.0.0.1:3000
REACT_APP_WEB_BASE_PROXY_URL=http://127.0.0.1:80

 

해결방법

변수에 설정된 주소를 아래와 같이 변경했다.

REACT_APP_WEB_BASE_URL=http://localhost:3000
REACT_APP_WEB_BASE_PROXY_URL=http://localhost:80

 

'좌뇌 > Web' 카테고리의 다른 글

(Reflex) AWS-EC2 certbot 사용하여 무료로 'https' 적용하기  (0) 2024.09.09

+ Recent posts