UpLog 프론트엔드 CI/CD3(도메인 설정 및 Nginx로 SSL 적용하기)

우선 도메인 연결을 위해 가비아에서 도메인을 구입했다. 그리고 처음엔 AWS의 Route53을 활용하여 DNS 연결을 했다. 하지만 Route53은 과금이 나왔다. 그렇기에 나중에 가비아에서 DNS 연결하는 것으로 바꿨다. 2가지 방식을 다 기록했기 때문에 모두 기록하겠다.

탄력적 IP 연결하기

도메인을 연결하려면 고정된 IP가 필요하다. 하지만 AWS는 인스턴스를 종료했다가 시작하면 IP가 지속적으로 바뀐다. 

그렇기에 탄력적 IP를 발급받아야 한다. 주의할 점으로는 탄력적 IP는 인스턴스와 연결되어야지만 무료이다!

만약 인스턴스를 중지하거나 삭제하면 과금이 발생한다!!!

 

인스턴스에 가서 탄력적 IP를 할당받았다.

그리고 프론트엔드 인스턴스와 할당받은 탄력적 IP를 연결했다.

---

도메인 설정하기(Route53, 가비아)

첫 번째 방법, Route53(유료!)

우선 AWS Route53에서 호스팅 영역을 생성했다.

그러면 이런 화면이 나온다. 그중에서 NS 유형에 있는 오른쪽 4개의 값을 가비아에 입력해야 한다. 이때 맨 뒤 "."은 다 제거하고 입력한다.

이렇게 모두 입력했다.

 

이제 레코드 생성을 누르고 위에서 할당받은 탄력적 IP를 저 가린 부분에 넣어주면 된다. 

레코드 이름에는 빈 값으로 하면 uplog.store에 배정이 된다. 그리고 레코드 유형은 A 타입으로 하면 된다.

저장을 하고 레코드 이름에 www를 넣고 레코드를 하나 더 생성해야 한다. 그래야 www.uplog.store,  uplog.store 2개 다 등록된다.

 

이렇게 하면 Route53을 이용해서 DNS 등록이 된다!

두 번째 방법, 가비아(무료!!)

가비아에서 연결을 하면 요금 청구가 되지 않는다.

 

내가 산 도메인에 들어가서 DNS 정보에 들어갔다.

오른쪽 설정 버튼을 눌렀다.

도메인 연결을 하려고 했는데

이런 alert가 떴다. 가비아 네임서버로 설정되어야 했다. 기존에는 aws route53에 연결하기 위해서 route53에 있는 네임서버로 바꿨었는데 이것이 문제였다. 그래서 가비아 네임서버로 바꿨다.

그 후에 이렇게 레코드 수정을 하면 도메인 등록이 된다!

---

Nginx 설정 및 SSL 인증서 발급

이제 도메인 연결이 됐으니까 Nginx를 리버스 프록시로 사용해서 도메인과 연결해 주는 통로로 사용하면 된다.

 

-최종 nginx.conf

user root;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
	server {
		server_name uplog.store www.uplog.store;
		location / {
			proxy_set_header HOST $host;
			proxy_pass http://127.0.0.1:3070;
			proxy_redirect off;
		}

   		listen 443 ssl; # managed by Certbot
    		ssl_certificate /etc/letsencrypt/live/uplog.store/fullchain.pem; # managed by Certbot
  		ssl_certificate_key /etc/letsencrypt/live/uplog.store/privkey.pem; # managed by Certbot
    		include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    		ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
	}

	server {
   		if ($host = uplog.store) {
        		return 301 https://$host$request_uri;
    		} # managed by Certbot
		if ($host = www.uplog.store) {
     			 return 301 https://uplog.store$request_uri;
    		}
    	}
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
#
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}

 

-Nginx 설치 및 설정

sudo apt-get install nginx
sudo vim /etc/nginx/nginx.conf

Nginx를 설치하고 /etc/nignx/nginx.conf에 들어갔다. 

그러면 이런 식으로 기본적인 세팅이 되어 있을 것인데, 이후에 SSL 인증서를 발급받고 다시 수정하겠다.

 

-SSL 인증서 발급

SSL 인증서는 Let's Encrypt에서 발급받았다.

 

