Infra/CI-CD
배포 - Multi App(ReactJS/NodeJS)와 위한 Dockerfile 만들기
Surge100
2023. 1. 5. 16:08
ReactJS - 프로트 서버
Dockerfile.dev
FROM node:16-alpine
WORKDIR /app
COPY package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","start"]
Dockerfile
위 파일에서 구동할 nginx 서버는 정적 파일을 serve하기 위한 프론트엔드 영역내에서 사용될 nginx이다.
정적file serve를 위한 Nginx 서버 설정
location / {} 안에 root 뒤에 명시된 경로에 build폴더를 넣어 두면 location/ 경로로 요청이 왔을때 해당하는 요청이 왔을때 의도된 적절한 파일이 대응해서 응답될 수 있다. root 뒤에 명시된 경로는 기본적으로 지정된 것도 있지만 해당 설정파일을 통해 변경할 수도 있다.
location / {
...
try_files $uri $uri/ /index.html;
}React는 Single Page Application 이다.그렇기 때문에 index.html 라는 정적파일 하나만 가지고 있기 때문에 만약 {URL}/home 과 같이 접속을 시도할 때에도 index.html 파일에 접근을 해서 라우팅을 시켜야한다. 그런데 이것은 nginx에 설정해 주지않으면 nginx는 이 사실을 알 수 없다. 그래서 /home으로 접속하려고 하는데 /home에 배칭되는 것이 없을때 대안으로 index.html을 제공하여 /home으로 라우팅하는 것처럼 보일 수있게 임의로 설정을 하는 것이다.
NodeJS - API 서버
Dockerfile.dev
FROM node:16-alpine
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","dev"]start가 아닌 dev인 이유는 nodemon모듈을 사용해서 코드가 변경될 때마다 변경사항을 바로 반영하기 때문이다.
Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","start"]