Docker 컨테이너에서 Angular 응용 프로그램 구축 및 실행

9841 단어 angulardevopsdockerbeginners

Cover image by Alice Achterhof on Unsplash


이 블로그에서, 나는 Docker 용기에서 Angular 프로그램을 실행하는 방법을 보여 주고 싶다. 그리고 나는 다단계 Docker 구축을 소개할 것이다. 이것은 용기를 더욱 작게 하고, 당신의 업무를 더욱 자동화할 것이다.
더 이상 소개하지 않은 상태에서, 우리는 손을 더럽히고, 각도 있는 프로그램을 Docker 용기에 넣을 것이다.이 박문에서 나는 나의 옛 항목인 aston-villa-app을 사용할 것이다.이것은 내가 가장 좋아하는 축구 클럽 중 하나인 아스톤빌라의 리그 랭킹이 있는 간단한 계기판이다.

하지만 프로젝트를 사용하고 싶다면 사용할 수 있습니다. 모든 절차는 제 프로그램과 같습니다.
좋습니다. 프로그램을 가져오려면 먼저 복제해야 하기 때문에 터미널을 열고 다음을 입력하십시오.
> git clone https://github.com/wkrzywiec/aston-villa-app.git
현재, 로컬 폴더에 넣고 입력하십시오.그런 다음 Node가 설치되어 있는지 확인합니다.로컬 PC에 js 및 Angular CLI를 설치합니다. 자세한 내용은 the official Angular website에서 확인할 수 있습니다.
현재, 만약 이 두 가지 선결 조건을 설치했다면, Angular 프로그램을 컴파일할 수 있습니다.따라서 응용 프로그램의 루트 폴더에서 터미널을 열고 다음을 입력합니다.
> ng build --prod
dist/aston villa app라는 새 폴더를 만들고 모든 컴파일된 파일을 넣을 것입니다.
그런 다음 프로젝트의 루트 폴더에 있는 Dockerfile이라는 새 파일을 만듭니다.다음과 같은 행이 있어야 합니다.
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY /dist/aston-villa-app /usr/share/nginx/html
이 간단한 Docker 파일은 Docker에게
  • 먼저 1.17.1-alpine 라벨이 달린 nginx Docker image from Docker Hub(버전 번호처럼),
  • 그리고 기본nginx 설정을 복사해서 붙여넣기
  • 마지막으로 컴파일된 프로그램 (이전 단계에서 완성됨) 을 용기에 복사해서 붙여넣습니다.
    • 내 기본 nginx 구성 파일은 다음과 같습니다. Dockerfile과 같은 디렉토리에 있습니다.
    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 이미지 목록을 보면 다음과 같은 출력을 얻을 수 있습니다.
    > 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
    또는 웹 브라우저에 들어가서 http://localhost:8080/로 이동할 수도 있습니다.
    그래!그것은 매우 쉽다!아닌가?나는 이것이 당신을 위해 준비한 것이라고 희망하지만, 당신은 이것이 여러 단계의 과정이라는 것을 볼 수 있기 때문에, 시간을 소모하는 것 외에 실수하기 쉽다.
    그럼 어떻게 하면 더 잘할 수 있을까요?Docker 구축에 컴파일 단계 ((ng build --prod) 를 포함하는 것이 좋습니까?희망적으로 들리니 시작합시다!
    이를 실현하기 위해 Multi-stage Docker build라는 것을 소개하고 싶습니다.
    이것은 Docker 17.05에 도입된 것으로, 주요 목표는 Docker 파일의 읽기 가능성을 잃지 않고 더 작은 용기를 만드는 것이다.이런 방법을 통해 우리는 구축된 Docker 이미지를 더욱 작은 단계(stage)로 나눌 수 있는데 그 중에서 이전 단계(또는 일부 단계)의 결과는 다른 단계에 사용할 수 있다.
    Docker 구문을 두 단계로 나눕니다.
  • 소스 코드를 생산성 출력으로 컴파일
  • 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) 그리고 최종적으로 응용 프로그램을 컴파일합니다.
    • Docker 이미지를 더욱 효과적으로 구축하기 위해서 프로젝트의 루트 디렉터리에 이름을 추가할 수 있습니다.dockerignore.이 하나의 작업 원리는 유사하다.gitignore에서 Docker가 무시하기를 원하는 파일과 폴더를 정의할 수 있습니다.우리의 예에서, 우리는 node 모듈과dist 폴더에서 파일을 복사하고 싶지 않습니다. 왜냐하면 컴파일할 때 파일이 필요하지 않기 때문입니다.
    따라서 파일은 다음과 같습니다.
    dist
node_modules
    좋습니다. 두 Docker 단계를 하나로 합치면 다음과 같은 결과를 얻을 수 있습니다.
    ### 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
    만약 당신이 지금 http://localhost:8888/ 을 입력하면, 그것이 실행 중인 것을 볼 수 있습니다.
    이 항목을 확인하려면 GitHub의 저장소로 이동합니다.

    wkrzywiec / 아스톤 별장 활용


    아스톤빌라 계기판은 7번 각형 설계를 채택하였다


    도구책

  • Use multi-stage builds on docs.docker.com

  • Run Angular in a Docker Container using Multi-Stage builds on malcoded.com
  • Advanced multi-stage build patterns on medium.com
  • Your Angular apps as Docker containers on medium.com
  • Understanding the Nginx Configuration File Structure and Configuration Contexts on www.digitalocean.com
  • Beginner's Guide on nginx.org
    • 탈·Docker Desktop-WSL 2편-
    Java 프로그래밍 시 주의해야 할 점

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage