Dockerを用いたqiita-cliの環境構築

こんにちは，ご覧いただきありがとうございます。
普段，皆さんはコーディングの時にどのソフトを使っていますか？
ちなみに私はVSCodeを使っています。
使い慣れているソフトがあるのであれば，Qiitaの投稿もそれを使ってしたいですよね！！

それを可能にする

というものがありました！
Dockerを使ってローカルで環境構築をしたのでその備忘録です。
皆さんのお役に立つことを願って…

環境

• Windows11
• WSL2

wsl2

$ cat /etc/lsb-release

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=22.04
DISTRIB_CODENAME=jammy
DISTRIB_DESCRIPTION="Ubuntu 22.04.2 LTS"

1. Dockerfileの作成

Dockerを使うのではじめは当然Dockerfileの作成です。
適当に作業ディレクトリを作ってください。

追記（2023/09/06）

sedがうまく動作せず，http://locahost:8888でpreviewサーバが立ち上がるようになっちゃいました。（あまりDockerやLinuxに詳しくなくて…）
とりあえずの対応策として，元ファイルを書き換えることで解決しました。

/node_modules/@qiita/qiita-cli/dist/server/app.js:57

- const host = "localhost";
+ const host = "0.0.0.0";

Dockerfile

FROM node:20-alpine3.17

WORKDIR /qiita

RUN sed -e "s/localhost/qiita/g" -i /qiita/node_modules/@qiita/qiita-cli/dist/server/app.js

EXPOSE 8888

docker-compose.yml

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

2. コンテナの起動

docker-compose up -d

3. qiita-cliのインストール

docker-compose exec -it qiita sh
npm install @qiita/qiita-cli --save-dev

npx qiita version

でバージョンが表示されればインストール成功です。

4. qiita-cliの設定

4-1. 初期設定

npx qiita init

4-2. Qiitaログイン

APIキーの生成

以下からAPIキーを生成しておいてください。

CLIでのログイン

npx qiita login

トークンを聞かれるので上で発行したキーを入力してください。

4-3. プレビュー画面の表示

npx qiita preview

プレビュー画面が起動されたはずです！

もし2回目以降にnpx qiita previewでエラーが起きる場合
~/.config/qiita-cli/credentials.jsonを作成すると大丈夫でそうです。

以上でローカルにqiita-cliの環境構築ができました。
これからのQiita投稿作業が幾分か楽になりそうです！！（笑）

参考