docker로 blueprint 컨테이너를 사용해보십시오.

16053 단어 docker-compose 도커 Blueprint gulp

개요

API 인터페이스 사양서를 작성하는 툴로 편리한 것이 없는지 조사해 보았다.
조금 낡은 것 같지만, 우선 blueprint를 시험해 본다.

파일 구성

아래의 파일 구성으로 구축해 보았습니다.

파일 목록

├ docs
│ └ example.md
├ public
│ └ .gitkeep
├ Dockerfile
├ docker-compose.yml
├ gulpfile.js
└ nginx.conf

docker 구성

컨테이너로서는 다음의 2개를 준비합니다.

Blueprint 컨테이너 (Markdown을 html로 변환)

Nginx 컨테이너 (브라우저에 HTML 스펙을 게시)

Dockerfile

Nginx는 공식 컨테이너를 사용하므로 생략하고 Blueprint 컨테이너를 만듭니다.
※ Blueprint라고 하는 것보다 gulp의 컨테이너일까・・・(뭐 세세한 것은 신경쓰지 않는 w)

Dockerfile

FROM node:9.11.2

RUN apt-get update

ARG USER="node"
ARG UID="1000"
ARG GID="1000"
ENV WORKSPACE="/blueprint/"

# set workspace.
RUN mkdir $WORKSPACE -p
WORKDIR $WORKSPACE

RUN npm config set unsafe-perm true

# install glup.
RUN npm init -y
RUN npm install gulp-cli -g
RUN npm install gulp -D
RUN npm install gulp-watch gulp-aglio gulp-plumber
RUN mkdir docs public
COPY gulpfile.js gulpfile.js

# support tools.
RUN apt-get install -y less vim

# set node user.
RUN groupmod -g $GID node && usermod -u $UID -g $GID $USER
RUN chown -R $UID:$GID $WORKSPACE
USER $USER

# command.
CMD gulp watch

gulpfile.js

gulp을 사용하여 Markdown을 HTML로 변환하기 위해 만듭니다.
※ 다양한 파일 중, 확장자가 「***.md」인 것만 변환 대상으로 합니다
※ md 파일이 추가되거나 변경되면 자동으로 감지하도록 watch 설정

gulpfile.js

const gulp    = require('gulp');
const aglio   = require('gulp-aglio');
const watch   = require('gulp-watch');
const plumber = require('gulp-plumber');

const src  = 'docs/**/'
const dest = 'public'

gulp.task('publish', function () {
    gulp.src(`${src}*.md`)
        .pipe(plumber({
            errorHandler: function(error) {
                console.error(error.message);
                this.emit('end');
            }
        }))
        .pipe(aglio({ template: 'default' }))
        .pipe(gulp.dest(dest));
});

gulp.task('watch', function() {
    return watch(src, () => {
        return gulp.start(['publish']);
    });
});

Nginx 설정

공식 Nginx를 사용하지만 DocumentRoot를 변경하고 싶으므로 설정 파일을 만듭니다.

nginx.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /blueprint/public/;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

docs 폴더

Markdown의 파일을 배치하는 폴더입니다.
샘플에서 "example.md"를 배치합니다.

docs/example.md

FORMAT: 1A
HOST: http://www.example.com/v1

# Auth
## login [/auth/login]
### POST
#### 概要
認証を行い、成功した場合アクセストークンなどを返す。


- Request (application/json)
    - Attribute
        - email: [email protected] (required) - メールアドレス
        - password: ******* (string, required) - パスワード


- Response 200 (application/json)
    - Attribute
        - auth_token: ********************* - auth token

public 폴더

gulp에서 Markdown에서 생성된 HTML을 배치하는 폴더입니다.

docker-compose.yml

docker-compose로 컨테이너를 시작하므로 구성 파일을 만듭니다.

docker-compose.yml

version: "2"

services:
  blueprint:
    #image: reflet/docker-blueprint
    build: .
    container_name: 'blueprint'
    volumes:
      - ./docs:/blueprint/docs
      - ./public:/blueprint/public

  nginx:
    image: nginx
    container_name: 'nginx'
    ports:
      - 8000:80
    volumes_from:
      - blueprint
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

시작

시작하고 본다.

터미널

$ docker-compose up -d

시작 상태를 확인해 봅니다.

터미널

$ docker ps -a
CONTAINER ID        IMAGE                     COMMAND                  CREATED             STATUS              PORTS                  NAMES
0128ad99f9e7        nginx                     "nginx -g 'daemon ..."   4 seconds ago       Up 2 seconds        0.0.0.0:8000->80/tcp   nginx
06f0370cbd7a        reflet/docker-blueprint   "/bin/sh -c 'gulp ..."   5 seconds ago       Up 4 seconds                               blueprint

테스트

「docs」폴더내에 새로운 사양서를 추가해 본다.

터미널

$ cp docs/example.md docs/hoge.md

HTML이 생성되었는지 확인해 봅니다.

터미널

$ ls -la public/
合計 56
drwxr-xr-x. 2 docker docker    59  6月  3 23:50 .
drwxrwxr-x. 5 docker docker   142  6月  3 23:25 ..
-rw-rw-r--. 1 docker docker     0  6月  3 23:25 .gitkeep
-rw-rw-r--. 1 docker docker 25138  6月  3 23:50 example.html
-rw-rw-r--. 1 docker docker 25138  6月  3 23:50 hoge.html

example.html과 hoge.html이 만들어졌습니다.
그래서 브라우저에서 확인해 본다.

h tp // 192. 168. 33. 10: 8000 HTML

htp // 192. 168. 33. 10: 8000 / 허리. HTML

※「vagrant(192.168.33.10)」의 IP 주소 부분은 자신의 환경으로 재기록한다