[CI/CD] EC2+도커+젠킨스+NIGNX 배포하기 (end)

이번에는 배포 마지막 시간인 nginx와 SSL을 적용하여 https로 접속이 가능하게 할 것이다. 현재상황은 http:{도메인}:3000 번으로 접근하면 사이트가 잘 나오는것 까지 확인했습니다. 하지만 리버스프록시와 https를 적용하여 안전하게 운영하고 싶습니다. 따라서 nignx를 적용해서 내부포트가 어떻게 적용되어있는지 알려주지 않게, https를 적용해서 안전한 사이트를 운영하려고 합니다.

 

📋 전체 과정 요약

1. 현재 Docker 컨테이너 내리기 및 삭제
2. 새로운 Dockerfile 생성 (React + Nginx 통합)  HTTP로 서비스 확인
3. SSL 인증서 발급 및 HTTPS 적용
4. 최종적으로 Docker로 배포하여 HTTPS 서비스 확인

순으로 진행할 것입니다.

 

현재 실행중인 React Container 중지 후 삭제하기

docker ps

우분투에서 현재 실행중인 도커 컨테이너를 확인후 리액트 컨테이너를 중지 후 삭제를 진행합니다.

# 컨테이너 ID로 컨테이너 중지
# sudo docker stop {컨테이너 ID}
sudo docker stop d1d081564ff0

# 컨테이너 삭제
sudo docker rm d1d081564ff0

 

다시 docker ps를 통해 컨테이너를 확인해봅니다

docker ps

컨테이너를 잘 삭제한 것을 확인할 수 있습니다.

새로운 도커파일, nginx.conf 파일 생성

1️⃣dockfile 작성

리액트로 돌아가서 dockerfile을 변경해줍니다.

# Step 1: React 앱 빌드
FROM node:20 AS build

WORKDIR /app

# package.json과 package-lock.json 복사
COPY package*.json ./

# 의존성 설치
RUN npm install

# 프로젝트 전체 복사
COPY . .

# React 앱 빌드
RUN npm run build

# Step 2: Nginx로 정적 파일 서빙
FROM nginx:latest

# Nginx 설정 파일 복사
COPY nginx.conf /etc/nginx/nginx.conf

# 빌드된 React 앱 복사
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

 

2️⃣ngix.conf 파일 작성

# Nginx 메인 설정 파일
user www-data;
worker_processes auto;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name {서버주소}; //가비아에서 만들어놓은 주소

        root /usr/share/nginx/html;
        index index.html index.htm;

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

        location /api/ {
            proxy_pass http://{백엔드주소}:8080; # 백엔드 서버로 프록시
            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;
        }
    }
}

 

3️⃣.dockerignore 파일 작성

node_modules
build
frontend.tar.gz
.git
.dockerignore
Dockerfile

 

프로젝트 압축 및 서버로 전송

1️⃣ 프로젝트 압축 vscode에서 진행

 

2️⃣ 서버로 파일 전송

scp -i "{key.pem 주소}" frontend.tar.gz ubuntu@{우분투서버주소}:/home/ubuntu/

 

서버에서 압축 해제 및 Docker 빌드

1️⃣ 서버에 접속

ssh -i "{key.pem 주소}" ubuntu@{서버주소}

 

2️⃣ 압축 해제 및 Docker 빌드

cd /home/ubuntu
tar -xzvf frontend.tar.gz
cd frontend

# Docker 이미지 빌드
sudo docker build -t my-react-nginx-app .

 

3️⃣ Docker 컨테이너 실행 및 배포

sudo docker run -d --restart always -p 80:80 my-react-nginx-app

 

이렇게 진행하면 

 

이렇게 뒤에 :3000없이 리버스프록시가 완벽히 적용된것을 볼 수 있다.

 

 

SSL인증서 발급 및 적용

우분투 서버에서 Certbot을 설치한 후 Nginx에서 인증서를 사용하는 방식으로 진행하겠습니다.

1️⃣Certbot 설치(우분투서버에서 직접)

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

 

2️⃣ SSL 인증서 발급

sudo certbot --nginx -d smartwms.shop

 

진행하다보면 밑과같은 메시지가 나올것이다.

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Enter email address (used for urgent renewal and security notices)
 (Enter 'c' to cancel):

#이메일을 입력해준다. 이메일은 인증서 갱신, 만료 알림 및 긴급 보안 공지에 사용

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server at
https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y

#Let's Encrypt 서비스 약관동의 Y

 

Would you be willing, once your first certificate is successfully issued, to
share your email address with the Electronic Frontier Foundation, a founding
partner of the Let's Encrypt project and the non-profit organization that
develops Certbot? We'd like to send you email about our work encrypting the web,
EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: 

#이메일로 보안 알림을 수신할지 여부 Y

 

3️⃣ 발급된 인증서를 Nginx에서 참조

sudo certbot --nginx -d smartwms.shop

 

4️⃣ Nginx 설정 파일 열기 

sudo nano /etc/nginx/sites-available/default

 

5️⃣ Nginx 설정 변경하기 

# HTTP에서 HTTPS로 리다이렉트
server {
    listen 80;
    server_name smartwms.shop;
    return 301 https://$host$request_uri;
}

# HTTPS 설정
server {
    listen 443 ssl;
    server_name smartwms.shop;

    ssl_certificate /etc/letsencrypt/live/smartwms.shop/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/smartwms.shop/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # React 앱 프론트엔드 제공
    location / {
        proxy_pass http://127.0.0.1:8081; # React 앱 Docker 컨테이너로 프록시
        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;
    }

    # 백엔드 API 프록시 설정
    location /api/ {
        proxy_pass http://127.0.0.1:8080; # 백엔드 서버로 프록시
        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;
    }
}

 

6️⃣ Nginx 설정 테스트

sudo nginx -t

 

7️⃣ Nginx 재시작 

sudo systemctl restart nginx

 

그리고 브라우저에서 다시 접속을 확인해보면 

https로 잘 설정된것까지 완료할수 있다.