Masami Koganei

合同会社 Interrupt MEMBER

合同会社Interruptのメンバーのひとり、まさみといいます。

開発の仕事をしていると開発環境というものに悩まされることはないですか？

そこでわたしが出会ったdockerというツールで様々な開発環境をローカルに作り出しちゃおう💕 というのがこのブログの主旨になります。

最初に申し上げておきますが、わたしは有能なプログラマーではありません😓

なのでついつい説明が素人っぽくなってしまうのをお許しください。

ブログも大体スマホで書いてるしなっ🫢

逆にわかる人はどんどん読み飛ばしてください。

dockerとは？

サーバー又はローカルな開発環境等で動作するDockerコンテナと呼ばれるアプリケーションの実行環境を作り出し、

あたかも専用サーバーのように動作させることができる。

つまり複数のコンテナを作れば１台のPCに数台の専用サーバーを動作させられる。

そして不要になったら消去し、PC環境を汚すことがないSDGsなアプリケーションなのだっ。

第一回dockerでjekyll

さて第一回はこのサイトを構成しているjekyll

この開発環境を作り出して見たいと思います。

jekyllとは？

何回覚えようとしてもこの綴り、覚えられない😓

lekyll(ジキル)とは静的サイトの生成を行うため、RubyGemsで配布されているRuby製のツールとのことです。

そう。このRuby環境がまた厄介なので、そこも含めてdockerで作り出してしまうのがいいところ

dockerがあればRubyだろうとJavaだろうと環境を気にせず活躍できる。

まるでツール界の大谷翔平みたいなものなのだ。（あ話がそれた）

つまりサーバーに配置されたファイルはHTMLであるため高速に動作しますが、作る側はプログラミング的なことをやっちゃたりするみたいです。（サーバーに置いた時点でjekyllがHTMLにしてくれる）

dockerとかの準備ー他人任せの引用

わたしはPCはMacBook(M1)でやっていますがWindowsでも多分大丈夫でしょう。

ここで使うツールはWindowsでもあるし、わたしもWindowsノートでもちゃんと動かしますよ

• 無料でどんな言語環境でも使えるVsCodeここを参照してインストールしました
• これが主役のDockerDesktopここを参照しました
• そしてdocker-compose dockerコンテナを複数管理できるツール
• そしてjekyll

プロジェクトを作ってみよう

こちらを参考にしてプロジェクトというかフォルダを作ってみました

VsCodeはフォルダごとにプロジェクトを開いてくれるので、どこか適当なディレクトリにこんな感じで構成します

• 親ディレクトリ(jekyllなど)
  • app
    • _site(markdownファイルを配置するフォルダです)
  • output
    • _site(生成されたHTMLが出力されるフォルダです)
  • docker-compose.yml
  • DockerFile

こんな感じで

docker-compose.yml

以下docker-compose.ymlの例です。ここではM1のためplatformを使っています

version: "3"
services:
  app:
    container_name: jekyll
    platform: linux/amd64
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./app/_site:/usr/src/app
      - ./output/_site:/srv/jekyll/_site
    command: jekyll serve -s /usr/src/app --watch --verbose --trace
    ports:
      - "4000:4000"

ご覧のように今回はdockerコンテナは一つしか使用しないのでdocker-composeを使う必要はないのですが後々必要になるので使用しています。

DockerFile

DockerFileにimageを記述しています。docker-compose.ymlにまとめてもよかったんだけど、Webrickがないってエラーが出たのでインストールしています。

FROM jekyll/jekyll:latest
RUN gem install webrick

実行してみるっ

VsCodeでターミナルを開き

docker-compose -p <コンテナ名> up -d

とやってみましょう

DockerDesktopはこうなればOKです。

ここの左ベインContainersに今、動作しているコンテナが表示され、動作中のActions状態になっていればjekyllが動作していることになります。

ここに停止ボタン（ゲームコントローラーの🔲みたいなやつね）ではなく再生ボタン（▶️）が出ていると何らかの事情でコンテナが停止しています。

動かなくても慌てない

わたしの経験上、開発環境が簡単にすぐ動作する、なんて今の時短レシピのようなことはまず、ありません。

開発とは往々にしてうまく行かないものです。なので慌てない、落ち込まないことです。

そう。動かなければ動かせば良いのです。

DockerDeskTopは簡単に実行ログが見れるのでラクです。

Appleシリコンでの注意点

MacBookのM1チップなどのAppleシリコンでDockerDesktopを使う場合、いくつかの注意点があります。

dockerで読み込むimageがエラーになってしまう場合です。

以下にいくつかの対処法を載せます。

このようにUse Virtualization frameworkをオンにする

とか

docker-compose.yamlファイルに

platform: linux/x86_64

を追加する。

動作したらブラウザで確認

dockerコンテナが動作したらChromeなどのブラウザで

http://localhost:4000

にアクセスして見ましょう

のようになればOKです。あとは/app/_siteの下にindex.mdを追加していきましょう

Jekyllに--watchオプションを使用しているので実行中にリアルタイムで更新してくれます。

余談ですが、すでに作成中のjekyllサイトがある場合はjekyll動作後に/app/_siteにコピーすると勝手に生成してくれます。便利。