reveal.jsをDockerコンテナ化してみた #Docker

目的

reveal.jsでスライドを作成する時、作業するホストが変わると毎回環境構築が必要となる。手間となるので、今回はreveal.jsの環境をDockerコンテナ化する。

TL;DR

docker-compose.yml

version: '3.3'
services:
    reveal-docker:
        ports:
            - 8000:8000
        image: shomaigu/docker-reveal.js
        container_name: 'reveal-docker'
        restart: always
        volumes:
            - ./md:/etc/reveal/md/

mdフォルダ配下にslide.mdというファイルを作成すると、自動で反映されます。

自分でビルドする場合

git clone https://github.com/shoma564/docker-reveal.js.git
cd docker-reveal.js
docker-compose build
docker-compose up

Dockerfile

FROM ubuntu:22.04
RUN apt-get -y update
RUN apt-get -y install curl git

RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - && apt-get install -y nodejs

RUN mkdir /etc/reveal/
WORKDIR /etc/reveal/
RUN git clone https://github.com/hakimel/reveal.js.git /etc/reveal/
RUN cd /etc/reveal/ && npm install

RUN sed -e "s/'localhost'/'0.0.0.0'/g" -i /etc/reveal/gulpfile.js
ADD ./index.html /etc/reveal/index.html

ENTRYPOINT ["npm","start"]

docker-compose

docker-compose.yml

version: '3.3'
services:
    reveal-docker:
        ports:
            - 8000:8000
        build: .
        container_name: 'reveal-docker'
        volumes:
            - ./md:/etc/reveal/md/
        tty: true

index.html

<!doctype html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

                <title>reveal.js</title>

                <link rel="stylesheet" href="dist/reset.css">
                <link rel="stylesheet" href="dist/reveal.css">
                <link rel="stylesheet" href="dist/theme/black.css">

                <!-- Theme used for syntax highlighted code -->
                <link rel="stylesheet" href="plugin/highlight/monokai.css">
        </head>
        <body>
<pre style="display:none"><code></code></pre>
<div class="reveal">
  <div class="slides">
    <section data-markdown="md/slide.md" data-separator="^\n---\n$" data-separator-vertical="^\n>>>\n$"></section>
  </div>
</div>

                <script src="dist/reveal.js"></script>
                <script src="plugin/notes/notes.js"></script>
                <script src="plugin/markdown/markdown.js"></script>
                <script src="plugin/highlight/highlight.js"></script>
                <script>
                        // More info about initialization & config:
                        // - https://revealjs.com/initialization/
                        // - https://revealjs.com/config/
                        Reveal.initialize({
                                hash: true,

                                // Learn about plugins: https://revealjs.com/plugins/
                                plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
                        });
                </script>
        </body>
</html>

アクセス

Dockerfile 解説

nodejsの最新版入手

aptから入れるとバージョンが低い物が入ってしまい、npm install時にエラーが起きてしまう。そこで、以下の命令によって最新版のインストールを行った。

RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - && apt-get install -y nodejs

reveal.jsのダウンロード

RUN git clone https://github.com/hakimel/reveal.js.git /etc/reveal/

reveal.jsのインストール

RUN cd /etc/reveal/ && npm install

外部への公開

reveal.jsはデフォルトの場合localhostからのアクセスしか許可していないので、以下の命令を入れて、外部公開する

RUN sed -e "s/'localhost'/'0.0.0.0'/g" -i /etc/reveal/gulpfile.js

reveal.jsをDockerコンテナ化してみた

目的