Docker Env 변수를 사용하여 Angular BASE URL을 동적으로 업데이트

Angular에서 BASE/API URL은 src/environments 디렉토리 아래에 있는 환경 파일로 저장됩니다. 일반적으로 각 환경에 대해 새 파일을 만들 수 있습니다.

환경.ts

환경.dev.ts

환경.테스트.ts

환경.단계.ts

environment.prod.ts

환경.ts

import packageInfo from '../../package.json';

export const environment = {
    production: false,
    BASE_URL: '//localhost:4200',
    VERSION: packageInfo.version,
};

빌드하는 동안 플래그에 따라 기본environment.ts 파일을 environment.<CONFIGURATION>.ts로 교체하기 위한 구성 플래그가 제공됩니다.

npm run build -- --configuration=stage

이 접근 방식의 문제는 빌드 중에 BASE_URL이 하드 코딩되기 때문에 여러 환경에서 동일한 빌드를 재사용할 수 없으며 DEV를 TEST로 승격한 다음 결국에는 STAGE로 승격하여 PROD로 승격할 수 없다는 것입니다. 이를 방지하려면 Docker 컨테이너 시작 중에 Angular에 의해 생성된 파일main.*.js에서 BASE_URL을 교체해야 합니다.

먼저 다단계 Dockerfile을 따르는 표준 Dockerfile을 살펴보겠습니다. 이를 더 잘 이해하려면 내 .

도커파일

// See my other post for Build stage, so skipping it here

############  User Nginx alpine image  ############
FROM nginx:stable-alpine

# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy nginx config file
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

# Copy dist folder fro build stage to nginx public folder
COPY --from=builder /app/dist /usr/share/nginx/html

# Start NgInx services
CMD ["nginx", "-g", "daemon off;"]

여기에서 Docker 컨테이너/서비스 중에 BASE_URL을 업데이트할 단일 항목을 추가할 수 있습니다. BASE_URL/API_URL이 employee-dev.example.com라고 하면 아래와 같이 UNIXsed 명령으로 대체할 수 있습니다.

CMD sed -i "s/employee-dev.example.com/employee-$CONFIGURATION.example.com/g" /usr/share/nginx/html/main.*.js && nginx -g 'daemon off;'

따라서 업데이트된 Dockerfile은 아래와 같습니다.
Dockerfile(업데이트됨)

// See my other post for Build stage, so skipping it here

############  User Nginx alpine image  ############
FROM nginx:stable-alpine

# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy nginx config file
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

# Copy dist folder fro build stage to nginx public folder
COPY --from=builder /app/dist /usr/share/nginx/html

# Start NgInx services
CMD sed -i "s/employee-dev.example.com/employee-$CONFIGURATION.example.com/g" /usr/share/nginx/html/main.*.js && nginx -g 'daemon off;'

Docker 실행 명령으로 컨테이너를 시작할 수 있습니다.

docker run -p 4000:80 -e CONFIGURATION=test <IMAGE_ID>

Docker ENTRYPOINT를 사용하여 동일한 결과를 얻을 수도 있습니다. ENTRYPOINT를 사용하여 이 작업을 수행하려면 새 start.sh 스크립트 파일을 만들고 명령을 복사합니다.

시작.sh

#!/bin/sh
sed -i "s/employee-dev.example.com/employee-$CONFIGURATION.example.com/g" /usr/share/nginx/html/main.*.js
nginx -g 'daemon off;'

이 파일을 복사하고 실행 가능하게 만들고 ENTRYPOINT에서 참조하십시오.

Dockerfile(ENTRYPOINT로 업데이트됨)

######  User Nginx alpine image  ######
FROM nginx:stable-alpine
ENV CONFIGURATION='dev'
# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy nginx config file
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

# Copy dist folder fro build stage to nginx public folder
COPY /dist /usr/share/nginx/html
COPY start.sh /usr/share/nginx/html
RUN chmod +x /usr/share/nginx/html/start.sh

# Start NgInx service
ENTRYPOINT ["./usr/share/nginx/html/start.sh", "$CONFIGURATION"]

Docker 실행 명령으로 컨테이너를 시작합니다.

docker run -p 4000:80 -e CONFIGURATION=test <IMAGE_ID>

Docker를 사용하지 않는 경우 sed는 간단한 UNIX 명령이므로 동일한 접근 방식을 사용할 수도 있습니다.