ハトネコエ Web がくしゅうちょう

プログラミングとかAndroid

【CircleCI 2.0】GitHub Pages へ指定ディレクトリ内だけを push するための config.yml

約2年前に上のような記事を書いたのですが、
いよいよ CircleCI ver.1 も今月をもって廃止ということで、
CircleCI 2.0 向けに書いたものを貼りつけておきます。

f:id:nekonenene:20180821041348p:plain

1. config.yml の設定

以前と同じように、結果から貼りつける形にしようと思います。
このような config.yml を、リポジトリトップディレクトリに作った .circleci ディレクトリの中に置きます。

なお、このリポジトリで使っているものです。

github.com

ソースは src ディレクトリに入っていて、 npm run build:prod で webpack を用いビルドすると、
dist ディレクトリの中に、babel や minify かましたものとか、pug をコンパイルした、HTML, JS ファイル群が入る仕組みになっています。

1-1. dist ディレクトリ以外を削除

- run:
    name: remove files and dirs which exclude `dist`
    command: /bin/ls -A | grep -v -E '^(dist$|.git)' | xargs rm -rf

まず、 dist ディレクトリ、および、 .git ディレクトリ(と、ついでに .gitignore ファイル)以外を削除しています。
そのために用いているのが、以下のコマンドです。

/bin/ls -A | grep -v -E '^(dist$|.git)' | xargs rm -rf

なぜ単純に ls でなく /bin/ls なのかと言えば、 ls 自体が ls -a --color=autoエイリアスだったりするからです。
今回、 -a オプションは有効にしたくなく、 -A オプションのみ用いたいために、 /bin/ls を利用しています。

-A オプションは、 -a オプションと似ていますが、 ... を出力しません。

ls の結果から grep で、 dist という名前、もしくは .git から始まるディレクトリ・ファイル以外を選択します。
-v オプションは「~以外」の意味合い -E オプションは正規表現を使う場合に指定します。

最後に xargs コマンドで rm -rf の引数としてディレクトリ・ファイル名を渡し削除がおこなわれています。

1-2. dist ディレクトリをトップディレクトリに

- run:
    name: move `dist` dir to current dir
    command: mv ./dist/* ./

mv コマンドで dist ディレクトリの中身を移動しています。

1-3. gh-pages ブランチにデプロイ

- run:
    name: deploy to gh-pages
    command: |
      git config --global user.name  "CircleCI"
      git config --global user.email "circleci@gh-pages.com"
      git add .
      git commit -m "Publish [ci skip]"
      git checkout -B gh-pages
      git push -u origin gh-pages --force

前回の記事で説明したことですので、説明は省きます。

今回は簡潔に build job ひとつにデプロイまでまとめていますが、
Circle CI 2.0Workflows 機能を用いて、 build, test, deploy を別ジョブとして定義すると、より CircleCI 2.0 らしい config.yml になるでしょう。

2. git push のための権限

前回の記事でも書いていますが、大事なことなのでこちらでも。

CircleCI から git push をおこなうためには設定が必要です。

ダッシュボードのページから、リポジトリ名の右についている歯車アイコンをクリックし……

f:id:nekonenene:20180821050636p:plain

PERMISSIONS の中の 「Checkout SSH keys」をクリックし……

f:id:nekonenene:20180821050751p:plain

Add user key 欄の「Authorize With GitHubボタンをクリックし……

f:id:nekonenene:20180821051038p:plain

オーサライズが終わるとボタンが変化するので、「Create and add <username> user key」ボタンをクリックし、 user key を作成します。

f:id:nekonenene:20180821051302p:plain

3. 以上です!

というわけで、以上で Circle CI 2.0 に対応させた、
dist ディレクトリのみを gh-pages ブランチにアップロードさせる方法でした。

JavaScript で動くWebアプリを作った場合なんかは、
「クローンして npm install してから npm start して自分で動かしてみてね!」よりは、
「このページにアクセスして試してみてね!」の方が気軽なので、このようなデプロイ方法を使ってみるといいと思います! では!!