ツナ缶雑記

ぐうたらSEのブログです。主にマイクロソフト系技術を中心に扱います。

VSCode の Remote - Containers で Jekyll の開発環境を作る

f:id:masatsuna:20210912234349p:plain

GitHub Pages では、マークダウンから HTML への変換に Jekyll という Ruby ベースのツールを利用します。

jekyllrb-ja.github.io

単純に GitHub リポジトリと連携する場合、ローカル開発環境は特に気にしなくてもよいのですが、 Windows のローカル環境で Jekyll の動作確認しようとすると割とめんどくさいことになります。 Windows 環境だと公式サポートもなくて、実際に動かしてみても動作不安定な感じでした。

そんな時はコンテナー使えばいいじゃない、ということで、 Visual Studio Code の Remote - Containers extension を使って、 Jekyll のローカルビルド環境を作ってみました。

やりたいこと

私の場合はこんなことを考えていました。

  • Jekyll のローカルビルド、ローカル確認環境を Windows 上に作りたい
  • できる限りローカルの環境を汚したくない
  • ローカル環境のブラウザーで作成したサイトの確認を行いたい
  • マークダウンの保存をしたら即時サイトの確認をしたい
  • VS Code の Remote - Containers 上で Git リポジトリと連携したい

動作確認環境

  • Windows 10 21H1
  • Visual Studio Code 1.60.0
  • Remote - Containers extension v0.194.0
  • Docket Desktop 4.0.0
  • Jekyll 4.2.0(docker composeではタグ未指定、今回の検証に使用したバージョン)

このサンプルでできること

VS Code を立ち上げて数クリックで Jekyll の開発ができる

起動するときは GUI 上でポチポチするだけです。

f:id:masatsuna:20210912224845p:plain
左下のボタンを押して [Reopen in Container] を選択

Visual Studio Code がコンテナーに接続する

Docker コンテナーの起動と接続は Remote - Containers の拡張機能が docker compose 経由でやってくれます。 起動するとターミナルがコンテナーに接続してくれます。

f:id:masatsuna:20210912225437p:plain
起動するとターミナルが Dev Container と接続

ブラウザーが立ち上がる

先ほどの GUI ポチポチをやると、ローカルマシンのブラウザーが開きます。 そして起動した Jekyll の開発サーバーに接続してくれます。

f:id:masatsuna:20210912225734p:plain
ブラウザーが起動する

初回起動時やキャッシュが効いていないときなど、開発サーバーの起動まではそれなりに時間を要します。 それなりに高スペックなマシンでも、最初は 1 分くらいかかると思います。 ブランクページに飛んでしまったときは、サーバーが立ち上がるのを待ってから、画面をリロードしてみてください。

マークダウンを保存すると即画面に反映

Jekyll はブラウザーをオートリロードするための仕組みがあります。 今回のサンプルではそのあたりも組み込んでみました。 以下のように、マークダウンファイルを保存するとブラウザー画面もオートリロードされます。

f:id:masatsuna:20210912231945g:plain
マークダウンを保存するとブラウザーがオートリロード

コンテナーに接続しながら VSCode 上から Git リポジトリも操作可能

2 枚 Visual Studio Code を立ち上げたり、コマンドラインで操作しなくても、普通に開発を進めることができます。

サンプルコード

このポストで解説しているサンプルコードは以下で公開しています。 環境構築手順等は README を参照してください。

github.com