2023-10-01

yarn v4 独自の GitHub package が 404 になってしまう問題にハマる

yarn npm GitHub

参加したプロジェクトが yarn の lock ファイルだったので久々に yarn install をしようとしたら GitHub package になっている独自ライブラリのインストールがエラーになってしまう問題にハマってしまったのメモ

状況

node.js npm のバージョン管理は Voltaを使用
Volta で node.js v18 系をインストールした際に付いてきた yarn (4.0.0-rc.50) をそのまま使用してる

プロジェクトに独自に作成された GitHub packages を使用
GitHub PAT (personal access tokens) を .npmrc に記述

.npmrc

@my-package:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${MY GITHUB PERSONAL ACCESS TOKEN}
always-auth=true

`yarn install` で独自パッケージが Package not found 404 になってしまう

$ yarn install
YN0000: · Yarn 4.0.0-rc.50
➤ YN0000: ┌ Resolution step
➤ YN0035: │ @my-package/some-package@npm:1.0.0: Package not found
➤ YN0035: │   Response Code: 404 (Not Found)
➤ YN0035: │   Request Method: GET
➤ YN0035: │   Request URL: https://registry.yarnpkg.com/@my_package%2fsome-package
➤ YN0000: └ Completed in 0s 854ms
➤ YN0000: · Failed with errors in 0s 857ms

@my_package は https://npm.pkg.github.com を見に行ってほしいが https://registry.yarnpkg.com から探そうとしているように見える

元のプロジェクトが yarn v1 系で v2 以降は設定の書き方が変更になっていたことが原因

yarn v2 以降では `.npmrc` や `.yarnrc` ではなく `.yarnrc.yml` を使用する

Migrating from 1.x / npm

Breaking changes

Modern uses a different style of configuration files than Classic. While mostly invisible for the lockfile (because we convert them on the fly), it might cause issues if you rely on .npmrc or .yarnrc files.

Yarn Modern now uses .yarnrc.yml. Any other file is now ignored - this includes .npmrc.

As evidenced by the new file extension, the Yarnrc files are now to be written in YAML.

Migration steps

Convert your .npmrc and .yarnrc files into .yarnrc.yml

cf. Step-by-step | Yarn

yarn v2 以降では .yarnrc.yml が使用され .npmrc があったとしても無視される。ﾄﾉｺﾄ
使っていたのが yarn v4 だったので .npmrc に GitHub packages や PAT の設定をしても無視されていたというのが原因だった

`.yarnrc.yml` に GitHub packages と PAT (personal access tokens) の設定する

.yarnrc.yml

nodeLinker: node-modules

npmScopes:
  'my-package':
    npmAlwaysAuth: true
    npmRegistryServer: 'https://npm.pkg.github.com/'
    npmPublishRegistry: 'https://npm.pkg.github.com/'
    npmAuthToken: ${MY GITHUB PERSONAL ACCESS TOKEN}

ポイントとしては @my-package/some-package を使っている場合 npmScopes は @my-package ではなく @ 無しで my-package と記述すること
@ ありで @my-package とすると Package not found になってしまう

所感

npm で十分だと感じていたので久々に yarn を使ったら v2 以降で結構変わっていたみたいで、検索しても .yarnrc に設定を書く v1 系の方法ばかりがヒットしてハマってしまった。

個人的に yarn v1 系なら .npmrc で設定ができるが最新の npm の方がパフォーマンスが良いと思っているのでチーム開発ならバージョン差異が出やすい yarn より npm の方が良いんじゃないかなという気がしました。
チーム全員が Volta を使っているなら yarn, npm のバージョンも固定できるので新しく join した人が環境構築で躓くことも少なくなりそうだから良いんじゃないかなと思います。(ただ会社支給の PC なら良いけど、ツールの指定は結構宗教問題にもなりがちなので難しそうだし結局 npm にしておくほうが安牌なんじゃないかな〜)

I just had this problem for a couple of days and the solution is simple, DO NOT USE YARN when publishing.
cf. google cloud platform - How to fix 404 error when installing npm package from GCP artifact registry with yarn? - Stack Overflow

yarn 使わないのが解決策と書いてる Stackoverflow には笑ちゃった

我、環境設定のトラブル踏み抜きがち…
おわり

[参考]

フロントエンド開発入門プロフェッショナルな開発ツールと設計・実装

作者:安達稜,武田諭
秀和システム

Amazon

AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発

作者:掌田津耶乃
ラトルズ

Amazon

にやーん！　1巻

作者:かわちゆかり
ビーグリー

Amazon

※ 有料部分最近読んでよかった本を書いているだけで特に何もありません。気になる方・投げ銭頂ける方はどうぞ！

この続きを読むには

購入して全文を読む

2023-09-29

Firebase Authentication GoogleAuthProvider ログアウトしても別の Google アカウントを選択できないにハマる

Firebase React TypeScript

