프론트엔드 개발서버, 운영서버 빌드 및 배포 환경 구분

서버 분리

운영 서버 : https://www.code-zap.com
개발 서버 : https://beta.code-zap.com

빌드 환경 분리

webpack 설정과 환경 변수를 production, development 모드에 맞게 나누어 빌드됩니다.

• webpack.common.js

• webpack.dev.js

• webpack.prod.js

• .env.development

• .env.production

REACT_APP_API_URL= 서버 주소
REACT_APP_BASE_URL= 베이스 라우팅 주소

SENTRY_AUTH_TOKEN= Sentry 토큰
SENTRY_DSN= Sentry DSN

CI/CD

CI 적용은 운영, 개발 서버 모두 동일합니다.
CD의 경우, yml 스크립트로 만약 dev/fe 브랜치로 push 된다면 개발 서버로 배포되도록 설정하였습니다.
main 브랜치로 push 된다면 운영 서버로 배포됩니다.

S3 / cloudFront

S3 버킷을 code-zap, code-zap-staging 두가지로 나누었습니다.
dev/fe 브랜치로 push된 소스코드의 빌드 결과물은 code-zap-staging 버킷에 저장됩니다.
main 브랜치로 push된 소스코드의 빌드 결과물을 code-zap 버킷에 저장됩니다.

cloudFront 또한 두가지 배포를 생성했습니다. code-zap과 code-zap-staging은 각각 동일한 이름의 cloudFront 배포의 원본으로 등록되어 있습니다.

현재는 cloudFront의 continuous distribution 기능을 사용하지 않고, 브랜치 push에 따라 운영 서버의 버전이 변경됩니다.