Zenn
🐙

【作ってみた】Zennの執筆でも使えるVagrantのススメ

2021/03/15に公開
Vagrant
tech

はじめに

今回はZennの執筆作業に使えるVagrantのご紹介です。

Vagrant自体はGithub上に置いています👉amezousan/zenn-vagrant

慣れている方であればREADMEを読むだけで環境構築ができるようにしたつもりですが不備などがありましたらコメントにてお知らせください。

以下の読者ターゲットに絞って記述しています。

  • git操作がある程度分かる
  • Virtualbox等の仮想環境ツールを使ったことがある

Vagrantって何？

Vagrantは一言で表すと、仮想環境の設定を記述できるソフトウェアです。

仮想環境は知ってる人も多いかと思いますが、自分が使っているパソコン上(別名: ホストOS)に別のパソコン(別名: ゲストOS)を立ち上げる、と言う形式があります。

もちろん、仮想環境用のツールには視覚的にネットワーク構成、CPU、メモリなどの設定が簡単にできるように設計されています。

ただこれらの設定を毎回手作業で行うのは面倒ですよね。そこでVagrantで細かな設定をコード化することで、いつでもどこでも同じ仮想環境をお手軽に構築することが出来ます。

便利な時代ですよね。

このVagrantを使うと何が良いの？

先に環境設定を説明する前に本Vagrantの利点・欠点をお話します。

✅利点

  • Vagrantの勉強ができる！
  • どのパソコンでも同じ執筆環境が構築できる
  • 自分好みの設定を試して環境を壊せる・作れる！

❌欠点

  • Zenn上で執筆する方が遥かに効率が良い(UI/UXが最高)
  • 1つのパソコン上で秘伝のタレ(Terminal設定)を育てたい時に不利

確かに手軽さでは今のパソコンで完結させる方が楽かもしれません。ただVagrantを使うと、例えばソフトウェアのバージョンを制御できるので「何かをアップデートしたら何故か動かなくなった」のような無駄なトラブルシューティングをしなくて済みます。

そして実務においても、いちいち環境設定を説明する文書を作るよりも、その環境ごとコードに残して置くことで誰でも簡単に引継ぎ作業ができるようになります。

学習コストもそこまで高くないので、自分の知識の幅を広げると言う意味で知っておいて損はないのがVagrantです。

と言うセールストークはさておき、実際に環境を作っていきましょう！

ゲストOSを立ち上げる

今回は「bento/ubuntu-18.04」を使用します。Ubuntuが個人的にお気に入りなだけで特に深い意味はないです :)

事前準備

ゲストOSでのファイル更新をホスト側で検知するために、追加でVagrantプラグイン「vagrant-fsnotify」を入れることをオススメします。

Vagrantが入ってる状態であれば次のコマンドで簡単にインストール可能です: $ vagrant plugin install vagrant-fsnotify

初期設定

  1. amezousan/zenn-vagrant を git clone する
  2. Cloneしたフォルダに移動
  3. 以下のコマンドを実行
$ vagrant up
$ vagrant ssh

これだけで簡単に仮想環境が立ち上がります。

SSHキー & Github設定

ZennにはGithub連携機能があり、ご自身のレポジトリに記事をアップロードするだけで簡単にZenn側にも反映されます。

SSH接続でGithubレポを管理している方には朗報で今回のVagrantはログインする度に「/home/vagrant/.ssh/id_rsa」を自動で読み込む機能を実装しています。

RSA以外の場合は適宜、付属の bashrc_local のid_rsa部分を別のやつに変更してください。

執筆に向けて

フォルダ構成

Vagrant上にはゲスト・ホストOS共に共有されるフォルダ「00-shared-folder」があり、その配下で基本的にZennと同期したレポジトリフォルダを配置します。以下は自分の例です。

zenn-vagrant$ tree -d -L 2
.
├── 00-shared-folder
│   └── zenn-blog
├── 10-custom-files
└── ansible
    ├── inventories
    └── roles

zenn-blog は僕のプライベートレポジトリでZennの記事が配置されています。現時点のzenn-cliは、あえて手動でインストールするように留めています。

その理由は、zenn-cliはなるべくzenn執筆用のレポジトリ配下でインストールされる方が分かりやすく、そのパスは各個人によって異なるから。

$ cd 00-shared-folder/<your-path-to-repo>
$ yarn add zenn-cli
$ npx zenn init

付属の bootstrap.sh に追記することで自動化も可能です。

執筆方法

自分は以下のALIASをbash_profileに追加しています。(パスは適宜変更)

alias vs-zenn="cd ~/<your-path-to>/zenn-vagrant/ && vagrant up && vagrant ssh"
alias vs-zenn-watch="cd ~/<your-path-to>/zenn-vagrant/ && vagrant up && vagrant fsnotify"

すると以下の手順で執筆に取り掛かれます。

[terminal1]
$ vs-zenn
$ cd 00-shared-folder/zenn-blog
~/zenn-vagrant/00-shared-folder/zenn-blog$ npx zenn
👀Preview on http://localhost:8000

[terminal2]
$ vs-zenn-watch
==> default: fsnotify: Changed: zenn-blog/articles/2021-03-13-vagrant-for-zenn.md
...

ターミナルを立ち上げて、エディタはAtomを使って編集しています。

デフォルト設定で「 http://localhost:8000/ 」で実際の画面を確認することも可能です。

最後に

いかがでしたでしょうか。Vagrantはクセが強く人によってはなかなか受け入れられないかもしれません。

ただ、Windows/Macと言った異なるOS間でも共通の環境を構築できるので複数人で作業をする場合に絶大な真価を発揮します。特にDevOps系で出てくるTerraformのバージョン管理がとても楽になります。

Vagrant上では1つ注意点があり、それは「npm」コマンドが正常に作動しない場合がある、と言う点です。この問題は「yarn」コマンドを代わりに使うことで回避可能です。

どうしてもnpmが良いと言う場合は、大人しくVagrantを使うのを諦めた方が良いです。(回避策があるにはあるのですが結構手間なので…。)

実際に自分が執筆で使ってみて思うのは、Vimで何なく執筆が出来る方はfsnotifyプラグインは不要で、直接ホストOS上で記事作成を進めていけば問題ありません。

では今回はこれにて。

Discussion