초보 개발자의 일기
프론트엔드 CI/CD AWS 배포하기3(도메인 등록, 가비아, SSL 적용) 본문
탄력적 IP 연결하기
도메인을 연결하기 위해 고정된 IP가 필요로 하는데 현재 지금은 고정된 IP가 없다. 고정된 IP를 할당하기 위하여 탄력적 IP를 발급받아 IP를 고정시켜야 한다.
탄력적 IP를 할당받고
탄력적 IP주소를 인스턴스와 연동을 하면 IP가 고정이 된다.
도메인 설정
먼저 사용해야 할 도메인을 가비아에서 돈을 주고 구입을 한다.
가비아: 대한민국 도메인 점유율 1위
대한민국 100만 도메인 등록 업체
domain.gabia.com
구입한 도메인을 가비아에 등록한다.
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 내용을 수정해 준다.
수정된 내용은 위에 코드에서 확인할 수 있다.
이후 사이트에 들어가지나 확인을 해보면
코코노트
COCOCOTE로 쉬운 프로젝트 관리하기
coconote.shop
접속이 되는 것을 확인 할 수 있다.
출처
EC2에 react 자동 배포하기4 (github actions + S3 + codedeploy) - Nginx로 React 앱 배포
Nginx는 웹서버로 React 앱을 배포할 때 사용할 수 있다.우분투 18.04 환경에서 Nginx로 React앱을 배포해보자Nginx를 설치한다.설치가 끝나면 /etc/nginx 경로에 파일들이 생성된다.기본화면으로 연결되는
velog.io
'프로젝트 > COCONOTE' 카테고리의 다른 글
프론트엔드 CI/CD AWS 배포하기2(Code Deploy, S3 코드 업로드) (1) | 2023.09.17 |
---|---|
프론트엔드 CI/CD AWS 배포하기(EC2 생성, 버킷 생성, S3) (0) | 2023.09.17 |
accessToken, refreshToken으로 서버 인증받기 (0) | 2023.08.25 |
Cookie 도입기 (0) | 2023.08.25 |