nextjs 배포 하기 전 개념부터

     

목차

 

기존에 vercel을 통해 서버를 배포했었지만 서버리스 사용 방식의 무료 사용량 초과로 aws를 통한 배포를 진행했고 ssl은 인증과 개발, 운영 서버의 분리는 nginx로 세팅하였는데 왜 이런식으로 진행했는지 상세히 알아보자

 

HTTPS

HTTPS는 SSL/TLS 인증서를 통해 기존 HTTP에 보안 계층을 추가하였다. 443번 포트를 사용하며 아래와 같은 프로세스를 통해 통신한다.

 

1. 브라우저에 https://mokkoji.site 형식을 입력하여 HTTPS 사이트를 방문한다.

2. 브라우저는 서버에 SSL 인증서를 요청하여 사이트의 신뢰성을 검증하려고 시도한다.

3. 서버는 공개키가 포함된 SSL 인증서를 응답한다.

4. 브라우저는 SSL 인증서의 유효성을 검증한다. 이후 공개키를 사용하여 세션키를 발급하고 서버에 전송한다.

5. 서버는 비밀키를 사용하여 브라우저에서 발급한 세션키를 얻는다.

6. 브라우저와 서버는 동일한 세션키를 공유하므로 이후 데이터 전달 시 세션키를 통해 암호화/복호화를 한다.

 

 

HTTPS는 HTTP에 비해 아래와 같은 장점이 있다.

• 세션키를 통해 데이터를 암호화한 형태로 전달하기 때문에 민감 정보를 보호할 수 있다.
• 검색 엔진에게 HTTP보다 HTTPS가 신뢰성이 더 높기 때문에, 웹사이트 컨텐츠 우선순위를 더 높게 받을 수 있다.(seo 최적화)

 

 

web server

소프트웨어와 하드웨어로 구분된다.

하드웨어 - web 서버가 설치되어 있는 컴퓨터

소프트웨어 - 웹 브라우저 클라이언트로부터 HTTP 요청을 받아 정적인 컨텐츠 (html, jpeg, css 등)을 제공하는 컴퓨터 프로그래밍

 

web server의 기능

HTTP 프로토콜 기반으로 하여 클라이언트의 요청을 서비스하는 기능을 담당한다.

 

1. WAS를 거치지 않고 바로 정적인 컨텐츠를 제공한다.

2. 클라이언트의 요청을 was에 보내고, was가 처리한 결과를 클라이언트에게 전달한다.

이때 클라이언트는 일반적으로 웹 브라우저를 의미한다.

web server 예시) aparche, server nginx, IIS(윈도우 전용 웹 서버 등)

 

was

db 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해 만들어진 application server

http를 통해 컴퓨터나 장치에 애플리케이션을 수행해 주는 미들웨어이다.

 

웹 컨테이너 또는 서블렛 컨테이너라고도 불린다.

- 컨테이너란 jsp(html 안에 java 코드를 직접 섞어서 동적으로 웹페이지를 만드는 기술), servlet(JSP보다 더 순수한 서버 측 자바 프로그램)을 실행시킬 수 있는 소프트웨어를 말한다.

 

was 역할

was = web server + web container

web server 기능들을 구조적으로 분리하여 처리하고자 하는 목적으로 제시되었다.

- 분산 트랜잭션, 보안, 메시징, 쓰레드 처리 등의 기능을 처리하는 분산 환경에서 사용된다.

- 주로 db 서버와 같이 수행된다.

-> 현재 was가 가지고 있는 web server도 정적인 컨텐츠를 처리하는 데 있어서 성능상 큰 차이가 없다.

 

was 주요 기능

1. 프로그램 실행 환경과 db 접속 기능 제공

2. 여러개의 트랜잭션(논리적인 작업 단위) 관리 기능

3. 업무를 처리하는 비즈니스 로직 수행

 

 

web server와 was를 그렇다면 왜 분리할까?

1. 클라이언트에 이미지 파일을 보내는 과정을 생각해보자.

클라이언트는 html 문서를 먼저 받고 그에 맞게 필요한 이미지 파일들을 다시 서버로 요청하면 그때서야 이미지 파일을 받아온다.

이때 web server를 통해 정적인 파일들을 application server까지 까지 않고 앞단에서 빠르게 보내줄 수 있다.

 

2. 웹 페이지는 동적 컨텐츠와 정적 컨텐츠 모두 존재한다.

이때 web server만을 이용하게 된다면 사용자가 원하는 요청에 대한 결과값을 모두 미리 만들어 놓고 서비스해야 하게 되면 자원이 절대적으로 부족하다.

따라서 was를 통해 요청에 맞는 데이터를 db에 가져와서 비지니스 로직에 맞게 그때 그때 결과를 만들어 제공함으로써 자원을 효율적으로 사용할 수 있다.

 

그렇다면 WAS가 Web Server의 기능도 모두 수행하면 되지 않을까?

 

1. 기능을 분리하여 서버 부하 방지

• WAS는 DB 조회나 다양한 로직을 처리하느라 바쁘기 때문에 단순한 정적 컨텐츠는 Web Server에서 빠르게 클라이언트에 제공하는 것이 좋다.
• WAS는 기본적으로 동적 컨텐츠를 제공하기 위해 존재하는 서버이다.
• 만약 정적 컨텐츠 요청까지 WAS가 처리한다면 정적 데이터 처리로 인해 부하가 커지게 되고, 동적 컨텐츠의 처리가 지연됨에 따라 수행 속도가 느려진다.
• 즉, 이로 인해 페이지 노출 시간이 늘어나게 될 것이다.

