Zenn
🔖

Github Pacakgesをつかってみる

2023/10/06に公開
GitHub Packages
tech

概要

Github Packagesを使用してみる
(npmライブラリを作成できる)

マイクロサービスでの処理の共通化などで使用すると良いかも

今回は、schemaの共通化をテーマとして、ライブラリを作成してみる
(前提として、フロントもバックエンドもtypescriptを使用しているとする)

運用

  1. schema管理用のRepositoryを作成
  2. schemaを定義する
  3. ライブラリとして各Repositoryでインストール(アップデート)する
  4. schemaに変更があれば、schema管理用のRepositoryを更新
  5. 以下、3,4 の繰り返し

実践

今回はts-restというライブラリを使用する

参考（公式リファレンス）

package.json

{
 "name": "<account name>/test1",
 "description": "test1のAPIスキーマです",
 "version": "0.1.0",
 "author": "",
 "files": [
   "dist"
 ],
 "main": "dist/src/index.js",
 "types": "dist/src/index.d.ts",
 "publishConfig": {
   "access": "restricted",
   "registry": "https://npm.pkg.github.com/"
 },
 "repository": {
   "type": "git",
   "url": "git://github.com/<account name>/schema.git"
 },
 "license": "UNLICENSED",
 "scripts": {
   "build": "tsc"
 },
 "dependencies": {
   "@ts-rest/core": "^3.28.0",
   "zod": "^3.22.2"
 },
 "devDependencies": {
   "typescript": "^5.2.2"
 }
}

.github/workflows/release.yml

name: Publish package to GitHub Packages

on:
 pull_request:
   branches:
     - 'release/**'

jobs:
 publish-package:
   runs-on: ubuntu-latest
   permissions:
     packages: write
     contents: read
   steps:
     - name: Check out
       uses: actions/checkout@v3

     - name: Set up
       uses: actions/setup-node@v3
       with:
         node-version: 18
         registry-url: https://npm.pkg.github.com/

     - id: publishable
       name: Check Publishable
       run: |
         cd schema/test1 &&
         npx can-npm-publish --verbose &&
         echo status=0 >> $GITHUB_OUTPUT || echo status=1 >> $GITHUB_OUTPUT

       env:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

     - name: Publish
       if: ${{ steps.publishable.outputs.status == 0 }}
       run: |
         cd schema/test1 &&
         npm i &&
         npm run build &&
         npm publish
       env:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

これでpackageを公開できる

使用したいRepository内に下記ファイル生成
(tokenは都度発行する)

.npmrc

<account name>:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=<token>

npm install <package名>
でインストールできる

課題

もし、Schemaを一つのRepositoryで複数管理したくなった場合、github actionsのコードが冗長化してしまう
→ Nx等のライブラリを使用してみる？

その他関連ツール

trpc

BFF（Backends For Frontends）な設計であれば良さそう？
（e.g.　フロント側のRepositoryが複数ある等）
https://trpc.io/

MSW

フロントでapi モック
https://mswjs.io/

Discussion