かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

Github Actionsを使ってnpmへパッケージを自動リリースする

2022年4月5日

2022年4月9日

定期的にnpmに公開しているパッケージをリファクタしているのですが。
今回もリファクタしてついでのその周りの整理も行いました。

その際にGithub Actionsで自動的にリリースするような仕組みを実装しました。

実際にリポジトリは下記です。自動リリースの仕組みも下記に入っています。
https://github.com/kamem/scroll-parallax-effect

npmで公開しているパッケージ
https://www.npmjs.com/~kamem

Github Actionsについてそこまで詳しいわけではなかったので、いくつかのサイトを参考にさせていただいております。
そちらの記事を貼りつつ、いくつか動かず戸惑った部分がありましたので。

メモ的に残しておきたいなとも思いました。

自動リリースの実装

GitHub Actionsでnpmに自動でリリースするworkflowを作ってみた | DevelopersIO
こちらの実装をほぼ使わせていただいたおります!

release.yml

https://github.com/kamem/scroll-parallax-effect/blob/master/.github/workflows/release.yml
一部変更した部分がありましたので、その点について書いていきます。
個別の詳しい説明については上記サイトよりご確認いただければと思います!

ノードのバージョンを開発環境に合わせる

自分の開発環境に合わせましょう。あとは場合によってはcan-npm-publishがnodeバージョンと合っていない場合があるのでその点も注意しましょう。

node-version: '17.3.0'

yarnにする

自分の開発環境がyarnで行なっていたため、合わせてyarnで実行するように変更しました。
yarnの場合はyarn.lock、npmの場合はpackage-lock.jsonのファイルがないとエラーになるかもしれません。

      - name: install can-npm-publish and dependencies
	        run: |
	          yarn add can-npm-publish
	          yarn install
	      - name: check version and add tag
	        env:
	          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
	          REPO: ${{github.repository}}
	          COMMIT: ${{github.sha}}
	        run: sh ./release.sh
	      - name: test
	        run: yarn test
	      - name: build
	        run: yarn build
	      - name: release
	        run: yarn publish

./release.shの実行で下記のエラーがでる

./release.sh: Permission denied

最初参考にさせていただいたサイト通りに下記の実装を書いていたのですがエラが出てしましました。。

run: ./release.sh

下記の記事を参考にさせていただき、shを追加することにより解決できました。
github Actionsでシェルスクリプトを実行したい

run: sh ./release.sh

release.sh

上記をの参考サイトよりそのまま使わせていただいております。
https://github.com/kamem/scroll-parallax-effect/blob/master/release.sh

Githubの「Settings」「secrets」「Actions」から「NPM_TOKEN」を登録

npmの「tokens」から発行したtokenを、「Repository secrets」に「NPM_TOKEN」を登録します。

これを行わないと権限的に問題があるためエラーになるので忘れないようにしましょう!

まとめ

パッケージを更新をしたいときに、ここの手順を楽にしておくと、更新したい時にサクッとできるので最初の準備大事ですね。。
前のリポジトリも工夫していたのですが、逆に複雑になりすぎて更新のやり方を忘れたり億劫になったりして放置しちゃっていたので。

まだまだ今回後悔したプラグインもやりたいことがあるので、定期的にメンテしていきたいと思います。

このプラグインについても合わせて説明した記事も書いていきたいと思います。





おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

よくみられてる記事