SPA 환경에서 배포가 이루어 졌을 때 새로 고침 방법

 

SPA 구성으로 된 웹 어플리케이션은 웹 서버로부터 1번의 정적 리소스를 받아와서 브라우저에서 구동하는 형태 입니다.
서버에서의 리소스를 1번만 받기 때 문에 부드러운 화면표현, 빠른 동작 등이 장점이라 할 수 있습니다.

그러나 어플리케이션의 규모가 커지게 되면(예 : 화면 200장 이상) SPA 구성으로만 동작시키게 되면 브라우저가 처음부터 많은 데이터를 받아야 하기 때 문에 오히려 더 성능이 느려질 수 있습니다.
그리하여 서버 렌더링을 어느정도 포함시킨 Next, Nuxt 같은 기술이 나오게 되었습니다.

운영중인 SPA 어플리케이션이 너무나 완벽한 기획과 개발에 의해 고칠 게 1도 없다면 배포(deployment)에 대해서 고민 할 필요가 없습니다.
그러나..개발자의 현실은 항상 애자일(Agile)과 함께 하기에..
항상 프로젝트 배포는 함께 합니다.

Next 또는 Nuxt 기술에서는 동작중인 웹서버 어플리케이션이 새롭게 배포가 되면 무중단 또는 중단 배포일지라도 배포가 끝나게 되면 서버가 요청을 받게 되는 경우 새로운 파일을 전달 해 주어 배포한 내용을 자연스럽게 적용 할 수 있습니다.

순수 SPA로 개발된 어플리케이션은 프로젝트가 새롭게 배포 되더라도 사용자가 새로고침(F5)을 하지 않는 한 변경된 화면을 만날 수 없습니다.
그러면 Next 또는 Nuxt 처럼 서버 렌더링(SSR)이 전혀 없는 환경에서는 이를 어떻게 확인하고 사용자에게 변경된 화면을 보여줘야 하는 것 일까요?

#방법1 : SSE

브라우저에서 SSE를 통해 특정 신호를 전달하는 방법 입니다.
해당 방법을 통해 브라우저에서 새로운 배포가 이루어졌음을 인지하게되고 새로 고침을(location.reload) 하도록 합니다.
이러한 방법은 추가적인 SSE 서버를 운용해야되는 부분과 전송해야되는 기능이 필요하게 됩니다.

 

#방법2 : 웹소켓

브라우저에서 웹소켓을 통해 서로의 연결을 유지하는 것 입니다.
마찬가지로 특정 신호를 받은 뒤 새로 고침을(location.reload) 하도록 합니다.
추가적인 서버 운용이 필요하고, 양방향 통신이므로 생각보다 무거워 비슷한 기능인 SSE를 쓰는 것이 낫습니다.

 

#방법3 : 브라우저 시간별 확인
브라우저에서 서버에게 새롭게 기능이 추가되었는지 확인하는 것 입니다.
가령 n초단위로 서버에게 HTTP 통신을 보내어 새롭게 배포가 되었는지 확인하고 만약 되었다면 새로 고침을(location.reload) 하도록 합니다.
이를 위해서 응답하는 서버를 만들어야하며 서버에서 새로운 버전을 알리기 위해 데이터베이스(또는 파일 등)에 기록을 해야 합니다.
브라우저는 버전이 바뀌지 않았음에도 불구하고 규칙적으로 N초단위로 계속해서 서버와 통신해야되는 점도 존재 합니다.

 

#방법4 : 어플리케이션 웹 서버 헤더 변경
웹 서버에서 배포를 하고나면 헤더에 특정 값을 지정하여 바꾸는 방법 입니다.
설명을 위해 nginx로 구성한 간단한 도커파일을 준비 하였습니다.
* 파일이름 : Dockerfile

FROM node:18-alpine as build-stage

WORKDIR /app

COPY ./ /app

RUN npm install 

RUN npm run build 

COPY . .

# Make sure we got brotli
RUN apk update
RUN apk add --upgrade brotli


#FROM nginx:stable-alpine as production-stage
FROM alpine
RUN apk add brotli nginx nginx-mod-http-brotli

COPY --from=build-stage /app/dist /usr/share/nginx/html

#nginx 설정 파일 복사
COPY ./nginx_origin.conf /etc/nginx/http.d/default.conf  

#내부 커스텀 헤더에 날짜값 변경
RUN sed -i "s/{1}/$(date +%s)/gi" /etc/nginx/http.d/default.conf

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

 

해당 파일에서 "내부 커스텀 헤더에 날짜값 변경" 이 부분의 값을 바꾸어서 버전을 다르게 관리하는 것 입니다.
위 파일에 해당하는 nginx 설정 파일 입니다.
* 파일이름 : nginx_origin.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    brotli_static on;

    root   /usr/share/nginx/html;
    location / {
        add_header app-version "{1}";
        try_files $uri /index.html;
    }

    error_page 500 503 /50x.html;


    location = /50x.html {
        root   /usr/share/nginx/html;
    }
 
}

이렇게 한 뒤 웹 서버가 재기동 되고 나면 헤더의 "app-version"이 다른 경우 페이지를 새로 고침(location.reload) 하면 됩니다.
이를 위해서 헤더에서 특정값을 체크하는 기능이 필요하며, 웹서버 운용 및 배포 환경은 도커환경의 기반으로 구성하는 것이 편리 합니다(또는 쿠버네티스)

 

4가지 정도로 살펴 본 "SPA 환경에서의 배포가 이루어 졌을 때 새로고침 방법" 에 대해서 살펴보았습니다.
좋은 의견이 있으시면 언제든 환영 입니다!