회사에서 react project의 개발환경 분리한 회고록을 적어보려고 한다.
리액트 설정 파일과 도커 파일 설정까지 함께 진행했다.
React에서 개발환경 구분은 아래의 방식으로 이루어지고 확인은
process.env.NODE_ENV로 이루어진다.
npm run start → development
npm run build → production
당연히 Dockerfile의 구성도 분리 및 변경 해주어야한다.
npm run start → development → Dockerfile.dev
npm run build → production → Dockerfile
Docker를 빌드해줄 때에 기본적으로 Dockerfile을 바라보고 있기 때문에
젠킨스에서 도커파일을 빌드해줄 때 설정을 아래와 같이 바꿔줘야한다.
(기존의 구문에서 -f Dockerfile.dev 추가)
sudo docker build --platform arm64 --build-arg DEPENDENCY=build/dependency -f Dockerfile.dev -t $ECR_REPO_NAME .
build를 해주게 되면 build된 파일을 Docker 환경 내의 웹서버에 띄워야 한다.
주로 사용되는 웹서버 중 하나인 Nginx를 사용해주었다.
기존의 도커파일의 아래에 추가로 입력해주었다.
FROM nginx
# nginx의 기본 설정을 삭제하고 앱에서 설정한 파일을 복사
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
# 80포트 오픈하고 nginx 실행
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]프로젝트 폴더 내에 conf/conf.d/default.conf 를 생성해
Nginx의 환경을 설정해줘야 하며, 내용은 아래와 같다.
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}기본적으로 nginx는 80 포트를 바라보고 있기 때문에(기본 포트 변경 불가능)
기존에 3000 포트로 설정되있던 운영서버를 백앤드 담당자분에게 80포트로 바꿔달라고
요청해야 했다.
아직 미숙한 점이 많지만 스스로 실제 프로젝트를 구성하는 경험이
정말 도움이 많이 되었고, 오류 해결, 개념 적용, 협업 등 다양한 분야에서
많은 경험치를 쌓을 수 있었던 경험이었다.
서버 개발자였던 경험이 큰 도움이 되었다(역시 쓸모없는 경험은 없다)
