結論
リポジトリ内にある3つのファイルを確認すると、大体のイメージがつかめるかと思います。
-
GitHub: hydrangeas/jekyll-remote-container-template
.devcontainer/devcontainer.json
docker-compose.yml
Dockerfile
背景
GitHub Pagesを更新するためにJekyllの環境を入れることにしました。
最近は使っていなかったのでRubyの開発環境は手元になく、0から構築する必要がありました。
とりあえず、手元の環境をなるべく汚さないよう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
あったんか..。
以上です。
ご覧いただきありがとうございました。