Zenn CLI環境をDockerで構築
はじめに
Zenn CLIを導入するにあたって、ローカル環境を汚したくなかったのでDockerで構築しました。
なお、Zenn CLIの基本的な導入方法はZenn公式よりこちらで公開されています。
リポジトリ準備
まずはリポジトリを準備します。
以下のように2つのリポジトリを作成しましょう(注1)。
zenn-content-env
zenn-content
zenn-content-env
は、docker-compose.yml
などDocker関連のファイルを格納するためのリポジトリです。
zenn-content
は、Zennと連携しているリポジトリです。こちらのリポジトリに記事情報を格納していくことになります。
Zennとリポジトリの連携方法はZenn公式よりこちらで公開されています。
ローカルの作業ディレクトリが~/workspace
だとすると
~/workspace
配下にzenn-content-env
を配置し、~/workspace/zenn-content-env
配下にzenn-content
を配置します。
ファイル作成
次に、用意したリポジトリにファイルを追加していきましょう。
docker-compose.yml
以下ファイルを~/workspace/zenn-content-env
配下に追加しましょう。
特に難解な箇所はないと思いますので解説は割愛します。
version: '3'
services:
zenn-content:
build: ./docker/zenn-content
volumes:
- ./zenn-content:/usr/src/app
ports:
- "8000:8000"
tty: true
Dockerfile
以下ファイルを~/workspace/zenn-content-env
配下に追加しましょう。
特に難解な箇所はないと思いますので解説は割愛します。
FROM node:15.3.0-alpine3.10
WORKDIR /usr/src/app
RUN apk update && \
apk add git
EXPOSE 8000
コマンド実行
以下コマンドを実行しましょう。
Zenn CLIの使い方はZenn公式よりこちらで公開されています。
$ docker-compose up -d
$ docker-compose exec zenn-content npm init --yes # プロジェクトをデフォルト設定で初期化
$ docker-compose exec zenn-content npm install zenn-cli # zenn-cliを導入
$ docker-compose exec zenn-content npx zenn init # セットアップ
動作確認
最後にプレビューを開いて動作確認とします。
$ docker-compose exec zenn-content npx zenn preview
http://localhost:8000にアクセスして以下のように表示されたら成功です。
以下コマンドなどを用いて記事を書き始めましょう!
$ docker-compose exec zenn-content npx zenn new:article
さいごに
特に詰まることなく導入できました。
今後はこちらを使って記事投稿を行っていけたらと思います。
備考
(注1)
zenn-content-env
リポジトリの作成は任意です。