いまさらですがGitHub ActionsをつかってGitHub Packageにパッケージを公開するところまでやってみようと思います。
ということで、こちらのQuickstartに従って進めてみます。
写経なのでメモです。
目次
レポジトリの準備
レポジトリを作成します。github-cli入れてるのでghコマンドで。
$ gh repo create gha-sample
いろいろ聞かれますが適当に。
? Visibility Public ? This will create 'gha-sample' in your current directory. Continue? Yes ✓ Created repository kun432/gha-sample on GitHub ? Create a local project directory for kun432/gha-sample? Yes Initialized empty Git repository in /Users/kun432/repository/gha-sample/.git/ ✓ Initialized repository in './gha-sample/'
ローカルレポジトリができているので移動します。
$ cd gha-sample
index.jsを以下の内容で作成します。
alert("Hello, World");
npm initします。
$ npm init
色々聞かれますが、package nameを@ユーザ名/レポジトリ名にして、テストがない場合はtest: exit 0にすればよいようです。最終的にとりあえずこんな感じ。
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (gha-sample) @kun432/gha-sample version: (1.0.0) description: entry point: (index.js) test command: exit 0 git repository: (https://github.com/kun432/gha-sample.git) keywords: author: license: (ISC) About to write to /Users/kun432/repository/gha-sample/package.json: { "name": "@kun432/gha-sample", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "exit 0" }, "repository": { "type": "git", "url": "git+https://github.com/kun432/gha-sample.git" }, "author": "", "license": "ISC", "bugs": { "url": "https://github.com/kun432/gha-sample/issues" }, "homepage": "https://github.com/kun432/gha-sample#readme" } Is this OK? (yes)
npm installします。
$ npm install
pushします。
$ git add index.js package.json package-lock.json $ git commit -m "initialize npm package" $ git push --set-upstream origin master
レポジトリとパッケージングするファイルができました。
GitHub Actionsのパッケージ作成の流れ
GitHub Actionsの設定ファイルは.github/workflows以下に置きます。Quickstartに従ってrelease-package.ymlをGitHub上で作成します。
Add file -> Create a new fileをクリック。
.github/workflows/release-package.ymlを作成します。スラッシュを入力すると自動的にディレクトリとして認識してくれて入力欄が追加されます。
Quickstartの通りにコピペします。
下にスクロールして、Create a new branch for this commit and start a pull requestの方を選択、それ以外はデフォルトのままにしました。Propose new fileをクリックします。
branchが作成され、pull requestの作成画面が表示されます。Create pull requestをクリックしてPRを作成します。
PRをマージします。
マージされました。
Codeタブをクリックします。
.github/workflows/release-package.yamlのonでactionの実行タイミングを指定するようですが、今回の設定では新しいreleaseが作成されたタイミングになっています。ということで、releaseを作成しましょう。右側にあるReleasesのCreate new releaseをクリックします。
releaseの作成画面が表示されます。
バージョンとブランチを指定します。バージョンはv0.1にしてみました（後の方でわかりますが、ここはpackage.jsonと同じバージョンを指定すべきですね。）ブランチはmasterでよいですね。
Publish releaseをクリックします。
リリースが作成されました。
ではパッケージが作成されているか見てみましょう。Codeタブをクリックします。
右側のPackagesにパッケージが作成されていますね！releaseとpackageのバージョンが違うのは、npm init時にバージョンを指定しなかったのでデフォルトで1.0.0が指定されているからですね。忘れてました。今回は気にしないことにします。Packagesをクリックします。
パッケージが公開されて、インストール手順も載っていますね！
余談）GitHub Packagesのnpmパッケージについて
実際にインストールできるか確かめてみましょう。ローカルで適当なディレクトリを作成し、そこにインストールしてみます。
$ mkdir gha-sample-test $ cd gha-sample-test $ npm install @kun432/gha-sample@1.0.0
コケましたｗ
$ npm install @kun432/gha-sample@1.0.0 npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@kun432%2fgha-sample - Not found npm ERR! 404 npm ERR! 404 '@kun432/gha-sample@1.0.0' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. npm ERR! A complete log of this run can be found in: npm ERR! /Users/kun432/.npm/_logs/2021-01-21T13_10_10_227Z-debug.log
というか、npmjs.orgを見てますね・・・
以下によると、npmからGitHub Packagesを使うには設定かつ認証がないとアクセスできないのですね。
とりあえずPersonal Access Tokenが必要になりますので、GitHub上で作成します。ここは以下を参考にしてください。
権限は
- repo
- read:packages
でよいみたいです。
~/.npmrcに以下の行を追記します。作成したトークンはここで使います。
//npm.pkg.github.com/:_authToken=トークン
さらにインストール用のディレクトリにも.npmrcを作成し、以下を記載します。アカウント名はGitHubのアカウント名です。
registry=https://npm.pkg.github.com/アカウント名
では気を取り直してnpm installしてみましょう。
$ npm install @kun432/gha-sample@1.0.0 npm WARN saveError ENOENT: no such file or directory, open '/Users/kun432/repository/gha-sample-test/package.json' npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN enoent ENOENT: no such file or directory, open '/Users/kun432/repository/gha-sample-test/package.json' npm WARN gha-sample-test No description npm WARN gha-sample-test No repository field. npm WARN gha-sample-test No README data npm WARN gha-sample-test No license field. + @kun432/gha-sample@1.0.0 added 1 package in 0.792s
インストールできました。エラーが出ていますが、npm initしてないからなので気にせず。ディレクトリの中を見てみましょう。
$ tree . . ├── node_modules │ └── @kun432 │ └── gha-sample │ ├── index.js │ └── package.json └── package-lock.json 3 directories, 3 files $ cat node_modules/\@kun432/gha-sample/index.js alert("Hello, World");
ちゃんとパッケージがインストールされていますね！
まとめ
ということでQuickstartを通して、GitHub Actionsによるパッケージの自動公開をやってみました。
次回はGitHub Actionsの設定ファイルについて見てみます。