Firebase Authentication の GoogleAuthProvider を使って Google アカウントでのログインを実装しました
ログアウトした後に再度ログインしようとしても、前にログインしたカウントで自動的にログインしてしまい別のアカウントでログインすることが出来ない問題に当たってしまいました。

環境

Firebase 10.1.0
React 18.2.0
TypeScript 5.1.6

実装

import { getAuth , signInWithPopup , signOut, GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();

const MyApp = () => {
  const handleSignin = () => {
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => { /* Success Signin */ })
      .catch((error) => { /* Error */ });
  };
  const handleSignout = () => {
    const auth = getAuth();
    signOut(auth);
  };
  return (
    <div>
      <button onClick={handleSignin}>Sign in with Google</button>
      <button onClick={handleSignout}>Sign out</button>
    </div>
  );
};

現象

GoogleAuthProvider を使ったログインボタンを押すと Google アカウントを選択するポップアップが開く
Google アカウントを選択する Google アカウントでアプリにログインができる
firebase の signOut を使ってログアウトする
再度ログインボタンを押す
Googleアカウント選択のポップアップが開くが自動的に前回ログインしたアカウントでのログイン処理が実行されログインされる

アカウントを間違えても別の Google アカウントでログインし直しが出来ない状況になってしまいました…

`prompt: 'select_account'` オプションを追加すれば OK

prompt
select_account
認証サーバーがユーザーアカウントの選択を促します。これにより、認可サーバーに複数のアカウントがあるユーザーは、現在のセッションを利用できる複数のアカウントの中から選択できます。
cf. OpenID Connect | Authentication | Google for Developers

import { getAuth , signInWithPopup , signOut, GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
// ▼ 下記を追加
provider.setCustomParameters({
  prompt: 'select_account',
});

このオプションを指定しているとログイン時に強制的にアカウントを選択する事を求められるようになる

これでログアウトして再度ログインする際に Google アカウントを選択できるようになりました！
おわり ₍ ᐢ. ̫ .ᐢ ₎

[参考]

Firebase Authenticationで学ぶソーシャルログイン入門 ID管理の原則にそった実装のベストプラクティス

作者:Auth屋
翔泳社

Amazon

ログインØ (スターツ出版文庫)

作者:いぬじゅん
スターツ出版

Amazon

2023-09-13

GitHub ビルド成功のバッジを README に表示させたい

GitHub Tips

Builded complete badge

README にこんな感じでバッジを貼りたい！

Goal

README に build 成功のバッジを表示する
GitHub だけで完結

GitHub Actions の workflow が成功したかどうかのステータスをバッジ表示できる

https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/<WORKFLOW_FILE>/badge.svg

上記のフォーマットで任意の workflow の status をバッジとして表示できる

1. main ブランチが更新された際に build を実行してそのステータスを表示させる

いつもの React のプロジェクトなので、main ブランチが更新・PRがマージされた際に実行される workflow を作成する

.github/workflows/build.yml

# name が badge に表示されるラベルになる
name: Build
on:
  push:
    branches: ['main']
    paths:
      - '.github/workflows/build.yml'
      - 'src/**'
      - 'package.json'
      - 'tsconfig.json'

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: ['lts/*']
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - name: setup
        run: npm ci
      # Test と build を実行
      - run: npm run test
      - run: npm run build

トリガーは pull_request: types: 'closed' でも良いが、個人プロジェクトなので直接 main ブランチに push することもあるだろうし PR marge 時は main ブランチに push されるので push をトリガーとした

⚠ `$default-branch` が効かない

$default-branch にしておくと main / master どちらでものブランチでも OK になるように GitHub の記事に書かれていたのですが、実際には動作しないようです…

The documentation on custom workflow templates linked in that changelog post says this:

If you need to refer to a repository’s default branch, you can use the $default-branch placeholder. When a workflow is created using your template, the placeholder will be automatically replaced with the name of the repository’s default branch.

So $default-branch doesn’t seem to be supported in the actual workflow file.
cf. $default-branch not working · community · Discussion #26597 · GitHub

つまり、GitHub上のテンプレートを使用して作成した場合は $default-branch がデフォルトブランチ名に置き換えられるけど、local で $default-branch としたファイルを作成しても置き換えられないので効かないということっぽい。
local で workflow のファイルを作成するときは自分のデフォルトブランチ名 (main / master) を直接指定する必要がある

2. README.md にバッジを表示するコードを追加する

![build status]
(https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/<WORKFLOW_FILE>/badge.svg)

作成した workflow のファイル名が build.yml なので https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/build.yml/badge.svg でバッジが表示できる
今回は main ブランチのみで実行するので ?branch=main パラメーターを付けて https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/build.yml/badge.svg?branch=main とした

これで main ブランチが更新されたらBuild workflow が実行されバッジに Build: passing / Build: failure などのステータスが表示されるようになった
GitHub だけで完結でききるし簡単だしとても良かった！

おわり ₍ ᐢ. ̫ .ᐢ ₎

[参考]