Docker Compose가 포함된 반짝이는 응용 프로그램, 섹션 1: 개발

받는 사람: Peter Solymos
이 글은 우리의 hosting Shiny apps with Docker run and Caddy server을 계속한다.이러한 매우 기본적인 설정은 몇 가지 단점이 있다. 홈페이지는 보기에 매우 직설적이고 응용 프로그램 업데이트에 대한 관리가 조금도 간소화되지 않는다.
본고에서 당신은 Docker Compose을 사용하여 여러 개의 빛나는 응용 프로그램과 프록시 서버를 간소화하고 업데이트하는 방법을 배울 것입니다.또한 Bulma CSS와 Vue JavaScript 라이브러리를 사용하여 홈 페이지를 더욱 아름답게 만들 수 있습니다.

Docker Compose 소개

Compose is a tool for defining and running multi-container Docker > applications. With Compose, you use a YAML file to configure your > application’s services. Then, with a single command, you create and > start all the services from your configuration. – Docker Compose > documentation

이 정의는 반짝이는 응용 프로그램의 용례에서 가장 중요한 기능을 총괄했다.우리는 하나의 응용 프로그램을 관리하는 것을 원하지 않는다.반대로, 우리는 성명의 방식으로 전체 창고를 정의할 수 있기를 바란다.
본고의 예시를 통해 당신은 가장 중요한 docker-compose 개념과 명령을 배울 것입니다.공식 Docker instructions에 따라 docker-compose을 설치합니다.

프로젝트 구조

이 자습서는 analythium/docker-compose-shiny-example GitHub 저장소의 코드를 사용하여 수행합니다.

이것은 프로젝트 구조입니다. 모든 파일과 폴더를 설명할 것입니다.

.
├── docker-compose.yml
├── pink
│   ├── app
│   │   └── app.R
│   └── Dockerfile
├── site
│   ├── index.html
│   └── apps.js
├── Caddyfile
├── LICENSE
├── README.md
└── .gitignore

YAML 파일 작성

이러한 응용 프로그램과 해당 관계는 docker-compose.yml이라는 YAML 파일에 선언됩니다.YAML은 인류가 읽을 수 있는 표준 파일 형식으로 클라우드 로컬 인프라 시설 관리에 광범위하게 사용된다.
Compose file은 docker-compose 버전 정보로 시작합니다(이것은 최근 버전에서는 선택할 수 있지만 포함하는 것이 좋습니다).여기에 사용된 Compose 파일 형식 버전 3.7에는 Docker Engine 18.06 이상의 버전이 필요합니다.
다음은 서비스, 볼륨, 네트워크 목록입니다.간단하게 보기 위해서, 나는 네트워크 부분을 생략했다. 우리는 실례를 위해 만든 기본 브리지 네트워크를 사용할 것이다.이 네트워크를 통해 모든 서비스가 서로 방문할 수 있다.

version: "3.7"

services:
  hello:
    image: registry.gitlab.com/analythium/shinyproxy-hello/hello:latest
    restart: unless-stopped
    ports:
      - "9000:3838"
  pink:
    build: ./pink
    restart: unless-stopped
    expose:
      - "3838"
  covidapp:
    image: analythium/covidapp-shiny:minimal
    restart: unless-stopped
    expose:
      - "3838"
  caddy:
    image: caddy:2.3.0-alpine
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - $PWD/Caddyfile:/etc/caddy/Caddyfile
      - $PWD/site:/srv
      - caddy_data:/data
      - caddy_config:/config
    depends_on:
      - hello
      - pink
      - covidapp

volumes:
  caddy_data:
  caddy_config:

compose 파일은 서비스, 볼륨 및 기본 네트워크를 포함하여 다음 설정으로 변환됩니다(파일에 설명되어 있지 않음).
Docker YAML 파일 작성 및 작성된 서비스, 볼륨 및 기본 네트워크
세 개의 빛나는 응용 프로그램과 Caddy 서버를 서비스로 정의합니다.hello, pink, covidapp, caddy 및 restart은 서로 다른 응용/서비스를 참조할 수 있는 서비스 이름으로 나열됩니다.우리 하나하나 그들의 설정을 살펴보자.

#안녕하세요 어플1

Hello는 first posts에 도입된 심플하고 반짝이는 앱이다.그것은 정적 분포의 자색 기둥 모양도를 그렸다.이 서비스는 이미지 탭에 의해 정의됩니다.이미지는 GitLab 컨테이너 레지스트리에서 추출됩니다.이 이미지의 항목은 공공이기 때문에 추출을 위한 인증이 필요하지 않습니다.
사용자가 서비스를 중지하지 않는 한, 우리는 unless-stopped을 docker run으로 정의하고 용기를 다시 시작합니다.컨테이너 포트 3838을 호스트 포트 9000에 매핑합니다.이는 포트 플래그 ./pink과 유사합니다.

