[React] 프론트 서버에 올리기 [+cerbot으로 인증서 설치하기까지 (https 보안 허용)]

1. GCP(gcloud)에서 ubuntu 운영체제의 VM 인스턴스 생성하기

[GCP > 콘솔 > Compute Engine > 인스턴스 만들기]

이름: 인스턴스의 이름을 입력합니다.
영역: 인스턴스를 배치할 영역을 선택합니다.
머신 구성: 원하는 머신 유형을 선택합니다.
부팅 디스크: "부팅 디스크" 섹션에서 "변경"을 클릭하고, "운영 체제"에서 "Ubuntu"를 선택한 후 원하는 버전을 선택합니다.
방화벽: "HTTP 트래픽 허용" 및 "HTTPS 트래픽 허용"을 필요에 따라 선택합니다.

---

2. ssh로 GCP 인스턴스 접속하기

1) ssh key 생성하기

$ ssh-keygen -t rsa -f ~/.ssh/[키이름] -C [gmail계정] -b 2048
{예시}
$ ssh-keygen -t rsa -f ~/.ssh/GCPKEY1 -C yjin@goat.ai -b 2048

 

2) ssh key 복사 후, VM 인스턴스 수정 > SSH 키 추가하기 > 붙어넣기

cat ~/.ssh/GCPKEY1.pub

 

3) local 터미널에서 ssh로 vm 인스턴스 접속하기

#ssh 접속하기
ssh -i [키파일경로] [계정]@[외부IP]
{예시} ssh -i ~/.ssh/GCPKEY1 yjin@34.64.233.243

#ssh 접속 나가기
exit

---

3. gcloud로 만든 서버에 프론트 업로드하기

1_ nginix 설치하기

# 패키지 목록을 업데이트합니다
sudo apt update

# Nginx를 설치합니다
sudo apt install nginx

# Nginx 서비스를 시작합니다
sudo systemctl start nginx

# Nginx 서비스를 부팅 시 자동으로 시작하도록 설정합니다
sudo systemctl enable nginx

# Nginx의 상태를 확인합니다
sudo systemctl status nginx

 

 

2_ ubuntu, local 각 파일 디렉토리 확인 및 build 파일 업로드

#보통 nginx root 디렉토리 확인
ls -ld /var/www/html
/var/www/html

#local의 build 파일 디렉토리 확인
ls -ld /Users/kim-yejin/PCOMPASS/pcompass_front/build
/Users/kim-yejin/PCOMPASS/pcompass_front/build

#ubuntu에서 접속
ssh -i ~/.ssh/GCPKEY yjin@34.64.233.243

# /var/www/html의 권한 확인 및 변경
sudo chown -R yjin:yjin /var/www/html
sudo chmod -R 755 /var/www/html

#local에서 build 파일을 ngnix root 디렉토리로 업로드
exit
scp -i ~/.ssh/GCPKEY1 -r /Users/kim-yejin/PCOMPASS/pcompass_front/build yjin@34.64.233.243:/var/www/html

 

3_ nginx 서버 root 수정

#ubuntu에서 접속
ssh -i ~/.ssh/GCPKEY yjin@34.22.106.241

#nginx 서버 수정
sudo nano /etc/nginx/sites-available/default
root 경로 수정: /var/www/html => /var/www/html/build

 

-nginx/sites-available/default 파일을 다음과 같이 수정해주기

server {
    listen 80;
    server_name pco.goatfarm.ai;

    location /.well-known/acme-challenge/ {
        root /var/www/html/build;  # 이 경로는 Certbot이 챌린지 파일을 저장할 위치입니다.
    }

    root /var/www/html/build;

    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

 

 

4_ 서버 재시작

#ngnix 재시작
sudo systemctl restart nginx

 

이까지 해주면 http://34.22.106.241(외부주소)를 브라우저에 띄우면 프론트 화면이 뜬다!

---

4. Cerbot 로인증서 설치

1) Cerbot과 웹 서버의 플러그인 (Ngnix) 설치

sudo apt update
sudo apt install certbot python3-certbot-nginx

 

2) Godaddy에서 domain 이름 설정하기

 

3) Cerbot 실행하고 Ngnix 설정 파일 수정하기

#nginx 서비스 시작 및 부팅 시 자동 시작 설정
sudo systemctl start nginx
sudo systemctl enable nginx

#방화벽 설정에서 HTTP 및 HTTPS 트래픽 허용
sudo ufw allow 'Nginx Full'

 

레코드 배포 시간 (ex. 1시간) 보통은 넉넉잡아 3~4시간 후에 DNS 배포가 되기 때문에

여기서부터는 기다렸다가 아래의 과정을 진행하자.

#도메인의 레코드 확인 및 설정
dig A cul.goatfarm.ai +short

#로컬 /etc/hosts 파일 수정
sudo nano /etc/hosts

#해당 줄 추가
34.47.66.7 cul.goatfarm.ai

 

다음과 같이 이제 레코드들 중 34.47.66.7만 가르키는 것을 볼 수 있다.

#기본 nginx 설정 확인 (nano로 열어서 아래와 같이 수정)
sudo nano /etc/nginx/sites-available/default

-> root /var/www/html/build로 경로 수정

#nginx 설정 파일 테스트
sudo nginx -t

#cerbot의 파일 접근 권한 부여
sudo chown -R www-data:www-data /var/www/html/build
sudo chmod -R 755 /var/www/html/build

#문제 없을 시 nginx 재시작
sudo systemctl restart nginx

---

sudo certbot --nginx

 

첫 번 째 질문, which names would you like to activate HTTPS for? 

에는 도메인 설정해줬던 pco.goatfarm.ai의 번호 1번을 선택해주면 된다.

여기서 nginx/sites-available/default 내의 server name와 domain name이 일치하고

root 경로가 적절하다면 다음 질문으로 넘어간다.

 

두 번째 질문, please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.

에서는 https로 redirect 하고 싶은 경우에 2번을 선택하면 된다.