• https://ngrok.com/download
• 포트포워딩없이 서버 외부에 공유하기
• https로 열어준다
• 너무 간단하다
• zip 받아서 원하는 곳에 풀고,

1

ngrok http 3000

• path 환경변수 등록해서 어디서든 cli에서 실행할 수 있다

• 근데 이거보다 더 쉬운 localtunnel이 있다

대안 ; localtunnel

1

npx localtunnel --port 3000

• 포트만 설정해주면 끝

참고

• localtunnel ; https://github.com/localtunnel/localtunnel
• https://www.softwaretestinghelp.com/ngrok-alternatives/
  • ngrok의 대안들

• 웹에서 위치정보를 활용하고 싶어서 geolocation을 사용했는데,
• geolocation은 localhost 또는 https에서만 동작했다
• 위치정보를 활용하는 이 앱을 다른사람들에게 배포하기 위해서는 https를 사용했어야 했다

• 삽질을 많이했는데, 어떻게 하는지 정리한다. 할게 쫌 많고, 중간중간 대기시간이 길다
• 처음부터 끝까지 무료로 하는 법이다
• 따라하면 ec2에서 express로 돌아가는 웹앱에 https를 적용할 수 있다

내가 시도한 환경

• aws 프리티어
• ec2 (아마존 리눅스 2)
• 탄력적 IP

• 주의사항 ; 탄력적 IP는 1개까지 무료다. 탄력적 IP를 사용하면 연결된 ec2 인스턴스를 종료해서는 안된다. 인스턴스는 매월 750시간 무료다. 이 인스턴스를 제외하고 다른 인스턴스를 실행하면 비용이 생길 수 있다

해야할일 목록…

• express 웹 앱준비
• ec2 보안그룹 인바운드 설정 (http, https, 앱에서 사용하는 포트 열기)
• ec2에 탄력적 IP 할당
• ACM(AWS Certificate Manager)에서 SSL/TLS 인증서 발급요청
• freenom에서 도메인 얻기
• cloudflare 가입하고 사이트 추가
• freenom dns 설정 및 SSL/TLS 인증서 발급 완료
• freenom에서 cloudflare로 네임서버 변경
• aws 애플리케이션 로드 밸런서 생성
• cloudflare dns 설정

따라하기

express 웹 앱 준비

1
2
3

express https-web-app --view=ejs
cd https-web-app
npm i

• 간단하게 익스프레스 제너레이터로 웹앱을 생성한다

• 새로 생성하거나 기존에 있는 웹앱을 ec2 인스턴스에 올려준다

1

export PORT=8080&& node ./bin/www

• 앱을 실행한다
• 나는 익스프레스 제너레이터로 만들었기때문에 process.env.PORT로 8080값을 줘서 8080포트로 앱이 실행되도록 하였다

ec2에 탄력적 IP 할당

• ec2 > 탄력적 IP 주소 > 탄력적 IP 주소 할당
• 방금 앱을 실행한 인스턴스를 선택하고 할당해준다

• 주의 : 탄력적 IP를 할당한 이상 연결된 EC2가 종료되어 탄력적 IP에 아무것도 연결되어 있지 않으면 비용이 발생한다
• 또, 탄력적 IP는 1개까지 무료이다. EC2도 이제부터 매일 돌아가게됨(750시간 무료)으로 사실상 실행할 수 있는 인스턴스는 1개로 제한된다

ec2 보안그룹 인바운드 설정 (http, https, 앱에서 사용하는 포트 열기)

• 앱이 실행되고있는 ec2 인스턴스 보안그룹으로 들어가 인바운드 규칙을 편집한다
• http와 https를 어디서나 접근가능하게 한다
• 또 앱을 실행 포트도 어디선 접근가능하게 한다. 나의 경우 8080포트이다

freenom에서 도메인 얻기

• 내가 도메인을 얻을 때 이사이트가 엄청나게 느리기때문에 많은 인내가 필요하다..

• 수시로 404 not found가 뜬다…

• 새로고침을 몇번했는지 모르곘다

• freenom에서 나는 처음 도메인을 얻어봤다

• 그런데 여기서 삽질한 것이

• 당연히 회원가입을 먼저하고 도메인을 얻는 것인줄 알았으나,

• 도메인을 얻는 과정에서 체크아웃을 하면서 회원가입을 진행해야 정상 진행된다

• 원하는 도메인을 입력한다
• FREE 라벨이 붙은것중에서 원하는 것을 선택한다

• 원하는 도메인을 선택하면, 체크아웃 버튼이 생긴다
• 체크아웃버튼을 눌러준다

• 기간을 선택하고 Continue버튼을 누른다

• 여기서 드디어 회원가입을 진행한다..
• 나는 왼쪽 이메일 인증을 선택하였다
• 이메일 입력하고 버튼을 누르면, 해당 메일로 인증 url이 날라오는데 클릭해서 다음을 진행한다

• 이렇게 회원가입폼이 나오는데 빨간부분을 채워주고 동의체크하고 완료한다
• 이렇게 무료로 도메인 얻기에 성공했다
• 이제 aws로 돌아와서 무료로 인증서를 발급받아보자

