TravisCIを使ってGitでタグ付けしたら自動でストアとGitHubReleaseにアップロードする
はじめに
ブラウザ拡張機能を公開するのにChrome Web StoreとGitHubReleaseを使っています。
本来は手動でファイルをアップロードして公開しないといけないけど、毎度自前でビルドしてアップロードしにいくのも面倒なのでTravisCI使って自動化したいという話です。
前提としてvue-web-extensionで作ったものを公開するものという形でいきます。
使うもの
使い方
chrome-webstore-upload-cliを入れる
$ npm i -D chrome-webstore-upload-cli
package.jsonのscriptsに下記を追加する。
"release": "cd dist && webstore upload --auto-publish"
TravisCI上でGitHubリポジトリを追加する。
ここは普通にやるだけ。
TravisCIに必要な環境変数を追加する
TravisCIのリポジトリセッティングのEnvironment Variablesに下記のような組み合わせで追加する。
CLIENT_ID: clientId CLIENT_SECRET: clientSecret REFRESH_TOKEN: refreshToken EXTENSION_ID: 拡張機能のID
Travis CI command line client を入れる
gemとやらを使うので事前にRubyを入れておく必要がある。
$ gem install travis
これでOK
Gitプロジェクト上でtravis.ymlをセットアップする
事前にプロジェクトディレクトリに.travis.ymlという空ファイルを作っておく。
$ travis setup releases Username: username Password for username: passwd File to Upload: Deploy only from username/project? |yes| Encrypt API key? |yes|
最初のUsernameとPasswordはGitHubのを入力する。
その後色々と出てくるけどとりあえず全部エンターする。設定は後でファイル弄って変えれば良い。
そうすると以下のようなファイルが生まれる。
deploy:
provider: releases
api_key:
secure: なんか長いやつ
file: ''
on:
repo: username/project
これを下記のように変えた。
language: node_js
node_js:
- '8'
install:
- npm install
script:
- npm run build:dev
- npm run build
- npm run build-zip
deploy:
- provider: releases
skip_cleanup: true
api_key:
secure: 長いやつ
file_glob: true
file: dist-zip/*.zip
on:
repo: username/project
tags: true
- provider: script
skip_cleanup: true
script: npm run release
on:
branch: master
tags: true
上のscriptの部分は普通にビルドしてるだけ。
skip_cleanup: trueでscriptでビルドしたファイルをそのまま残すことができる。（書かないとdeployのとこに入る前に消されちゃうっぽい）
file_glob: trueでワイルドカードを有効にし、file: dist-zip/*.zipでパッケージ化したzipファイルをGitHubReleaseにアップロードしている。
on: tags: trueでタグ付きの場合のみアップロードする設定になっている。
下のscript: npm run releaseはpackage.json内のreleaseScriptを呼び出しているだけ。
あとはローカルでタグをつけてPushする、もしくはGitHubRelease上で適当にnew releaseすればTravisCIが勝手にアップロードしてくれる。
で、設定してみたのが下記のリポジトリ。きっと楽になるはず(ちゃんと動作してくれれば…)
終わりに
以上、メモを兼ねた記事でした。
Firefoxの方でもやりたいので調べ中。。
