VercelにYarn v2とプライベートレジストリのパッケージを使ったプロジェクトをデプロイする
npmのプライベートレジストリのパッケージを使っているプロジェクトでYarnをv2にアップグレードしたところ、Vercelにデプロイするのに問題が発生しました。
その問題の背景と解決策を簡単に紹介します。
背景
最近、自分が開発しているKakeruというアプリにYarn v2を導入しました。
実は、以前にも一度v2の導入を試みたことがあったのですが、PnP周りが面倒くさくて戻してしまいました。
ところが最近、こちらの記事で、PnPはオプショナルな機能であることを知りました。
また、v1もv2もグローバルにインストールする実行ファイルは同じで、プロジェクトの設定に応じて違うバージョンが実行されることも初めて知りました。
その辺を理解したことで、これならv2導入するのもありだなと思い、再度やってみることにしました。
yarn v2にまつわる誤解 | Wantedly Engineer Blog
というわけでYarnのバージョンをアップグレードしたのですが、PnPを無効にするなら、.yarn.lockのフォーマットが変わるくらいしか変化がありません。
ところが、Vercelにデプロイするときに問題が起きました。
このアプリではFontawesome Proを使っており、プライベートnpmレジストリのパッケージを利用しています。
ローカルでは、グローバルな.npmrcにトークンとレジストリのURLを書いていました。(v2からは、.yarnrc.ymlです。)
Vercelにデプロイするにあたっては、NPM_RCという環境変数を設定していました。(詳細はこちら)
しかし、Yarn v2でこの環境変数が認識されなくなったようなのです。
以前は使えていた.npmrcも使えなくなったので、v2ではnpmとの互換性を積極的に捨てに行っている気がします。
ちなみに、この問題を報告するイシューなどは見つけられていないです。
というわけで、この問題への解決策を軽く書き残しておこうと思います。
解決方法
1. 設定を書き込むシェルスクリプトを追加する
名前はoverwrite-yarn-config.shとでもしておきましょう。(あと、実行権限もつけておきます。)
スクリプト中の、fortawesomeの部分がパッケージのスコープ名です。
#!/bin/bash
yarn config set npmScopes.fortawesome.npmRegistryServer 'https://npm.fontawesome.example.com'
yarn config set npmScopes.fortawesome.npmAuthToken "$FONTAWESOME_NPM_AUTH_TOKEN"
2. Vercelの環境変数を設定する
ここでは、FONTAWESOME_NPM_AUTH_TOKENという名前にしています。
そこにトークンの文字列を設定します。
3. Vercelのデプロイ設定を変更する
"install command"の項目を./overwrite-yarn-config.sh && yarn installに設定します。
後はデプロイするだけです。
(分かりやすさのためにこのような手順にしましたが、実際は1.を最後にやっても良いと思います。)
v1の時よりも少し複雑になってしまいましたが、このようにして無事にデプロイすることができました。
どなたかの参考になれば嬉しいです。
Discussion