ACM(AWS Certificate Manager)에서 SSL/TLS 인증서 발급요청

• ACM(AWS Certificate Manager)에서 인증서 요청 > 공인 인증서 요청 으로 들어간다

• 도메인 이름을 추가한다
• 나는 이 인증서에 다른 이름 추가 버튼을 통해 *.domainname 도 추가해줬다

• 검증 방법으로 DNS 검증을 선택한다

• 다음 검토 화면은 그냥 확인

• 마지막 단계 검증 화면에서 조금 기다리면 이런 화면이 나온다
• 도메인 이름 옆에 펼치기 버튼을 클릭해주면 이름 유형 값이라는 게 나오는데
• 이 값들을 freenom dns 설정에서 레코드로 추가해줄 것이다

freenom dns 설정 및 SSL/TLS 인증서 발급 완료

• freenom 사이트로 돌아와서 로그인하고
• 상단 메뉴에 Services > My domains 클릭
• Manage Domain 버튼을 클릭하고 Manage Freenom DNS를 클릭한다

• 위같은 화면이 나오면 아까 ACM에서 봤던 이름과 값들을 채워준다
• 주의 : 타입을 CNAME으로 한다
• 위와같이 매칭시켜주면된다
• 나는 *.domainname으로 추가 이름을 지정해줬는데 이 경우에는 이름과 값이 완전히 똑같기 때문에 한개의 레코드만 설정해주면된다
• *이 아니고, www. 같은 이름을 추가한 경우에는
• 레코드를 하나 더 추가하고 똑같이 매칭시켜서 입력해주면 된다
• 저장한다

• 이제 ACM으로 돌아와서 인증서 상태가 발급 완료로 변할때까지 기다리면서 유튜브 한편을 보고온다
• 나는 약 5-10분정도 기다린 것 같다
• 만약에 20분이 넘도록 검증 보류 상태라면 뭔가 잘못 따라한 것이다
• 이제 DNS 네임서버를 cloudflare로 바꿀 것이다

cloudflare 가입하고 사이트 추가

• 회원가입한다

• 회원가입을 완료하면, 사이트를 추가할 수 있는데, 내 도메인을 입력한다

• 다음화면에서 Free를 선택하고 넘어간다

• 넘어오면 이렇게 스캔하는 화면이 나온다

• 스캔이 완료되면 이런화면이 나오는데, 비어있다면,
• 아까 freenom에서 dns 설정한것처럼 똑같이 타입을 cname으로 하여 이름, 값을 넣어준다
• 완료했다면 다음화면을 넘어간다

• 그러면 네임 서버를 바꾸라는 말이 나온다
• 이제 freenom사이트로 돌아가서 네임서버를 변경해보자

freenom에서 cloudflare로 네임서버 변경

• 상단 메뉴에 Services > My domains 클릭

• Manage Domain 버튼을 클릭하고 Management Tools > Nameservers를 클릭한다

• 네임 서버를 변경해준다

• 성공하면, cloudflare화면으로 돌아와서 완료를 눌러준다

• 이런화면이 나오는데 나는 항상 https 옵션을 켜주고 완료해주었다

• 해당 사이트의 개요화면으로 넘어가는데 만약에 이런화면이 나오는데 1~5분정도 기다리면,

• 이런 화면으로 바뀐다
• 이제 aws로 돌아와 로드 밸런서를 생성해줄 것이다

aws 애플리케이션 로드 밸런서 생성

• ec2 > 로드 밸런서 > 로드 밸런서 생성 > 애플리케이션 로드 밸런서 생성

• 이름을 정해주고, 리스너에서 https를 추가해준다

• 가용영역 체크하고 다음으로 넘어간다

• 발급받은 도메인 인증서를 선택하고 다음으로 넘어간다

• ce2 인스턴스가 속해있는 보안그룹을 선택한다

• 적당히 이름을 짓고,
• 포트에서 내 앱이 사용하고있는 포트를 입력하고 다음으로 넘어간다

• 내 앱이 실행되고있는 인스턴스를 선택하고
• 등록된 항목에 추가 버튼을 누른다
• 그러면 3이라고 표시한 주황색 박스에 해당 인스턴스가 추가되는 걸 확인할 수 있다

• 검토화면에서 다음버튼

• 로드밸런서 메인화면으로 넘어와지면 생성된 로드밸런서의 DNS이름을 복사한다
• 이제 cloudflare dns 설정만 하면 끝이다!

cloudflare dns 설정

• cloudflare에 와서 위처럼 새로운 레코드를 추가하고 타입은 CNAME, 이름은 @, 대상은 방금 복사한 로드밸런서 DNS이름을 넣어주고 저장을 누르면 완료다

끝

• 이제 자신의 도메인으로 접속을 해보면…
• https..!

여기서 잠깐..!

• 처음에 npm start로 웹 앱을 실행시켰는데
• 이러면 ec2 리모트를 종료하는 순간 앱도 같이 종료된다
• nohup export PORT=8080&& node ./bin/www & 이런식으로 실행해야 ec2 리모트를 종료해도 웹 앱이 계속 살아 있다
• 참고 ; linux node app 백그라운드 실행

참고

• https://youtu.be/dMVy3BQB314