← 목록으로
infrastructure#AWS#배포#infra#Docker#백엔드

백엔드 서버 배포기 (2) – HTTPS 설정 및 백엔드/프론트엔드 소스코드 수정

YEJI · 2025. 04. 09. 09:00 · 3분
목차

✅ 1단계: 도메인 A 레코드 설정

💡 목표

구매한 도메인을 EC2 퍼블릭 IP와 연결하여 접근 가능하게 만들기

1. 도메인 관리 콘솔 접속

저는 가비아에서 도메인을 구매했고, AWS Route 53에 네임서버를 연결해둔 상태입니다. 도메인을 구매한 플랫폼 또는 Route 53에 접속하여 A 레코드를 설정합니다.

참고 자료
[네트워크] SSL/TLS 인증서 발급 및 HTTPS 전환하기

2. A 레코드 추가

NameTypeValue
@AEC2 퍼블릭 IPv4 주소
  • TTL(Time to Live)은 기본값(300)으로 설정하면 됩니다.

✅ 2단계: EC2에 Nginx 설치

bash
sudo apt update
sudo apt install nginx -y

설치 확인:

bash
nginx -v

✅ 3단계: Nginx 리버스 프록시 설정

💡 목표

도메인으로 들어온 HTTP 요청을 내부 Spring Boot 서버(8080 포트)로 전달하기

설정 절차

  1. 기본 설정 백업:
bash
sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak
  1. 새 설정 파일 열기:
bash
sudo nano /etc/nginx/sites-available/default
  1. 아래 내용 작성 (도메인과 포트는 본인에 맞게 수정):
nginx
server {
listen 80;
server_name duck-map.shop;
 
location / {
proxy_pass http://localhost: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;
}
}

  1. 저장 및 종료 (Ctrl + O, Enter, Ctrl + X)

  2. 설정 적용:

bash
sudo systemctl restart nginx

✅ 4단계: Certbot으로 HTTPS 인증서 발급

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

1. 인증서 발급 실행

bash
sudo certbot --nginx -d duck-map.shop
  • 이메일 입력
  • 약관 동의 (Y)
  • 리다이렉션 설정 (2번 권장: HTTP ➜ HTTPS 자동 리다이렉트)

✅ 5단계: HTTPS 정상 동작 확인

  • 브라우저에서 https://duck-map.shop 접속
  • 🔒 자물쇠 아이콘이 보이면 성공
  • Swagger 페이지가 있다면 https://duck-map.shop/swagger 도 열어보기

✅ 6단계 (선택): 인증서 자동 갱신 테스트

bash
sudo certbot renew --dry-run

✅ 💡 위 단계들은 "HTTPS 적용 및 리버스 프록시 구성" 실습의 연장선입니다.

🎯 백엔드 및 프론트엔드 소스코드 수정: 그룹 아티스트 렌더링 로직 개선

초기 상태에서는 그룹 아티스트와 그룹 멤버들이 한 화면에 모두 노출되는 방식이었습니다.

기존 방식 예시

하지만 기대했던 흐름은 다음과 같았습니다:

  • 처음에는 그룹만 리스트에 표시되고,
  • 특정 그룹을 클릭했을 때 해당 그룹의 멤버들만 동적으로 렌더링되도록 처리

수정된 방식 예시1 수정된 방식 예시2

그런데 관리자 페이지에서도 동일한 API를 사용하고 있었고, 그 경우는 모든 아티스트가 한 번에 보이는 것이 관리 측면에서 더 유리했습니다. 그래서 조건 분기를 추가하여 관리자는 기존처럼 전체 리스트를 보여주고, 일반 사용자는 그룹/멤버 분리 방식으로 렌더링하도록 개선했습니다.

이 수정은 GPT와 협업하며 내부 코드 흐름을 분석해가며 진행했으며, 예상했던 흐름대로 로직을 구현했습니다.

🔧 프론트엔드 로직 요약

📌 상태 관리 추가

tsx
const [isGroupMode, setIsGroupMode] = useState(false);
const [groupId, setGroupId] = useState<number | null>(null);

📌 그룹 멤버 호출 (RTK Query)

tsx
const { data: groupArtists = [], isLoading: isGroupLoading } =
useGetArtistOfGroupQuery(groupId!, {
skip: groupId === null,
});

📌 아티스트 클릭 핸들링

tsx
const handleArtistClick = (artist: Artist) => {
setCurrentArtist(artist);
 
if (artist.groupId) {
setIsGroupMode(true);
setGroupId(artist.id);
}
};

📌 조건부 렌더링

tsx
if (isGroupMode && groupArtists.length > 0) {
content = groupArtists.map(...);
} else if (artists.length !== 0) {
content = artists.map(...);
} else if (isLoading || isGroupLoading) {
content = <div>아티스트 목록을 불러오는 중입니다</div>;
} else if (isError) {
content = <div>{error.toString()}</div>;
} else {
content = <div>아티스트가 없습니다</div>;
}

📌 뒤로가기 버튼 구현

tsx
{
isGroupMode && groupArtists.length > 0 && (
<button
onClick={() => {
setIsGroupMode(false);
setGroupId(null);
setPage(0);
}}
>
← 뒤로가기
</button>
);
}

🐞 발견한 오류 및 다음 개선 계획

  • 이벤트 무한스크롤 시 좋아요 클릭하면 중복 렌더링되는 현상
  • 이벤트/리뷰 사진 이동 버튼이 새로고침해야만 보이는 문제
  • 로그아웃 후 다른 계정 로그인 시 이전 계정 캐시가 남는 문제
  • 이미지 업로드 실패 시 대기 모달이 안 사라지는 이슈

해당 오류들을 다음 블로그 글에서 하나씩 해결해나갈 예정입니다. 감사합니다 🙇‍♀️