LoginSignup
3

More than 1 year has passed since last update.

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

Posted at

結論

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

背景

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」をインストールする

image.png

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

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

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

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

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

加えて注意点を3つ

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

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

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

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

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

image.png

(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と同じにしておくのが簡単でいいと思います。(たぶん)

dockerComposeFilebuild.Dockerfileかはお好みで。

image.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です。

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を起動する

image.png

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

image.png

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

その他の情報

MS Learn

あったんか..。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3