sudo apt update
sudo apt-get install letsencrypt -y
sudo apt install certbot python3-certbot-nginx

이렇게 버전이 뜨면 잘 설치된 것이다.

 

sudo apt install certbot python3-certbot-nginx

이후에 위 명령어를 입력하고 이메일, 사이트 주소를 입력하면 된다.

 

이제 인증서가 발급되었다.

Let's Encrypt는 3개월 동안 유효하기 때문에 주기적으로 갱신하거나, 자동 갱신 알고리즘을 만들어야 한다.

 

-myapp.conf 설정하기

sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default

일단 기본 설정 파일들이 중복될 수 있기에 삭제했다.

 

cd /etc/nginx/sites-available/
sudo touch myapp.conf

그리고 저 경로로 이동하고 myapp.conf를 만들었다.

 

server {
  listen 3070;
  location / {
    root   /home/ubuntu/deploy-fe/dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

3070 포트에 대한 설정을 했다.

/home/ubuntu/deploy-fe/dist이 경로에 있는 index.html을 사용한다는 의미이며, index.html이 없으면 index.htm을 사용한다는 의미이다.

 

sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf

이후에 웹서버가 동작할 때 sites-enabled에 있는 설정 파일을 참조한다.

 

-nginx.conf 파일 수정하기

SSL 인증서를 발급받으면 certbot이 알아서 내용을 수정해 준다. 하지만 이걸 그대로 사용하면 동작하지 않는다.

 

nginx.conf

우선 맨 첫 줄을 user root;로 바꿨다.

 

그리고 중간 내용을 이런 식으로 바꿨다.

uplog.store뿐만 아니라 www.uplog.store도 추가해 줬다. 

또한 마지막 server 부분에 www.uplog.store로 요청이 오면 www를 제외하도록 수정했다. 

 

        server {
                server_name uplog.store www.uplog.store;
                listen 80;
                return 404; # managed by Certbot
        }

그리고 이 코드는 제거했다.

 

https://uplog.store 

UpLog

이러면 이제 잘 접속된다!!!

SSL 자동 갱신

-자동 갱신 적용

corn을 사용하여 자동 갱신을 하면 된다.

 

cd /bin

corn 실행을 가장 안정적으로 하려면 /bin 폴더에 자동 실행 파일이 있어야 하기 때문에 /bin 경로로 이동한다.

 

sudo vi letsencrypt.sh

그렇기에 위 코드를 입력해 자동 실행 파일을 만들고 

!/bin/sh
/etc/init.d/nginx stop
/usr/local/bin/certbot renew> /var/log/letsencrypt/le-renew.log
fuser -k 80/tcp
/etc/init.d/nginx start

이 내용을 letsencrypt.sh에 넣어줬다.

 

sudo chmod +x letsencrypt.sh

내용을 입력하고 권한을 줬다.

 

crontab -e

그 후에 crontab을 열어 편집 상태로 만들었다.

 

30 4 * * 0 letsencrypt.sh

이 명령을 줬다. 매일 4시 30분에 갱신한다는 의미이다.

 

service cron start

마지막으로 cron을 재시작했다.

 

-적용 테스트

sudo certbot renew --dry-run

이 명령어를 이용해 잘 적용되었는지 테스트 할 수 있다.

 

Congratulations, all simulated renewals succeeded:
  /etc/letsencrypt/live/uplog.store/fullchain.pem (success)

이 부분이 나오면 성공한 것이다!

 

-다음 글

https://shortcoding.tistory.com/513

UpLog 프론트엔드 CI/CD4(URL 카톡 공유, AWS 과금 알람, 적용 후기)

 

-출처

https://happist.com/548924/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-tips-lets-encrypt-%EB%AC%B4%EB%A3%8C-ssl%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%B0%9C%EA%B8%89-%EB%B0%8F-%EC%9E%90%EB%8F%99-%EA%B0%B1%EC%8B%A0

Let’s Encrypt SSL 인증서 발급 및 자동 갱신 방법(업데이트) – 꿈꾸는섬

 

이렇게 해서 도메인 연결, SSL 인증 발급하는 법을 마치겠다!

다음 글은 마지막 글이며 카톡에 링크 공유 시 보일 내용 꾸미기와 AWS 과금 알람에 대해 다루겠다.