Dockerfile 정책 #2 핑크 어플

이 반짝이는 프로그램은 Hello의 약간 수정된 버전이다. 고르게 분포된 분홍색 기둥 모양의 그림을 그렸다.우리는 이 응용 프로그램에 그림을 저장하지 않았다.대신 컨텍스트 구축(Dockerfile 폴더)을 정의합니다.기본적으로,compose는 구축 디렉터리에서 ports을 사용합니다.선택할 수 있는 expose 또는 기타 생성 파라미터를 어떻게 제공하는지에 관해서는 참조를 참조하십시오.pink/app/app.R이 아니라 pink/Dockerfile입니다.이것은 컨테이너 포트 3838을 가리키며, 이 포트는 Compose가 배치할 때 만든 브리지 네트워크 내의 다른 서비스에 노출된다.그러나 애플리케이션은 호스트 포트를 통해 직접 사용할 수 없습니다.
응용 프로그램 원본 파일을 볼 수 있습니다: app.R.volumes 확장 Hello 응용 프로그램은 매우 간단합니다. Hello 응용 프로그램을 삭제하고 새로운 source_path:target_path 파일을 복사합니다.

FROM registry.gitlab.com/analythium/shinyproxy-hello/hello:latest
WORKDIR /home/app
RUN rm -rf *
COPY app .
CMD ["R", "-e", "shiny::runApp('/home/app')"]

짓다 #3 코로나-19 애플리케이션

이 프로그램 ( 년에 출시됨) 은 Docker Hub에서 추출한 이미지를 통해 정의된 것입니다. (이미지 탭에 예비 등록표가 정의되어 있지 않습니다.)재부팅 정책은 다른 모든 서비스의 재부팅 정책과 마찬가지로 컨테이너 포트 3838만 공개됩니다.

이 게시물 #4 캐디 서버

이 서비스는 공식 Alpine Linux 기반 을 기반으로 합니다.컨테이너의 HTTP(80) 및 HTTPS(443) 포트를 호스트의 동일한 포트에 매핑합니다.다음은 Caddyfile을 정의합니다.Caddy server image은 site 문법을 따른다.
정확히 말하면, 우리는 $PWD (서버 설정 포함) 과 git pull 디렉터리를 불러올 것이다. 이 두 디렉터리는 모두 현재 작업 디렉터리 (volumes) 에 있다.불러오는 볼륨은 외부 프로세스에서 변경할 수 있습니다.예를 들어, local을 통해 변경할 수 있습니다.
Docker 데몬에서 TLS 인증서와 서버 로그를 저장하는 데 사용되는 두 개의 볼륨을 생성하고 관리합니다.파일 끝에 있는 docker volume create 키는compose 파일을 처음 호출할 때 만들 볼륨을 보여 줍니다.두 볼륨이 비어 있음으로 정의되어 기본 설정인 external: true 드라이버를 의미합니다.볼륨이 docker-compose up 명령으로 생성된 경우 이 블록에는 http://0.0.0.0 키 값 쌍이 사용됩니다.
마지막으로 서비스에서 Volumes in the Compose file에 대해 설명합니다.따라서 서비스는 의존 순서에 따라 시작되고 정지됩니다.

의존 관계 정리

계속하기 전에 docker-compose build 명령을 내린 후 무슨 일이 일어날지 봅시다.로그인 페이지를 보려면 docker-compose up --build을 방문하십시오. 여기에는 세 가지 애플리케이션이 나열되어 있습니다.
여러 개의 빛나는 응용 프로그램이 Caddy와 docker compose를 통해 제공
이 명령은 세 개의 그림을 추출하고 분홍색 프로그램에 그림을 생성합니다.분홍색 서비스의 이미지는 아직 존재하지 않기 때문에 만들어졌다는 경고도 표시했다.이미지를 재구성하려면 http://0.0.0.0:9000 또는 docker-compose up -d을 사용해야 합니다.docker-compose ps에 방문하면 Hello 애플리케이션을 볼 수 있습니다. 용기도 호스트 포트 9000에 노출되어 있음을 기억하십시오.docker-compose up -d을 사용하여 백그라운드에서 서비스를 시작합니다.:latest을 사용하여 실행되는 서비스를 나열할 수 있습니다.
용기가 실행 중이고 용기가 만들어진 후 설정이나 이미지가 바뀌었을 때 기본적으로 docker-compose pull && docker-compose up -d은 용기를 정지하고 다시 만들어서 변경 사항을 가져옵니다.이 기능은 단일 용기를 시작하고 정지하는 것보다 응용 프로그램을 관리하기에 매우 적합하다.
141560. 그러나 그림 등록표에 좋은 탭을 사용하면 이 탭이 업데이트되었는지 알 수 있습니다.이 경우 작성 전에 docker-compose down을 사용하여 새 이미지를 추출합니다.up 명령은 컨테이너를 중지하고 Caddyfile에서 만든 컨테이너, 네트워크, 볼륨 및 이미지를 제거합니다.

