유료 SSL 인증서 신규 설치, 유료 도메인 네임, 웹 서버 Nginx를 이용하여 웹페이지 HTTPS 적용하기(React, SSL, HTTPS, Web Server, Nginx) for window

유료 SSL 인증서, 유료 도메인, 웹 서버 Nginx를 이용하여 웹페이지 HTTPS 적용하기 (React, SSL, HTTPS, Web Server, Nginx) for window

이번에는 저렴한 유료 SSL를 구매하여 DV 단일 도메인 인증서(SSL)를 등록하는 방법에 대해 포스팅 하겠습니다.

 

도메인의 경우 호스팅 KR 페이지를 이용하여 구매하였습니다.

DNS 레코드 추가

 

DNS 레코드 관리에서 DNS 레코드 A 유형으로 서비스할 공인 IP를 추가 해 줍니다. 여기서 A 유형의 레코드는 도메인의 IPv4 주소를 갖고 있는 레코드 입니다. AAAA 레코드는 IPv6주소를 포함하는 레코드 입니다.

@의 경우 root 도메인 레코드 입니다. domain.com, 또 다른 도메인 레코드 www.domain.com 입니다. 해당 도메인으로 접근하면 해당 공인 IP에 요청을 보내게 되고, 제가 연결시킨 해당 서버의 Nginx가 요청을 받게됩니다.

 

 번외편으로 CNAME 레코드 또한 많이 사용되는데 CNAME 레코드는 하나의 도메인이나 하위 도메인을 다른 도메인으로 전달합니다. IP 주소가 아닌 도메인 네임을 전달합니다. 도메인 네임 설정이 완료되었다면 인증서를 생성합니다.

 

필자의 경우 PositiveSSL 유료 인증서를 구매하였습니다(1년, 단일 도메인 DV 가격은 만원 정도 했었습니다.) 또한 무료 인증서도 좋은 것이 있습니다. 테스트나 연습용으로 사용하기에 좋습니다. 링크는 아래와 같습니다.

 

무료 인증서

https://letsencrypt.org/

Let's Encrypt

 

인증서를 생성하였다면 Nginx 설정을 진행합니다.

nginx.conf 코드는 다음과 같습니다.

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {

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

    sendfile        on;

    keepalive_timeout  65;

	# HTTP
    server {
        listen 80;
		server_name dalbyutility.com www.dalbyutility.com;
		
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
		
		
		return 301 https://dalbyutility.com$request_uri;
		
		location / {
			root   html;
		}

    }


    # HTTPS server
    server {
        listen       443 ssl;
        server_name dalbyutility.com www.dalbyutility.com;

		# 인증서
		ssl_certificate \ssl\dalbyutility_com__bundle.pem;
		ssl_certificate_key \ssl\dalbyutility_com__rsa.key;
		
		ssl_protocols TLSv1.2;
		ssl_ciphers 'HIGH:!aNULL:!MD5';

		# Other SSL settings (optional but recommended)
		ssl_prefer_server_ciphers on;
		ssl_session_cache shared:SSL:10m;
		ssl_session_timeout 10m;
		
        location / {
		
			add_header 'Access-Control-Allow-Origin' '*';
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
			root   html;
			proxy_pass http://애플리케이션ip: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;
        }
    }

}

 

받은 인증서 파일 중 필요한 파일은 다음과 같습니다.

dalbyutility_com__bundle.pem (CRT, CA 파일을 통합한 파일 입니다.(nginx의 경우 통합 파일로 적용해야 합니다.))

dalbyutility_com__rsa.key 개인키 파일 입니다.

파일이 xxx.pem 파일로 되어있는데 다음과 같습니다.

ca-bundle.pem -> ca
crt.pem -> crt
key-> key

 

conf 폴더 경로에 ssl 폴더를 생성하여 처리하였고, proxy_pass에 테스트용으로 react 웹사이트를 연결했습니다. 그리고 각각 코드를 살펴보면 다음과 같습니다.

 

server_name

해당 요청에 따라 어떤 서버 코드가 사용될 것 인지 설정합니다.

 

ssl_certificate, ssl_certificate_key

인증서 관련 파일

 

ssl_prefer_server_ciphers

SSLv3 및 TLS protocol을 사용할 때 client 암호보다 server 암호를 우선 순위로 지정합니다. (주석)

 

ssl_protocols

지정된 protocol를 활성화 합니다. TLSv1.2

 

ssl_session_cache

세션를 저장하는 캐시의 크기를 설정합니다. shared:SSL:10m

 

ssl_session_timeout 10m

client가 세션를 사용할 수 있는 시간을 설정합니다. (10m == 10분)

 

ssl_ciphers 'HIGH:!aNULL:!MD5'

client가 지원하는 암호 목록을 반환합니다. 

 

add_header

상황에 따라 필요한 헤더정보를 추가합니다.

 

proxy_set_header

프록시 서버에 전달된 요청 헤더에 필드를 재정의하거나 추가합니다.

 

 

 

모든 설정이 완료되었다면, 테스트 진행 해 보면 결과는 다음과 같습니다.

---

테스트 화면

SSL 인증서가 적용된 react 웹사이트 인증서 내용입니다.

인증서 적용

ssl 적용

 

모바일 https 도메인 접속 테스트

모바일 테스트

모바일 또한 안전한 연결, 정상적으로 확인 됩니다.