JekyllをRemote - Containersで簡単に開発を始めるために知っておきたかった9つのこと

# 結論

リポジトリ内にある3つのファイルを確認すると、大体のイメージがつかめるかと思います。

- [GitHub: hydrangeas/jekyll-remote-container-template](https://github.com/hydrangeas/jekyll-remote-container-template)
 - `.devcontainer/devcontainer.json`
 - `docker-compose.yml`
 - `Dockerfile`

# 背景

GitHub Pagesを更新するためにJekyllの環境を入れることにしました。
最近は使っていなかったのでRubyの開発環境は手元になく、０から構築する必要がありました。

とりあえず、手元の環境をなるべく汚さないようDockerの構築から開始したのですが、途中でVisual Studio Code拡張のRemote Containersを知ったので、そちらも同時に構築しました。

# 前提条件

- GitHub PagesにデプロイするためだけのJekyll開発環境を作成する
- Dockerfile/docker-compose.ymlは開発時にのみ使用する

# (1) DockerはDocker Desktopをインストールするだけで良い

- [Windows 10 HomeへのDocker Desktop (ver 3.0.0) インストールが何事もなく簡単にできるようになっていた (2020.12時点)](https://qiita.com/zaki-lknr/items/db99909ba1eb27803456)

> よく、PowerShellを使った設定やコントロールパネルの「Windowsの機能の有効化または無効化」で「Hyper-Vを有効にする」「仮想マシンプラットフォームを有効にする」などの事前準備が書かれた記事がありますが実は必要ないです。Docker Desktopのインストーラが自動でやってくれます。

全部手動でやってしまったよ・・。

# (2) Visual Studio Codeの拡張機能「Remote - Containers」をインストールする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7886/9d0c7953-11de-be04-de6f-cae2de8fb959.png)

# (3) GitHub Pages専用のDockerイメージを使用しない

プロジェクトディレクトリを作成＆初期化します。

```powershell
docker run --rm --volume="$PWD\:/srv/jekyll" -it -p 4000:4000 jekyll/jekyll jekyll new yourpage
```

Docker HubにはJekyllのビルドに使えそうなイメージが2つほどあります。

- [jekyll/jekyll:pages](https://hub.docker.com/layers/jekyll/jekyll/pages/images/sha256-a80baa7fc7837a8d7a912c71ba583156a3f97683b1d48bac39e32d2c8c2c974f?context=explore) (Compressed Size: 94.33MB)
- [jekyll/jekyll:latest](https://hub.docker.com/layers/jekyll/jekyll/latest/images/sha256-de110e0fdde342de0cb6fd5c63f64934b6ce25d0dd826c67113b3a5a3370784e?context=explore) (Compressed Size: 241.25MB)

展開後は3倍くらいのサイズになるので、jekyll/jekyll:pagesを使いたいところですが、`bundle install`でエラーになっちゃうので使わない方がいいです。（あまり深くエラーを見てません）

加えて注意点を3つ

- `$PWD`の後ろに`\`が必要
- 初期化だけなら`jekyll/jekyll:latest`でも`jekyll/jekyll:pages`でもOK
- `yourpage`でディレクトリも作成されますが、カレントディレクトリ（`.`）にファイルがあるとエラーになります（カレントディレクトリのファイルがDockerの`/srv/jekyll`に転送されるため）

以下を参照させていただきました。

- [JekyllをDokcer上で動かしてGitHub Pagesのローカル環境での確認を楽する](https://qiita.com/shifumin/items/8d5d26dfa18d4b62d873)

# (4) ワークスペースを保存する

```
[ファイル] → [名前を付けてワークスペースを保存]
```

__ここ、とても大事。__
保存しておかないと、Remote Containersで接続後にファイルが読み込めない旨のエラーがでます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7886/b49d3c16-2c17-f4b7-2f63-472de761d88c.png)

# (5) Visual Studio Codeに`devcotainer.json`を追加する

Visual Studio CodeのRemote Containers用に(3)で作成した`yourpage`直下に`.devcontainer`ディレクトリを作成し、その下に`devcontainer.json`を追加します。

```json
{
  "dockerComposeFile": [
      "../docker-compose.yml"
  ],
  "service": "jekyll",
  "workspaceFolder": "/srv/jekyll",
  "shutdownAction": "stopCompose"
}
```
`workspaceFolder`はVisual Studio Codeの設定を保存する先になります。`docker-compose.yml`で指定する`PROJECT_ROOTDIR`と同じにしておくのが簡単でいいと思います。（たぶん）

`dockerComposeFile`か`build.Dockerfile`かはお好みで。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7886/5426c7d2-8288-4fa1-e879-92af2f0a19a3.png)

# (6) サイト内リンクのURLを0.0.0.0ではなくlocalhostにする設定を追加する

色々調べていると、Windowsでは0.0.0.0は使えないのでlocalhostに上書きする(`_config.yml`と同階層に`_config_dev.yml`ファイルを追加して、`docker run`するときに`--config`指定する）といった情報が多く出てきます。

__必要ないです。__

Dockerファイルに`ENV JEKYLL_ENV docker`を指定してください。コマンドから`docker run`するなら、`-e "JEKYLL_ENV=docker"`を指定してください。

__ここ、とても大事。__

# (7) Dockerfile/docker-compose.ymlを追加する

カレントディレクトリのファイルを`/srv/jekyll`ディレクトリへ転送するDockerfileです。

```dockerfile
FROM jekyll/jekyll:pages

# Docker side
ENV PROJECT_ROOTDIR /srv/jekyll
WORKDIR $PROJECT_ROOTDIR

# Copy current directory files
COPY $PWD $PROJECT_ROOTDIR
RUN bundle install

RUN jekyll build

EXPOSE 4000
ENV HOST 0.0.0.0

# !! IMPORTANT !!
ENV JEKYLL_ENV docker

CMD ["jekyll", "serve", "--watch", "--force_polling"]
```

`docker-compose.yml`では、ポートの指定とボリュームのマウントだけしています。

```docker
version: "3"
services:
  jekyll:
    build: .
    ports:
      - 4000:4000
    volumes:
      - ".:/srv/jekyll"
```

# (8) ウィンドウ左下の`><`からRemote-Containersを起動する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7886/a1a6ffd7-973a-a143-c8b6-39c0ce1a71ec.png)

ちなみに、`Ctrl + Shift + P`メニューだと、`Remote-Containers: Rebuild and Reopen in Container`というのも選べます。Dockerfileを変更したときなどは、こちらから起動するのが便利。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7886/e1483da8-8c6c-4fcd-bebc-34a8085fb207.png)

# (9) 公式情報をチェックする

- [Developing inside a Container](https://code.visualstudio.com/docs/remote/containers) .. Microsoft社の公開情報
- [vscode-dev-containers](https://github.com/microsoft/vscode-dev-containers/tree/master/containers/jekyll) .. Microsoft社のJekyll+Remote Containersのサンプルコード
- [How to Develop Inside a Container Using Visual Studio Code Remote Containers](https://www.docker.com/blog/how-to-develop-inside-a-container-using-visual-studio-code-remote-containers/) .. Docker社の公開情報

## その他の情報

- [VSCode Remote Containerが良い](https://qiita.com/d0ne1s/items/d2649801c6f804019db7)
- [VSCode Remote Containers を利用して最強のローカル開発環境を作りたい](https://qiita.com/sabure500/items/a117b8a1733193be455f)
- [DockerとRemote Containersでの開発環境が最高過ぎる](https://www.keisuke69.net/entry/2020/06/04/145719)

## MS Learn

- [Visual Studio Code を使用して Docker コンテナーを開発環境として使用する](https://docs.microsoft.com/ja-jp/learn/modules/use-docker-container-dev-env-vs-code/)

あったんか..。

以上です。
ご覧いただきありがとうございました。