배포 - Multi App(ReactJS/NodeJS)와 위한 Dockerfile 만들기

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"]

 

 

[출처 -  https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%8F%84%EC%BB%A4-ci/dashboard]