프론트엔드 CI/CD AWS 배포하기3(도메인 등록, 가비아, SSL 적용)

탄력적 IP 연결하기

도메인을 연결하기 위해 고정된 IP가 필요로 하는데 현재 지금은 고정된 IP가 없다. 고정된 IP를 할당하기 위하여 탄력적 IP를 발급받아 IP를 고정시켜야 한다. 

 

탄력적 IP를 할당받고

탄력적 IP주소를 인스턴스와 연동을 하면 IP가 고정이 된다.

 

도메인 설정

 

먼저 사용해야 할 도메인을 가비아에서 돈을 주고 구입을 한다.

https://domain.gabia.com/

가비아: 대한민국 도메인 점유율 1위

 

구입한 도메인을 가비아에 등록한다.

 

 

 

Nginx 설정

 

이제 우리가 배포한 코드를 화면에 띄워보자

 

1. Nginx 설치

 

sudo apt-get install nginx

설치가 완료되면 자동으로 /etc/nginx  아래에 설정파일들이 추가가 된다.

겹칠 수 있으니 전부 제거하고 시작하자

 

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

이제 내가 배포해 화면에 보여주기 위한 코드를 작성한다.

 

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

 

이렇게 coconote.conf의 파일의 내용을 수정하면 된다.

/home/ubuntu/deploy-fe/dist 이 경로는 React 빌드 결과의 산출물이 있는 파일 경로이다.

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

 

/etc/nginx/sites-available/에 설정파일을 만들었으면, 

아래 명령어로 이 파일의 심볼릭 링크를 /etc/nginx/sites-enabled/에도 만든다.
이름처럼 웹서버가 동작될 때 sites-enabled에 있는 설정파일을 참조한다.

 

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

 

 

2. Nginx 설정 파일 수정

sudo vi /etc/nginx/nginx.conf

 

3. Nginx 설정 파일 코드

 

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 coconote.shop www.coconote.shop;
                location / {
                        proxy_set_header HOST $host;
                        proxy_pass http://127.0.0.1:3000;
                        proxy_redirect off;
                }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/coconote.shop/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/coconote.shop/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 = coconote.shop) {
                        return 301 https://$host$request_uri;
                } # managed by Certbot
                if ($host = www.coconote.shop) {
                        return 301 https://coconote.shop$request_uri;
                }
        }
}

 

4. 설정 완료

sudo systemctl stop nginx
sudo systemctl start nginx

설정이 완료되면 Nginx를 재시작해야 한다.

 

 

SSL 인증서 발급받기

SSL인증서는 Let's Encrypt에서 발급받아 사용을 한다.

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

 

발급받기

sudo certbot --nginx

위 명령어를 치고 자신의 이메일, 사이트 주소를 입력하면 정상적으로 발급이 된다.

 

이렇게 인증서를 발급받으면 certbot이 nginx.conf 내용을 수정해 준다.

 

수정된 내용은 위에 코드에서 확인할 수 있다.

 

이후 사이트에 들어가지나 확인을 해보면

 

https://coconote.shop

코코노트

 

접속이 되는 것을 확인 할 수 있다.

 

 

 

출처

https://velog.io/@eeapbh/EC2%EC%97%90-react-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B04-github-actions-S3-codedeploy-Nginx%EB%A1%9C-React-%EC%95%B1-%EB%B0%B0%ED%8F%AC

EC2에 react 자동 배포하기4 (github actions + S3 + codedeploy) - Nginx로 React 앱 배포