結論

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

GitHub: 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時点)

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

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

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

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

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

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

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

jekyll/jekyll:pages (Compressed Size: 94.33MB)
jekyll/jekyll:latest (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のローカル環境での確認を楽する

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

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

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

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

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

{
  "dockerComposeFile": [
      "../docker-compose.yml"
  ],
  "service": "jekyll",
  "workspaceFolder": "/srv/jekyll",
  "shutdownAction": "stopCompose"
}

workspaceFolderはVisual Studio Codeの設定を保存する先になります。docker-compose.ymlで指定するPROJECT_ROOTDIRと同じにしておくのが簡単でいいと思います。（たぶん）

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

(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です。

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では、ポートの指定とボリュームのマウントだけしています。

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

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

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

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

Developing inside a Container .. Microsoft社の公開情報
vscode-dev-containers .. Microsoft社のJekyll+Remote Containersのサンプルコード
How to Develop Inside a Container Using Visual Studio Code Remote Containers .. Docker社の公開情報

その他の情報

MS Learn

Visual Studio Code を使用して Docker コンテナーを開発環境として使用する

あったんか..。

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

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

結論

背景