物置小屋

メモ置き場

TravisCIを使ってGitでタグ付けしたら自動でストアとGitHubReleaseにアップロードする

はじめに

ブラウザ拡張機能を公開するのにChrome Web StoreとGitHubReleaseを使っています。
本来は手動でファイルをアップロードして公開しないといけないけど、毎度自前でビルドしてアップロードしにいくのも面倒なのでTravisCI使って自動化したいという話です。

前提としてvue-web-extensionで作ったものを公開するものという形でいきます。

使うもの

使い方

chrome-webstore-upload-cliを入れる

$ npm i -D chrome-webstore-upload-cli

package.jsonscriptsに下記を追加する。

"release": "cd dist && webstore upload --auto-publish"

TravisCI上でGitHubリポジトリを追加する。

ここは普通にやるだけ。

TravisCIに必要な環境変数を追加する

ここを参考にGoogle API Keyを取得する。

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|

最初のUsernamePasswordGitHubのを入力する。
その後色々と出てくるけどとりあえず全部エンターする。設定は後でファイル弄って変えれば良い。

そうすると以下のようなファイルが生まれる。

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: truescriptでビルドしたファイルをそのまま残すことができる。(書かないとdeployのとこに入る前に消されちゃうっぽい)
file_glob: trueワイルドカードを有効にし、file: dist-zip/*.zipでパッケージ化したzipファイルをGitHubReleaseにアップロードしている。
on: tags: trueでタグ付きの場合のみアップロードする設定になっている。

下のscript: npm run releasepackage.json内のreleaseScriptを呼び出しているだけ。

あとはローカルでタグをつけてPushする、もしくはGitHubRelease上で適当にnew releaseすればTravisCIが勝手にアップロードしてくれる。


で、設定してみたのが下記のリポジトリ。きっと楽になるはず(ちゃんと動作してくれれば…)

github.com

終わりに

以上、メモを兼ねた記事でした。
Firefoxの方でもやりたいので調べ中。。