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

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


## TL;DR
docker-compose.yml
```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というファイルを作成すると、自動で反映されます。**



## 自分でビルドする場合
```bash
git clone https://github.com/shoma564/docker-reveal.js.git
cd docker-reveal.js
docker-compose build
docker-compose up
```

### Dockerfile
```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
```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>
```

## アクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/d08646ad-85e7-53fa-3ac0-bd451e099031.png)


## 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
```




### イメージURL
https://hub.docker.com/r/shomaigu/docker-reveal.js

### Githubでも公開
https://github.com/shoma564/docker-reveal.js.git


##### 参考文献
https://qiita.com/engishoma/items/002ad9ec9aefe0cb5a19

https://qiita.com/daemokra/items/322270091cf41a853226#%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AE%E7%A8%AE%E9%A1%9E