CircleCI2.1でnpm publishを自動化していくぜぇい！

Gakuです。
今回はCircleCI2.1を利用して、npm publishを自動化する方法を記載したいと思います。

# 構成
ルートディレクトリに/.circleci/config.ymlを作成して以下のように記載します。

```yml:/.circleci/config.yml
version: 2.1
executors:
    default:
        docker:
            - image: circleci/node:8.16
        working_directory: ~/repo
commands:
    npm_install:
        steps:
            - checkout
            - restore_cache:
                keys:
                    - v1-dependencies-{{ checksum "package.json" }}
                    - v1-dependencies-
            - run: yarn install
            - save_cache:
                paths:
                    - node_modules
                key: v1-dependencies-{{ checksum "package.json" }}
    tool_install:
        steps:
            - run: sudo npm i -g can-npm-publish
jobs:
    test:
        executor: default
        steps:
            - npm_install
            - run: yarn test
    publish:
        executor: default
        steps:
            - tool_install
            - npm_install
            - run: yarn build
            - run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
            - run:
                command: |
                    if can-npm-publish; then
                        npm publish
                    else
                        echo "publish skipped"
                    fi
workflows:
    version: 2
    publishflow:
        jobs:
            - test:
                context: npm
                filters:
                    branches:
                        only:
                            - master
            - publish:
                context: npm
                requires:
                    - test
                filters:
                    branches:
                        only:
                            - master
```
CircleCI2.1で追加された、executorsとcommandsを利用しています。
共通処理をまとめることができるので、2.0よりすっきりした感じで記述することができます。

# npm publishに必要なTokenの取得
CircleCI上でpublishするために、Tokenを取得します。
以下コマンドを実行し、Tokenを取得します。

```bash:Token取得コマンド
npm login
npm token create
npm password:
┌────────────────┬──────────────────────────────────────┐
│ token          │ aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee │←こいつをgetする
├────────────────┼──────────────────────────────────────┤
│ cidr_whitelist │                                      │
├────────────────┼──────────────────────────────────────┤
│ readonly       │ false                                │
├────────────────┼──────────────────────────────────────┤
│ created        │ 2019-06-07T01:40:28.461Z             │
└────────────────┴──────────────────────────────────────┘
```

# CircleCIにTokenを設定
Tokenはリポジトリに含めたくないので、CircleCIにログインして環境変数として設定します。
Settings→Contexts→Create Contextをクリックし、「npm」の名前でcontextを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47132/1bb346a5-1e84-e8dc-69a5-874c9138e59f.png)
作成されたnpmをクリックし、「Add Environment Variable」で先ほど取得したTokenを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47132/f15d30a0-5e49-49bd-29ea-de9383b17936.png)

これで準備は整いました！

# プロジェクト追加
「ADD PROJECTS」から対象のリポジトリを選択して、「Start Building」をクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47132/3cac6e3b-f437-5b48-e212-ae88d7881fbf.png)
うまくいけば、jobがきれいな緑色で祝ってくれるはずです(/・ω・)/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47132/7e1cb882-5ee1-2d83-b771-5f34edd36647.png)

# 終わりに
CircleCI2.1はなかなか良いですね。処理をまとめれるので、完結に記載することができます。
自動化処理書いている時が一番楽しいと思う今日この頃。。。

# 宣伝
firestore-migrationなるコマンドラインツールを作成しています。
よかったら使ってみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47132/1af147ba-2a34-955a-a348-91f086891254.png)
https://www.npmjs.com/package/firestore-migration

# 参考文献
https://yuta-yamamoto.hatenablog.com/entry/2019/01/16/171827
https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow