🐳

zenn の開発環境を Docker で作成しよう

2021/03/24に公開

Docker

Zenn

Dockerfile

tech

Zenn の開発環境を Docker で作成する

Mac のローカル環境を汚したくない！！
Node のバージョン管理・切り替えをやりたくない！！
久しぶりに Homebrew コマンド叩いたらエラーが出る！！
記事書き始めるまでの環境構築が時間かかる！！
いろんなパソコンで記事を書くから環境統一したい！！

こんなお悩み Docker が解決いたします。

前提

手順

Docker と docker-compose を利用して環境構築を行います。一度設定してしまえば、あとはコマンド一発で環境を構築できます！！

docker-compose.yml の作成
Zenn のセットアップコマンドを実行
Zenn プレビュー用サーバの起動設定
docker-compose を再起動

docker-compose.yml の作成

Zenn のセットアップを行うための node 環境を docker-compose で整えます。

docker-compose.yml

version: "3.5"

services:
  zenn:
    image: node:12.16.2-alpine
    tty: true
    stdin_open: true
    ports:
      - "8082:8000"
    networks:
      - container_network
    volumes:
      - app-data:/var/www/application:cached
    # command: /bin/sh -c "npm install && npx zenn preview"   ← 後でコメントアウトを外す
    working_dir: /var/www/application
networks:
  container_network:
    driver: bridge
volumes:
  app-data:
    driver_opts:
      type: none
      device: $PWD
      o: bind

解説

image:
　使用するイメージ。お好きな node バージョンを指定しましょう。
alpine Linux を選べば最小のイメージサイズで Docker を立ち上げられるので、容量を節約できます。

tty、dtdin_open:
　docker run -it と同等。Docker コンテナをフォワグラウンドで実行し、コンテナ内を操作できるようになります。

ports:
　ポート番号。"ホスト":"コンテナ" になっている。
Zenn のプレビュー用の node サーバーはデフォルトで、8000 番ポートで実行するので、コンテナ側のポートは 8000 番、ホスト側は、Mac 上で利用していないポートを指定しください。 80 番や 8080 番はよく使われてますね。

networks::
　コンテナ間通信を行うためのネットワークです。一つのコンテナのみなので必要ありませんが、
デフォルトでネットワークが勝手に作成され、ネットワーク名も自動でフォルダ名が割り当てられてしまうので、明示的に命名しています。

volumes:
　永続ボリュームフォルダの指定です。ホストボリュームをコンテナの指定ディレクトリにマウントします。今回は、プロジェクトフォルダ直下をそのまま /var/www/application にマウントしています。cached を指定すると多少動作が早くなります。

working_dir:
　コンテナの中にログインしたときの初期ディレクトリです。マウントしたディレクトリを指定しています。

Zenn のセットアップコマンドを実行

Zenn 公式の導入手順に沿って Zenn CLI をインストールします。
あらかじめ Zenn と GitHub リポジトリとの連携を行いましょう。

0. Docker コンテナの起動

先程作成した docker-compose.yml をもとに以下のコマンドで docker コンテナを起動します。

$ docker-compose up

1. コンテナにアタッチ

以下のコマンド、または Visual Studio Code などからコンテナ内にアタッチします。
コマンドの場合

$ docker exec -it <コンテナ名> /bin/sh

Visual Studio Code の場合

Visual Studio Code

2. zenn-cli のインストール

zenn-cli をインストールするためにコンテナ内で以下のコマンドを実行します。

$ npm init --yes
$ npm install zenn-cli

3. Zenn の初期プロジェクトセットアップ

Zenn の記事作成のための初期プロジェクトコマンドを実行します。

$ npx zenn init

以上で、zenn-cli の環境設定は終わりです。

プレビュー用サーバの起動設定

zenn preview を docker-compose up 時に自動実行させるために docker-compose.yml を少し修正します。

docker-compose.yml

version: "3.5"

#### 中略 ####

    volumes:
      - app-data:/var/www/application:cached
    command: /bin/sh -c "npm install && npx zenn preview"   # ← ここのコメントアウトを外す
    working_dir: /var/www/application

#### 中略 ####

作成した docker-copose.yml のコメントアウトしていたところを外します。
docker 起動時に npx zenn preview を実行することで、自動でプレビュー用の node サーバが立ち上がります。また、npm install をすることによって他の端末で作業する際に１から自動で zenn の開発環境を作成することができます。

git にこのプロジェクトを push 、他の端末で clone し docker-compose up すると同じ環境がすぐに完成します。

docker-compose を再起動

最初に立ち上げていた docker-compose を Ctrl + c で停止しもう一度 docker-compose up で起動します。

$ dockder-compose up

Recreating zenn_zenn_1 ... done
Attaching to zenn_zenn_1
npm WARN application@1.0.0 No repository field.
zenn_1  | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
zenn_1  | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
zenn_1  | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/next/node_modules/fsevents):
zenn_1  | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
zenn_1  | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
zenn_1  | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
zenn_1  |
zenn_1  | audited 887 packages in 10.547s
zenn_1  |
zenn_1  | 50 packages are looking for funding
zenn_1  |   run `npm fund` for details
zenn_1  |
zenn_1  | found 0 vulnerabilities
zenn_1  |
👀Preview on http://localhost:8000

立ち上がったのを確認したらブラウザで localhost:8082 にアクセスしてみましょう。zenn のプレビュー画面が表示できたら成功です！！