프로젝트 진행 중 이런 에러를 만났다.
해석해보면 이미 클라이언트는 ec2와 도메인을 연결하고 https://acoha.site ssl인증서를 발급받아 배포했고, 서버는 ec2 인스턴스 도메인만을 사용하고 있었기 때문이다. (즉 https 적용이 안되어있었음)
Mixed content 는 https와 http가 혼합되었을 때 나타나는 문제이다.
암호화 처리가 된 https가 암호화 되지 않은 (안전하지 않은) http를 로딩하려고 했기 때문에 발생한것으므로 서버도 ssl을 적용해서 https로 배포하기로 했다.
도메인 구입
가비아에서 도메인을 구입했고 아래와 같이 DNS 설정을 해주었다.
값에는 ec2 ip를 적어주어야한다.
@는 호스트가 없는 경우를 의미한다.
Route 53
AWS route 53에서 네임서버를 얻었다.
- 가용성과 확장성이 뛰어난 클라우드 기반 DNS 웹 서비스
- 동적으로 사용자에게 노출될 DNS 레코드 타입과 값 조정
- 각종 다양한 로드밸런싱 기능 지원
- 사용자의 요청을 EC2, ELB, S3 버킷 등 인프라로 직접 연결 가능
- 외부의 인프라로 라우팅하는데 사용 가능
- Route 53 트래픽 흐름을 사용하면 지연시간기반 라우팅 가능
- Route 53에서는 도메인 이름 등록도 지원 가능
Route 53 을 사용하는 이유는 대충 이렇다는데, 다양한 요청과 장애 발생시 대응하는 방법이 우수하다는 것 같다.....
아무튼 이 네임 서버 네가지를 가비아에 등록하면 된다.
Nginx Proxy Manger
npm을 알기전엔 nginx 설치하고 conf 파일찾고, 프록시 설정하고, 확인하고, 재실행하고,,를 반복했다면 Nginx Proxy Manger로는 이 과정을 gui로 쉽게 할 수 있다!!!!
도커 컴포즈에 다음과같이 추가해준다.
version: "3"
services:
npm:
image: jc21/nginx-proxy-manager:latest
container_name: nginx-proxy-manager
restart: always
ports:
- 81:81 #관리포트
- 80:80 #http
- 443:443 #https
volumes:
- ./nginx-proxy-manager/data:/data
- ./nginx-proxy-manager/letsencrypt:/etc/letsencrypt
environment:
DISABLE_IPV6: 'true'
depends_on:
- express-server이 내용은 npm홈페이지에 들어가면 제공해준다.
81번 포트는 nginx-proxy-manager gui툴로 접속하기위한 포트이고 443은 ssl인증을 위한 포트이므로
ec2 보안그룹에 81번 포트와 443번 포트를 인바운드 규칙에 추가해주어야한다.
배포가 완료된 되면 nginx-proxy-manage라는 폴더가 생기고, 브라우저에서 구입한 도메인으로 접속할수있다.
:81 포트로 접속하면 nginx-proxy-manager 관리페이지가 뜬다.
nginx-proxy-manager 에서 알려준 기본 이메일과 비밀번호를 입력하고 접속하면 회원가입을 할 수 있다.
이렇게 설정해주면 포트포워딩과 ssl 인증서 발급까지 직접 해준다.
그럼 클라이언트는 https://acoha.site
서버는 https://acoha.store 로 배포가 되어 처음과 같은 에러가 발생하지 않는다.
