結論
リポジトリ内にある3つのファイルを確認すると、大体のイメージがつかめるかと思います。
- GitHub: hydrangeas/jekyll-remote-container-template
.devcontainer/devcontainer.jsondocker-compose.ymlDockerfile
背景
GitHub Pagesを更新するためにJekyllの環境を入れることにしました。
最近は使っていなかったのでRubyの開発環境は手元になく、０から構築する必要がありました。
とりあえず、手元の環境をなるべく汚さないようDockerの構築から開始したのですが、途中でVisual Studio Code拡張のRemote Containersを知ったので、そちらも同時に構築しました。
前提条件
- GitHub PagesにデプロイするためだけのJekyll開発環境を作成する
- Dockerfile/docker-compose.ymlは開発時にのみ使用する
(1) DockerはDocker Desktopをインストールするだけで良い
よく、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に転送されるため）
以下を参照させていただきました。
(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社の公開情報
その他の情報
- VSCode Remote Containerが良い
- VSCode Remote Containers を利用して最強のローカル開発環境を作りたい
- DockerとRemote Containersでの開発環境が最高過ぎる
MS Learn
あったんか..。
以上です。
ご覧いただきありがとうございました。