개발환경

• Nuxt, PrimeVue3 사용, CSR

---

문제점

• Docker Image로 만들기 위하여 Node와 Nginx를 사용하여 배포해야하는데
  Dockerfile을 작성하고 Image를 생성하는데에 있어서 여러 문제가 발생한다.

---

해결방법

Dockerfile을 작성하는데 있어서 알파 버전의 프레임워크라 예시가 없어서 도움을 받음.

Dockerfile

#-------------------------------------------
# STEP 1 : build executable binary
#-------------------------------------------
FROM node:18.8.0-alpine as builder

ADD . /usr/src/app

WORKDIR /usr/src/app
RUN apk update && apk upgrade && \
    apk add --no-cache bash git openssh
RUN npm rebuild esbuild
RUN npm install --no-optional
RUN npm run generate

#-------------------------------------------
# STEP 2 : build a image
#-------------------------------------------
FROM nginx:1.23.1-alpine

RUN rm -rf /usr/share/nginx/html/connect /usr/share/nginx/html/device /usr/share/nginx/html/event /usr/share/nginx/html/system /usr/share/nginx/html/tag /usr/share/nginx/html/test /usr/share/nginx/html/user /usr/share/nginx/html/auth /usr/share/nginx/html/emit-prop /usr/share/nginx/html/monitoring /usr/share/nginx/html/dashboard

# 기존 설정파일 삭제
RUN rm /etc/nginx/conf.d/default.conf
# 수정한 설정파일을 복사
COPY ./default.conf /etc/nginx/conf.d/

COPY --from=builder /usr/src/app/dist /usr/share/nginx/html

RUN sed -i 's/js;/js mjs;/' /etc/nginx/mime.types

ENV HOST 0.0.0.0
ENV BACKEND_PORT 3001

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

# default.conf

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

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location ^~ /api {
    proxy_pass BackEnd IP or Domain
    proxy_http_version 1.1;
    proxy_set_header Host $host;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_connect_timeout 3600;
    proxy_send_timeout 3600;
    proxy_read_timeout 3600;
  }

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }
}

• Nginx의 config 문제

  • SSR이 아닌 CSR로 개발했기 때문에 Nuxt 안의 index.html 파일을 찾지 못하여 지속해서 리다이렉트 되는 상황 딱히 SSR이면 안해도 될 수도?
    • try_files $uri $uri/ /index.html; 을 추가하면 된다.

• Dockerfile 내의 구문 설명

  • RUN sed -i 's/js;/js mjs;/' /etc/nginx/mime.types
    • Nuxt3는 mjs로 되어있지만 Nginx는 js만 읽기 때문에 mjs까지 읽을 수 있는 설정

• 이 이미지 그대로 k8s에 올려서 사용하거나 local 환경에서도 사용가능하다.