2. 물리적으로 분리하여 보안 강화

• SSL에 대한 암복호화 처리에 Web Server를 사용

3. 여러 대의 WAS를 연결 가능

• Load Balancing을 위해서 Web Server를 사용
• fail over(장애 극복), fail back 처리에 유리
• 특히 대용량 웹 어플리케이션의 경우(여러 개의 서버 사용) Web Server와 WAS를 분리하여 무중단 운영을 위한 장애 극복에 쉽게 대응할 수 있다.
• 예를 들어, 앞 단의 Web Server에서 오류가 발생한 WAS를 이용하지 못하도록 한 후 WAS를 재시작함으로써 사용자는 오류를 느끼지 못하고 이용할 수 있다.

4. 여러 웹 어플리케이션 서비스 가능

• 예를 들어, 하나의 서버에서 PHP Application과 Java Application을 함께 사용하는 경우

5. 기타

• 접근 허용 IP 관리, 2대 이상의 서버에서의 세션 관리 등도 Web Server에서 처리하면 효율적이다.

 

프록시란?

크게 포워드 프록시와 리버스 프록시로 나눌 수 있다.

 

포워드 프록시

포워드 프록시는 클라이언트와 인터넷 사이에 위치한 프록시 서버로, 클라이언트가 서버에 직접 요청하지 않고 프록시 서버를 통해 요청을 전달한다. 프록시는 클라이언트를 대신 서버에 요청을 보내고, 받은 응답을 클라이언트에게 전달합니다.

 

• 주로 캐시(Cache) 용도로 많이 사용한다.
• 기업에서는 내부망에 포워드 프록시를 두어 정해진 사이트만 연결하는 등의 보안 용도로도 사용한다.

 

 

리버스 프록시

인터넷과 서버 사이에 존재하는 프록시 서버를 의미한다.

클라이언트의 요청을 서버가 직접 받지 않고, 리버스 프록시 서버가 해당 요청을 받아서 서버에 전달한 후 그 응답 값을 인터넷으로 전달한다. 클라이언트는 프록시 뒤의 서버의 존재를 모르게 된다.

 

• 로드 밸런서의 역할로 사용하여, 집중적으로 발생하는 부하를 여러 서버로 나눠 보낼 수 있다.
• 클라이언트의 요청을 나눠서 보낼 수 있으므로, 무중단 배포 시 배포 중인 서버에 요청을 보내지 않도록 할 수 있다.
• 서버는 내부망에 넣고, 리버스 프록시 서버는 외부에 두어 보안을 강화시킬 수 있다.

 

보통 개발 환경에서는 리버스 프록시 설정을 자주 사용한다.
예를 들어, React의 Vite Proxy 설정은 브라우저의 요청이 프록시 서버를 거쳐 백엔드 서버로 전달되는 구조이기 때문에 CORS를 우회할 수 있다.

이 사례를 통해 알 수 있듯, 리버스 프록시는 반드시 인터넷 앞단에 존재할 필요는 없다.
중요한 것은 “어디에 위치하느냐”가 아니라 “누구를 대신하느냐”이다.

• 리버스 프록시: 서버의 대리인으로, 클라이언트로부터의 요청을 대신 받아 실제 서버로 전달한다.
• 포워드 프록시: 클라이언트의 대리인으로, 서버로 향하는 요청을 대신 보내 응답을 전달한다.

 

그래서 세팅을 어떻게 한건데?

 

기존의 vercel의 방식은?

다음을 참고하면 좋을 것 같습니다.

https://velog.io/@seorim6417/Vercel-%EC%9D%B8%ED%94%84%EB%9D%BC%EC%9D%98-%EB%92%B7%EC%9D%B4%EC%95%BC%EA%B8%B0

Vercel 배포의 비밀 (부제: 인프라 뒷이야기)

 

 

바꾼 방식은?

서버는 SSH 환경에서 직접 구동하여 WAS 역할을 수행했고,
SSL 인증은 Nginx에서 처리했습니다.

 

Next.js는 SSR(Server-Side Rendering) 방식으로 렌더링이 이루어지기 때문에,
단순한 웹 서버에서 정적 파일만 제공하는 방식으로는 동작하지 않습니다.
이에 따라 별도의 서버 환경을 분리하여 구성했습니다.
반면 React는 빌드 결과물이 정적 파일로 생성되기 때문에,
별도의 서버 구동 없이 Nginx 등으로 정적 서빙만으로도 배포가 가능합니다.

배포 환경과 개발 환경은 하나의 인스턴스 내에서 포트로 구분된 두 서버를 운영하며,
Nginx 리버스 프록시 설정을 통해 각 환경으로 트래픽을 분리했습니다.

 

세팅 온보딩

https://www.notion.so/mokkoji/frontend-24c7455c17d080e997ebe18c8c37bc54

frontend | Notion

 

 

참고

https://gmlwjd9405.github.io/2018/10/27/webserver-vs-was.html

[Web] Web Server와 WAS의 차이와 웹 서비스 구조 - Heee's Development Blog

 

https://velog.io/@kylekim2123/Infra-%EB%A6%AC%EB%B2%84%EC%8A%A4-%ED%94%84%EB%A1%9D%EC%8B%9C%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-HTTPS-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-with-Nginx