はじめに

皆さん、こんにちは。
普段はフロントエンドエンジニアとして働いているしがないエンジニアです。
今年の8月にQiitaCLIが正式にリリースされました。

今回はdockerコンテナを利用したQiitaCLIの環境構築方法を記載します。

自分のPCの環境は汚したくないという潔癖系エンジニアたち必見です。

ちなみに本記事もIDEより執筆しています。

簡単に使用環境

macOS 13.4
PHPStorm 2023.2
Docker Desktop 4.22.0

※各自docker環境は構築してください。

今回のディレクトリ構造

qiita-cli
├── Dockerfile
├── docker-compose.yml
└── qiita  // ここに記事ファイルが入る

1. Dockerfileの作成

それではdocker環境を作っていきます。

%  cd qiita-cli
%  touch Dockerfile

Dockerfile

FROM node:18-slim
WORKDIR /qiita

#qiita-cliのインストール
RUN npm install @qiita/qiita-cli --save-dev
RUN npx qiita version
RUN npm install @qiita/qiita-cli@latest
RUN npx qiita init

#ポートフォワーディングを用いてdockerコンテナ名で名前解決
RUN sed -e "s/localhost/qiita/g" -i /qiita/node_modules/@qiita/qiita-cli/dist/server/app.js

EXPOSE 8888

2. docker-compose.ymlの作成

続いてコンテナを定義していきます。

%  touch docker-compose.yml

docker-compose.yml

version: '3'
services:
  qiita:
    container_name: qiita
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 8888:8888
    volumes:
      - ./qiita/:/qiita/public/
    environment:
      TZ: Asia/Tokyo
    tty: true

3. コンテナを起動する

Dockerfileとdocker-compose.yml を作成した後、いよいよコンテナを起動します。

%  docker compose up -d

[+] Running 2/2
 ✔ Network qiita_default  Created                                                                                                                                          0.0s 
 ✔ Container qiita        Started

4. コンテナ内でQiitaにログインする

あらかじめQiitaのアクセストークンを入手する必要があります。
詳細は公式リポジトリを参考ください。

%  docker compose exec qiita bash

/qiita# npx qiita login

以下のURLにアクセスしてトークンを発行してください。（「read_qiita」と「write_qiita」にチェックを入れてください）
  https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli
  
発行したトークンを入力: 発行したトークンを入力

ログインに成功！

Hi username!

ログインが完了しました 🎉
以下のコマンドを使って執筆を始めましょう！

🚀 コンテンツをブラウザでプレビューする
  npx qiita preview

🚀 新しい記事を追加する
  npx qiita new (記事のファイルのベース名)

🚀 記事を投稿、更新する
  npx qiita publish (記事のファイルのベース名)

💁 コマンドのヘルプを確認する
  npx qiita help

5. コンテナ内でQiita previewする

ここまで来ればあとはpreview するだけ。

/qiita# npx qiita preview

http://localhost:8888/ にアクセスして起動していることを確認！

試しに記事を作成する

試しに記事が作成できるか確認してみましょう。

/qiita# npx qiita new 記事のファイルのベース名

created: ファイル名.md

/qiita内にファイルが作成していることを確認できました。

test2023.md

---
title: test2023
tags:
  - ''
private: false
updated_at: ''
id: null
organization_url_name: null
slide: false
---
# new article body

記事の投稿

最後に記事を投稿してみましょう。

/qiita# npx qiita publish test2023

Successful!

Qiitaのマイページへアクセスして自身の投稿が作成さえていればOK！
ちなみに更新も同じコマンドでできるみたいです。

記事の投稿・更新

最後に

いかがでしょうか？
やはり、普段から自分が慣れ親しんでいるエディタから投稿できるのは非常に書きやすいですね。
個人的に執筆体験が上がったことで、記事を投稿するハードルが格段に下がりました。
またGithub Copilotと組み合わせて、添削しながら書くのも良さそうです。
地味に過去の投稿もCLIから確認・編集できるのが嬉しい。

今回の環境について、可能な限り最小構成で構築できたかと思います。
他にもっとベストな方法があればコメントいただけると嬉しいです。

参考

https://blog.qiita.com/qiita-cli-beta-release/
https://qiita.com/ikepu-tp/items/c22bf26ee97100f64d9a
https://qiita.com/engishoma/items/13b7eac3b335b56711a7