#1. generate 와 build 중 무엇을 선택할까?

Nuxt.js는 리액트의 Next.js와 같은 SSR Framework이며, Universal/SPA/Static App 모드를 지원한다.

Universal App SPA Static App
동작 서버에서 최초 view 렌더링
→ 이후는 spa로 동작 최초 view 접근 시 spa로 로드
→ 이후로도 spa로 동작 최초 view는 프리렌더링
→ 이후에는 spa로 동작
빌드 yarn build yarn build —spa yarn generate
SEO O X O

우리 앱은 [URL 공유하기] 기능이 있어, 동적으로 제목/이미지 등의 메타 태그를 삽입해야 했기에 SSR을 지원하는 Univesal App 방식으로 배포해야 했다!

Static App 모드를 사용하지 않은 이유? Static App 방식은 빌드 시 모든 페이지가 프리렌더링 된다. 우리가 원하는 건 같은 공유하기 페이지이더라도 id마다 다른 이미지와 제목을 보여주어야 했다 (= 즉, 동적으로 메타 태그 삽입이 가능해야 함)

따라서, yarn build 명령어를 사용하여 Dockerfile을 작성했다.

Untitled

# docker/Dockerfile 
FROM node:18.12.1

RUN mkdir /app
WORKDIR /app

COPY package.json .
COPY yarn.lock .
RUN yarn install

COPY . .
**RUN yarn build**

ENV NODE_TLS_REJECT_UNAUTHORIZED=0
ENV NODE_ENV=prod

CMD ["node", "/app/.output/server/index.mjs" ]

#2. Dockerfile 최적화하기

백엔드 개발자가 API에 비해 프론트 빌드 시간이 오래 걸린다는 이야기를 해주었다. (그렇게 많이 차이는 안 나는데… 그래도 개선할 수 있는 방법이 있는지 찾아보았다! 👀)

Untitled