Docker 컨테이너에서 Angular 응용 프로그램 구축 및 실행
Cover image by Alice Achterhof on Unsplash
이 블로그에서, 나는 Docker 용기에서 Angular 프로그램을 실행하는 방법을 보여 주고 싶다. 그리고 나는 다단계 Docker 구축을 소개할 것이다. 이것은 용기를 더욱 작게 하고, 당신의 업무를 더욱 자동화할 것이다.
더 이상 소개하지 않은 상태에서, 우리는 손을 더럽히고, 각도 있는 프로그램을 Docker 용기에 넣을 것이다.이 박문에서 나는 나의 옛 항목인 aston-villa-app을 사용할 것이다.이것은 내가 가장 좋아하는 축구 클럽 중 하나인 아스톤빌라의 리그 랭킹이 있는 간단한 계기판이다.
하지만 프로젝트를 사용하고 싶다면 사용할 수 있습니다. 모든 절차는 제 프로그램과 같습니다.
좋습니다. 프로그램을 가져오려면 먼저 복제해야 하기 때문에 터미널을 열고 다음을 입력하십시오.
> git clone https://github.com/wkrzywiec/aston-villa-app.git
현재, 만약 이 두 가지 선결 조건을 설치했다면, Angular 프로그램을 컴파일할 수 있습니다.따라서 응용 프로그램의 루트 폴더에서 터미널을 열고 다음을 입력합니다.
> ng build --prod
그런 다음 프로젝트의 루트 폴더에 있는 Dockerfile이라는 새 파일을 만듭니다.다음과 같은 행이 있어야 합니다.
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY /dist/aston-villa-app /usr/share/nginx/html
1.17.1-alpine 라벨이 달린 nginx Docker image from Docker Hub(버전 번호처럼), events{}
http {
include /etc/nginx/mime.types;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
}
마지막으로 터미널로 돌아가 다음 명령을 사용합니다.
> docker build -t av-app-image .
> docker image ls
REPOSITORY TAG IMAGE ID
av-app-image latest a160a7494a19
nginx 1.17.1-alpine ea1193fd3dde
> docker run --name av-app-container -d -p 8080:80 av-app-image
--name av-app-container을 지정하고 백그라운드에서 실행되는지 확인(-d한 다음 컨테이너 포트를 로컬-p 8080:80에 매핑하고 새로 만든 기본 Docker 이미지-av-app-image를 선택합니다.새 컨테이너가 터미널 유형에서 실행 중인지 확인하려면 다음과 같이 하십시오.
> docker container ls
CONTAINER ID IMAGE STATUS NAMES
2523d9f77cf6 av-app-image Up 26 minutes av-app-container
그래!그것은 매우 쉽다!아닌가?나는 이것이 당신을 위해 준비한 것이라고 희망하지만, 당신은 이것이 여러 단계의 과정이라는 것을 볼 수 있기 때문에, 시간을 소모하는 것 외에 실수하기 쉽다.
그럼 어떻게 하면 더 잘할 수 있을까요?Docker 구축에 컴파일 단계 ((
ng build --prod) 를 포함하는 것이 좋습니까?희망적으로 들리니 시작합시다!이를 실현하기 위해 Multi-stage Docker build라는 것을 소개하고 싶습니다.
이것은 Docker 17.05에 도입된 것으로, 주요 목표는 Docker 파일의 읽기 가능성을 잃지 않고 더 작은 용기를 만드는 것이다.이런 방법을 통해 우리는 구축된 Docker 이미지를 더욱 작은 단계(stage)로 나눌 수 있는데 그 중에서 이전 단계(또는 일부 단계)의 결과는 다른 단계에 사용할 수 있다.
Docker 구문을 두 단계로 나눕니다.
그 전에 우리는 이미 두 번째 단계를 완성했기 때문에 첫 번째 단계를 주목합시다.
원본 코드를 컴파일하기 위해서, 우리는 서로 다른 Docker 이미지를 기초로 할 것입니다. Node.jsDockerfile의 구성 단계는 다음과 같습니다.
FROM node:12.7-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
FROM 등록표에서 노드 Docker 이미지를 가져오고 컴파일 단계를build로 명명합니다. (따라서 다른 단계에서 인용할 수 있습니다.) WORKDIR기본 작업 디렉토리 설정COPY복제 패키지.json & 패키지 자물쇠.로컬 루트 디렉터리에서 온 json 파일 - 이 파일은 프로그램에 필요한 모든 의존 항목을 포함합니다 RUN필요한 라이브러리 설치(이전 복제 파일 기반)COPY소스 코드RUN) 그리고 최종적으로 응용 프로그램을 컴파일합니다.따라서 파일은 다음과 같습니다.
dist
node_modules
### STAGE 1: Build ###
FROM node:12.7-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
### STAGE 2: Run ###
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/aston-villa-app /usr/share/nginx/html
--from=build 로고를 추가해서 Docker가build 단계에서 컴파일된 파일을 복사해야 한다는 것을 알려주는 것이다. (원본 경로도 변경되었다. 파일이 다른 폴더에 있기 때문이다.)터미널로 돌아가려면 먼저 Docker 이미지를 만들어야 합니다.
> docker build -t av-app-multistage-image .
> docker run --name av-app-multistage-container -d -p 8888:80 av-app-multistage-image
이 항목을 확인하려면 GitHub의 저장소로 이동합니다.
wkrzywiec / 아스톤 별장 활용
아스톤빌라 계기판은 7번 각형 설계를 채택하였다
도구책
Reference
이 문제에 관하여(Docker 컨테이너에서 Angular 응용 프로그램 구축 및 실행), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/wkrzywiec/build-and-run-angular-application-in-a-docker-container-19pm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