카디 파일

srv은 서버 설정을 정의했다. 우리는 빛나는 응용 역방향 에이전트를 각자의 경로로 옮길 것이다.별명을 통해 서비스를 인용할 수 있음을 주의하십시오.파일 서버는 site 폴더에서 제공되며, 이 폴더는 우리git 프로젝트의 0.0.0.0 폴더에서 불러옵니다.페이지에서 찾을 수 없음(404) 상태 메시지를 표시하는 간단한 오류 처리도 제공합니다.

:80 {
    root * /srv
    handle_path /hello/* {
        reverse_proxy hello:3838
    }
    handle_path /pink/* {
        reverse_proxy pink:3838
    }
    handle_path /covidapp/* {
        reverse_proxy covidapp:3838
    }
    file_server
}

서버는 포트 80에서 실행되고 프로토콜과 도메인 이름이 정의되지 않았습니다. (이것이 바로 우리가 브라우저에서 0.0.0.0:80을 사용하는 이유입니다. index.html과 같습니다.)운영 환경에서 실행할 때는 IP 주소 또는 도메인 이름을 추가해야 합니다.

파일 서버

폴더의 site 파일은 로그인 페이지입니다.이 파일은 JavaScript가 필요하지 않은 응답 방식의 Bulma CSS 라이브러리를 사용합니다.나는 을 선택했고 이 로그인 페이지를 수정했다.index.html 파일은 컨텐트 제공 네트워크(CDN)를 사용하여 Vue JavaScript 라이브러리를 로드합니다.이것은 프로그램이 HTML 파일에 직접 포함될 수 있도록 yarn 또는 npm 같은 도구를 구축할 필요가 없다는 것을 의미한다.중요한 부분은 다음과 같습니다(단순화).

<div id="app">
    <div  v-for="i in apps">
        <img v-bind:src="i.image">
        <h1 class="title">\{\{ i.name \}\}</h1>
        <p>\{\{ i.description \}\}</p>
        <a v-bind:href="i.path" class="button is-info">
            Go to app
        </a>
    </div>
</div>

우리는 v-for 순환이 있는데, i 수조에서 원소(apps)를 얻는다.각 요소는 축소판 그림 image, 애플리케이션 name, description의 속성을 정의합니다.Mustache 구문 뒤에 있는 텍스트 보간을 사용합니다.v-bind 명령은 path 속성을 닻 href 표지의 <a> 속성에 귀속시키고 이 표지의 스타일은 단추입니다.apps 배열은 site/apps.js 파일에서 다음과 같이 정의됩니다.

var apps = [
    {
        name: "Hello App",
        path: "./hello/",
        image: "https://hub.analythium.io/img/shiny/shiny-hello.png",
        description: "A purple colored histogram from the Normal distribution"
    },
    {
        name: "Pink App",
        path: "./pink/",
        image: "https://hub.analythium.io/assets/web/pink-hist.png",
        description: "A pink colored histogram from the Uniform distribution"
    },
    {
        name: "COVID-19 App",
        path: "./covidapp/",
        image: "https://hub.analythium.io/assets/web/covid-shiny.png",
        description: "COVID-19 daily case counts and forecast by country"
    }
]

var app = new Vue({
    el: '#app',
    data: {
        apps: apps
    }
})

파일 끝에 app이라는 HTML 요소에 연결된 새로운 Vue 인스턴스를 정의했습니다. (HTML 파일에서 <div id="app">을 찾았습니다.)

거푸집 요약

축하합니다. 강력한 프로그램 패키지를 성공적으로 조립했습니다.이것은 몇몇 드워스의 초강대국들을 보여 주었다.그러나 이것은 작업 절차의 현지 개발 부분일 뿐이다.두 번째 부분에서 우리는git 메모리 라이브러리의 내용을 어떻게 생산 환경으로 전달하는지 연구할 것이다.

한층 더 읽다

Docker Compose documentation

Compose file documentation
Docker 브로셔

Compose chapter