docsify で作ったドキュメントを Firebase Hosting でホスティングさせる + CIで回してみる

概要

docsify で作ったいい感じのドキュメントを Firebase Hosting でホスティングさせてみます。

手順

■ 必要なファイルを準備

以下のコマンドでまずは docsify の初期化を行います。

npx docsify-cli init ./docs

これでカレントディレクトリに docs フォルダ が作成されます。
今回はこの docs フォルダ 内のものを Firebase Hosting で公開させてみようと思います。

続けて Firebase の方の初期化も行ってしまいます。

firebase init

これで必要なファイルの準備は完了です。

■ 公開対象のフォルダを変更

firebase.json の public キーを docs に変更します。
これで Firebase Hosting で公開されるフォルダが、作成した docs フォルダに変更されます。

{
	hosting: {
		"public": "docs"
		...
	}
}

■ デプロイ

最後に以下のコマンドでデプロイを行います。

firebase deploy

デプロイが完了すると URL が表示されるので、
後は URL にアクセスして確認するだけです。めちゃくちゃ簡単 👏

Github Actions で CI 環境も作ってみる

せっかくなので Github Actions を使って CI を回してみます。

上記のファイル等を Github のリポジトリで管理していることを前提とします。

■ Firebase のトークンを取得する

CI 上で Firebase Hosting にデプロイするためにはトークンが必要なので、
以下のコマンドでトークンを取得します。

firebase login:ci

ログインに成功するとターミナルに以下のように表示されるはず。

xxx@xxxnoMacBook-Pro ~ % firebase login:ci 

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=...

Waiting for authentication...

✔  Success! Use this token to login on a CI server:

[TOKEN]

Example: firebase deploy --token "$FIREBASE_TOKEN

[TOKEN] の部分にトークンが表示されるので、それをまるっとコピーしておきます。

■ Github のリポジトリの Secrets にトークンを登録する

先ほど取得したトークンを Github Actions で使用できるように、
トークンをリポジトリの Secrets に登録します。

リポジトリの Settings から Secrets を選択して、New secret から新しく秘匿情報を追加します。

自分は FIREBASE_TOKEN という名前で取得したトークンを追加しました。

これで Github Actions から Firebase のトークンを取得できるようになりました。

■ ワークフローを作成する

最後に Github Actions のワークフローを作成します。

name: Node.js CI

on:
 push:
   branches: [ master ]

jobs:
 deploy:
   name: deploy to Firebase Hosting
   runs-on: macos-latest

   strategy:
     matrix:
       node-version: [14.x]

   steps:
   - name: Checkout Repo
     uses: actions/checkout@master
   - name: Use Node.js ${{ matrix.node-version }}
     uses: actions/setup-node@master
     with:
       node-version: ${{ matrix.node-version }}
   - run: npm i -g firebase-tools
   - name: Deploy to Firebase Hosting
     run: firebase deploy --token $FIREBASE_TOKEN
     env:
       FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

上記のワークフローは master ブランチにプッシュされたタイミングで、先ほど設定した Firebase のトークンを使用して Firebase Hosting にデプロイするものです。

最後に

手軽さでいうと docsify と Firebase Hosting の組み合わせは最強だと思っています。ぜひ試してみてください。