なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2020/08/19

Docsify CLI を使って快適にドキュメントを書きたい

カテゴリー：

Docker

Markdown to Documentation Tool として Docute を使っていたけれど、
知らないうちにアクティブにはメンテナンスされなくなっていたので、
Docsify に乗り換えました。

今回はそのお話です。

Docsify には docsify-cli があって、それでプレビューすることで、
自動でリロードしてくれる機能があるのですが、この手のツールはパスによっては、
リロードされると 404 を返されます。
(例: /Guide/Installation みたいな index.html が参照される以外の場所)

それがあまりにもツライので、 Docker を使って対策しました。

構成としては以下のような感じ

+-------+   +---------+
| nginx +---+ Docsify |
+-------+   +---------+

nginx が前段としてリクエストを受け取って Rewrite し、それを Docsify に受け流します。
nginx.conf はこんな感じで書きました。

events {
  worker_connections 10;
}

http {
  server {
    listen      80;
    server_name localhost;

    location / {
      rewrite           ^/(.+?)/(.+?)/.* /$1/$2/index.html break;
      proxy_pass        http://host.docker.internal:3000;
      proxy_redirect    off;
      proxy_set_header  Host $host;
    }

    location ~ \.(js|md|css)$ {
      proxy_pass        http://host.docker.internal:3000;
      proxy_redirect    off;
      proxy_set_header  Host $host;
    }
  }
}

アセット類は Rewrite する必要が無いので受け流します。次に Docsify CLI を実行するイメージを作る Dockerfile はこんな感じ

FROM node:12.6.0

COPY package.json yarn.lock /home/docsify/
WORKDIR /home/docsify
RUN yarn

CMD [ "yarn", "start" ]

Livereload を有効にしたいので、それらはコピーしません。最後に docker-compose.yml

version: "3"

services:
  docsify:
    build: .
    volumes:
      - ./public:/home/docsify/public:ro
    ports:
      - 3000:3000
      - 35729:35729
    environment:
      CHOKIDAR_USEPOLLING: 1
  nginx:
    image: nginx
    volumes:
      - ./config/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 5000:80
    links:
      - docsify

Docsify を実行している方で CHOKIDAR_USEPOLLING を使用しているのは、ネットワーク経由だとどうやらうまくポーリングしてくれないから指定しています。あと Port 35729 を開けているのは Livereload 関連のためです。最後に docker-compose up すれば良い感じに動きます。

ではでは