문제 상황
프론트에서 배포 후 https 프로토콜을 사용하는 클라이언트가 현재 http를 사용 중인 서버에 요청을 보내는데 에러가 발생했다. http 80 포트에 접속하려는데, https 443 포트와의 충돌로 인한 문제였다. 이를 Mixed Content Error라고 한다.
이를 해결하기 위해, 클라이언트 딴에서 프록시 서버를 사용하거나 (react 환경 : http-proxy-middleware) 서버에 SSL 인증서를 통한 https 프로토콜을 적용해야 한다.
AWS Route 53으로 사용하면 쉽겠지만 어느 개발자님의 블로그를 참고하여 Nginx와 SSL 인증서를 통해 ec2에 적용해보도록 하겠다.
참고로, EC2에서 docker를 이용하여 빌드 파일을 다운로드하는 방식을 사용해도 똑같이 적용이 가능하다.
1. 무료 도메인 발급
무료 도메인을 발급받기 위해 일반 도메인 검색에 본인이 원하는 형식의 도메인 이름을 넣어 검색하고 등록할 수 있다!
https://xn--220b31d95hq8o.xn--3e0b707e/
내도메인.한국 - 한글 무료 도메인 등록센터
한글 무료 도메인 내도메인.한국, 웹포워딩, DNS 등 무료 도메인 기능 제공
xn--220b31d95hq8o.xn--3e0b707e
해당 도메인을 생성하고 나면 다음과 같이 도메인 설정에 대한 내용이 나온다
DNS 설정에서 IP연결 = EC2에서의 퍼블릭 IP 입력
TXT -> host 명 [_acme-challenge] / SSL 인증키 입력
TXT 과정은 추후에 적용할 것이니 일단 냅둔다!
저 과정을 처리하고 나면 다음과 같이 url에 접속이 가능하다
dlink-alpha.p-e.kr:8080
포트 포워딩
현재 8080 포트를 붙여야만 접속이 가능한 상황이다. 따라서 외부에서 80번 포트로 요청이 오면, linux에서 8080번 포트로 포워딩하여 연결해보자. 밑의 두 명령어를 실행하여 http 포트에서 8080 포트로 포워딩을 해보자
$ sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080
첫 번째로 위 명령어는 80 포트로 들어온 요청을 8080으로 포워딩하겠다는 의미이다. 해당 설정을 통해 url에 포트번호를 설정하지 않아도 url에 접속이 가능하다.
사전에 EC2 인스턴스를 생성하면서 보안 그룹에 HTTP와 HTTPS에 대한 포트를 열어야 한다! (주의)
이제 80번 포트를 내부적으로 8080번 포트로 포워딩하였으므로 더 이상 보안 그룹에서 8080번 포트를 열어줄 필요가 없다.
따라서 Spring Port로 열어 둔 2개의 8080 포트를 삭제하자.
다음 명령어를 입력하여 iptables의 Chain 정보를 확인해보자
$ sudo iptables -t nat -L --line-numbers
// 결과
Chain PREROUTING (policy ACCEPT)
num target prot opt source destination
1 REDIRECT tcp -- anywhere anywhere tcp dpt:http redir ports 8080
Chain INPUT (policy ACCEPT)
num target prot opt source destination
Chain OUTPUT (policy ACCEPT)
num target prot opt source destination
Chain POSTROUTING (policy ACCEPT)
num target prot opt source destination
아래 명령어를 통해 PREROUTING chain에서 Spring port를 삭제하고, 이후 Nginx을 적용하여 http와 https에 대한 로드 밸런싱을 진행할 것이다.
sudo iptables -t nat -D PREROUTING 1
[prerouting chain의 number를 잘 보고 삭제해야 한다! 위 예제에선 1이라고 나와있다.]
위 작업을 거치면 8080 포트넘버 없이 정상적으로 실행될 것이다.
HTTPS 설정
[SSL 인증서 발급]
HTTPS 프로토콜은 SSL 로 암호화한 HTTP이다. SSL 인증서가 있어야만 https 프로토콜에 접근이 가능하다
1. SSL 인증서 발급을 위한 cerbot 설치
sudo apt-get update -y
sudo apt-get install software-properties-common -y
sudo apt-get install certbot -y
2. SSL 발급
sudo certbot certonly -d dlink-alpha.p-e.kr --manual --preferred-challenges dns
위 명령어 실행하면 다음과 같은 화면이 나올 것이다.
자신의 이메일을 입력한 뒤, Y를 누르면 몇 초 뒤 다음과 같은 스크립트가 나온다.
저 문장의 의미는 DNS provider에 따라 수 초에서 수 분까지 기다려야 한다는 뜻이다. 바로 Enter를 누르지 말고 1분 정도 기다려보길.
위의 _acme-challenge 는 호스트 값이고 _iFH1J5XAEIerLEA78xKEIykYSBmVqAPeAIc--cV5JA 가 DNS TXT 레코드 값이다.
1분 뒤 정도에 엔터를 누르면 다음과 같이 성공했다는 문구가 뜬다!
직전에 얻은 호스트와 txt record 값을 "내도메인한국" 에서 발급한 도메인에 적용해준다.
SSL 인증서를 성공적으로 발급받았다! 이제 Nginx 에 설정을 해주면 된다.
Nginx 사용하기
Nginx는 웹 서버 중 하나로 WAS 앞단에 위치한다. 로드밸런싱, 포트 포워딩, SSL 설정 등 다양한 역할을 한다. Nginx를 활용하여 SSL 설정을 해보자.
1. 아래 명령어를 사용하여 EC2 에 Nginx 설치.
sudo apt-get install -y nginx nginx-common nginx-full
Nginx의 기본 폴더, 파일
- /etc/nginx/nginx.conf
Nginx에 관련한 설정파일로 Nginx 설정에 관한 블록들이 작성되어 있다. 이 파일에서 sites-enabled 폴더에 있는 파일들을 include하여 파일들을 가져온다. - /etc/nginx/sites-available
가상 서버 환경들에 대한 설정 파일들이 위치하는 디렉토리이다. 실제 가상 서버가 돌던 안 돌던 가상 서버와 관련된 설정 파일들은 여기에 놓도록 한다. - /etc/nginx/sites-enabled
sites-available에 있는 가상 서버 파일들중에서 실행시키고 싶은 파일을 symbolic link로 연결한 폴더이다. 이 폴더에 위치한 가상서버 환경 파일들을 읽어서 실제 서버를 세팅한다.
일단 nginx의 메인 설정 파일은 /etc/nginx 아래에 nginx.conf의 이름으로 존재하고 있다.
2. EC2의 /etc/nginx/nginx.conf 수정.
sudo vi /etc/nginx/nginx.conf
위 include문은 다음과 같다
1. /etc/nginx/conf.d 아래에 있는 모든 .conf 파일들을 inclue한다.
2. /etc/nginx/sites-enabled의 모든 파일들을 include한다.
만약 두 부분이 없으면 추가해주자.
3. /etc/nginx/sites-available/dlink-server.conf 생성 (이름은 자유!)
$ sudo vi /etc/nginx/sites-available/dlink-server.conf
server {
listen 80; # HTTP 요청을 수신
server_name your.domain.com; # 리다이렉트할 도메인명
# 모든 요청을 HTTPS로 리다이렉트
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2; # HTTPS 요청을 수신
server_name your.domain.com;
# SSL 인증서 설정
ssl_certificate /etc/letsencrypt/live/your.domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/your.domain.com/privkey.pem;
location / {
proxy_pass http://{publicIP}:8080; # http 서버로 전달.
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;
}
}
중간의 your.domain.com 부분은 여러분이 생성할 도메인 이름으로 변경해야 한다.
맨위에 서버 블럭은
80포트로 들어오는 요청 즉, http로 들어오는 모든 요청을 https로 리다이렉션을 하는 것이다.
그리고 그 바로 아래 서버 블록은 https://도메인 으로 들어온 요청에 대해 localhost 8080 포트로 접속하게 해주는 것이다.
여기서 8080 포트로는 아까 말한 spring boot앱이 실행되고 있는 상태이다.
즉, 도메인 이름으로 접속하면 바로 spring boot 앱이 연결되도록 한 것이다.
4. sites-enabled에 심볼릭 링크 생성
sudo ln -s /etc/nginx/sites-available/dlink-server.conf /etc/nginx/sites-enabled
5. dlink-server.conf의 문법을 확인한다.
$ sudo nginx -t
6. Nginx (재)시작
sudo service nginx (re)start
정상적으로 실행될 것이다!
<추가> 트러블 슈팅 (413 Request Entity Too Large 오류)
프론트에서 ec2 서버로 요청을 보낼 때 해당 에러가 발생하면서 api가 실행이 되지 않았다.
해당 에러는 서버의 허용량보다 더 큰 요청을 보냈을 때, 발생하는 오류이다. 따라서 서버의 허용량을 늘려주면 간단히 해결이 되는 문제인 것이다!
1. nginx conf 파일에 들어간다
sudo vi /etc/nginx/nginx.conf
2. http 블록 안에 다음과 같이 용량을 기입하면 된다.
k, m, g(각각 키로바이트, 메가바이트, 기가바이트) 같은 단위를 쓸 수 있고, 0으로 두면 무제한이다.
http {
...
client_max_body_size 20m;
...
}
3. nginx 재시작
sudo service nginx restart
참고
- 이 블로그에서 도움을 너무 많이 받았다... (감사합니다)
Let's Encrypt 로 HTTPS 를 적용해보자
SSL 인증서는 '도메인(or 서브도메인)' 에 대한 발급입니다. SSL 발급 신청서의 도메인은 DNS 서버에 설정 후, 전세계 어디에서나 공개 조회되고 있는 상태이어야 힙니다. (조회가 되지 않으면, 발급
jun-codinghistory.tistory.com
SpringBoot - Let's Encrypt로 무료 SSL인증서를 발급받아 SpringBoot에 적용하기(Https)
lets encrypt 이번 포스팅에서는 Springboot에 HTTPS를 구축하는 방법을 알아보도록 하겠습니다. 그동안은 서비스를 출시 하더라도 HTTP로 출시하는 경우가 많았는데요, 이번 백엔드 구축시에는 클라이
galid1.tistory.com
react, spring 연동 개발 -proxy
Spring을 이용하는 백엔드 개발자분들과 공모전을 준비하고 있는데,cors로 인해 바로 연결이 안되는 문제점이 생겼다.프론트는 그렇다고 손놓고 있느냐, 그건 아니었다.서버 배포가 된 상태이며,
velog.io
(HTTP) 413 Request Entity Too Large 오류 해결법 - nginx
413 Request Entity Too Large 오류는 주로 서버의 허용량보다 더 큰 파일을 올렸을 때 발생합니다. 따라서 서버의 허용량을 늘려주면 됩니다. http 블록 안에 다음과 같이 용량을 기입하면 됩니다. k, m, g(
www.zerocho.com
'Infra & Cloud > AWS' 카테고리의 다른 글
[AWS] AWS RDS vs AWS Aurora 비교 분석 (2) | 2024.11.20 |
---|---|
[AWS] EC2 환경에서 Redis 구축하기 (0) | 2024.07.25 |
[AWS] EC2와 RDS 연결하기 (0) | 2024.07.25 |
[AWS] EC2에 MySQL 적용 및 사용하기 (0) | 2024.06.15 |
[AWS] S3 이미지 업로드 및 EC2 연결하기 (0) | 2024.06.13 |