はじめに
皆さん、こんにちは。
普段はフロントエンドエンジニアとして働いているしがないエンジニアです。
今年の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
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
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内にファイルが作成していることを確認できました。
---
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