【Unity】GCP上に社内用のUnityパッケージ配布システムを構築する方法【Verdaccio】

# はじめに
Unity では独自に開発したライブラリをパッケージとして配布する方法としては２つあります
1. UnityPackageManager (UPM) 経由での配布
1. UnityCustomPackage としての配布

昔は２番目しか実質的な選択肢がなかったのですが、近年ではUPMが非常に使いやすくなっているため、個人開発でもGithub上にパッケージを公開してUPM経由で導入なんていうことも多いのではないかと思います。


しかし、このUPMですが、パッケージが他のパッケージに依存している時に、依存先のパッケージもまとめて導入する機能は、一般的な使い方をしている場合は出来ません。
ただ、全く依存性のない独立のパッケージは、それこそOSSのライブラリ程度なもので、現場の開発ではあるシステムを使いやすくするラッパーとかの開発も多いと思います。

特に、会社等のチームで開発する場合、チーム内ライブラリとしてラッパーを配布する場合も出てきます。

そこで依存性のあるパッケージ管理としてUnity公式の方法として `スコープ付きレジストリ` という方法があります。

https://docs.unity3d.com/ja/2021.3/Manual/upm-scoped.html 

# スコープ付きレジストリについて

スコープ付きレジストリを簡単に説明すると `独自で管理するパッケージ群をまとめて公開・管理するシステム` です。

一番わかりやすいのはUPMのところで `Unity Registry` を選択すると、Unity公式のパッケージがずらっと出てきますね。

あれを個人単位でもできるようにするというのがスコープ付きレジストリです。

詳細は [マニュアル](https://docs.unity3d.com/ja/2021.3/Manual/upm-scoped.html ) および、[UnityTechnologiesJapan さんのYoutube チャンネルにあがっている動画](https://www.youtube.com/watch?v=gX8IDNb5glc&t=0s)をご覧ください.

特に動画はkeijiro神が解説していますが、なぜか限定公開でしか公開されていないため、知らない方も多いかと思います。

<iframe width="560" height="315" src="https://www.youtube.com/embed/gX8IDNb5glc?si=NafHXaFX_js-KcUE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

# スコープ付きレジストリの構築方法

公開されているものの設定方法などは先ほどの動画等を参照していただくとして、ここからが本題です。

じゃあ公開用の設定はどうするのか？です。

Unity 公式によると [`verdaccio`](https://github.com/verdaccio/verdaccio) を使えばprivateパッケージレジストリとして配信できるとのことです。

## What is verdaccio
https://github.com/verdaccio/verdaccio


![スクリーンショット 2024-02-29 16.50.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/b82a4993-fbb6-fd20-832e-efa8bd0f5fde.png)

UnityのUPMですがnpmをベースとして構築されているので、このverdaccioを使うことで社内用Unityパッケージを独自に配信することができるということみたいです。


## 導入参考記事

| 用途 | 参考リンク |
| --- | --- |
| AWS上に構築する場合 | https://developers.play.jp/entry/2023/04/21/105842 |
| GCP上に構築する場合 | https://qiita.com/mmorito/items/c61ef4c0ebd4744c2c06 |
| ローカルにUPM用のverdaccioサーバー構築してみた件 | https://shibuya24.info/entry/upm_use_verdaccio |
| 10ANTZ さんの構築事例 | https://developers.10antz.co.jp/archives/361#%E7%AB%8B%E3%81%A6%E3%82%8B |
| 元祖、UnityのPrivateRegistryを導入してみた　もんりぃ先生の記事 | https://monry.hatenablog.com/entry/2020/03/07/015041 |

今回でいえばGCP上に構築なので以下の記事が参考になりますが、一部情報のアップデートやUPM対応に向けての情報がまとまっていなかったので、本記事でそのあたりを補足しつつ解説していきます。

https://qiita.com/mmorito/items/c61ef4c0ebd4744c2c06

## 導入フロー
1. GCE のインスタンスを立てる
1. sshでインスタンスに潜る
1. 環境構築
    1. apt の更新
    1. dockerの導入
1. Dockerの設定ファイルを用意する
1. verdaccio コンテナを立ち上げる
1. verdaccio コンテナに入る
1. npm login する
1. npm publish で対象のパッケージを verdaccio 側に登録する

### 1. GCE のインスタンスを立てる
ここに関しては下記記事を参考にしてください。
マシンのタイプとしては `e2-micro` 程度で十分なのでそこまで大きなスペックのインスタンスは必要ないです。

https://qiita.com/mmorito/items/c61ef4c0ebd4744c2c06

イメージは `Ubuntu 20.04 LTS` を使用しています

### 2. sshでインスタンスに潜る

GCE のVMインスタンスのページの `接続` タブのところにある `SSH` を選択すると新しいウィンドウが立ち上がってsshした後のターミナル画面が立ち上がります
![001_ssh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/6f96827f-6bba-41a8-a140-3521ea2ab178.png)

### 3. 環境構築
    1. apt の更新
    1. dockerの導入

apt を更新しないとnpmが古い〜　とか色々文句を言われたので大事です.
docker は 

    $ curl https://get.docker.com | sudo sh
で導入ができるはずです



### 4. Dockerの設定ファイルを用意する
docker を動かすためには `DockerFile` が必要で、Docker-Composeを使うなら `docker-compose.yaml` も必要です。

:::note warn
昔は `docker-compose.yml` でも良かったのですが最近のDockerだと .yaml と書かないと認識しない場合があるのでごちゅういください
:::

今回はそれぞれ以下のように設定しました

↓DockerFile
```Dockerfile
FROM verdaccio/verdaccio:latest

# Git 導入
USER root
RUN apt-get update \
    && apt-get install -y --no-install-recommends \
        git \
        bash \
    && rm -rf /var/lib/apt/lists/*

RUN git --version
```

```docker-compose.yaml
version: '3.8'

services:
  verdaccio:
    image: verdaccio/verdaccio:latest
    container_name: verdaccio
    restart: always
    ports:
      - "4873:4873"
    volumes:
      - ./config:/verdaccio/config
      - ./config/config.yaml:/verdaccio/conf/config.yaml
      - ./storage:/verdaccio/storage
      - ./plugins:/verdaccio/plugins
```


### 5. verdaccio コンテナを立ち上げる
DockerImageをビルドする場合(初回とか設定ファイルに変更があった場合)

    $ docker-compose up -d --build

DockerImage をビルド済みの場合

    $ docker-compose up -d 

### 6. verdaccio コンテナに入る

コンテナが立ち上がってるのを確認できたら以下のコマンドでコンテナないに入ります

    $ sudo docker exec -it verdaccio sh

### 7. npm login する
`$ npm  login --registry [verdaccio を立ててるインスタンスのIP]:4873`

:::note warn
port 4873 はVerdaccio のデフォルトのポート番号なので、変更している場合は書き換えてください
:::

### 8. npm publish で対象のパッケージを verdaccio 側に登録する

    1. $ cd [package.jsonが置いてあるディレクトリ]
    2. $ npm  publish --registry [verdaccio を立ててるインスタンスのIP]:4873

:::note warn
port 4873 はVerdaccio のデフォルトのポート番号なので、変更している場合は書き換えてください
:::

# 導入後
Graffity では現在11個ほど社内パッケージをVerdaccio 経由で配布しています。

ブラウザで見ると以下のような感じです。
![verdaccio_web_modified.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/9f6d30e5-668c-45b1-b451-b1a32d75e874.png)

## Unity 側の設定
Unity のProjectSettings の項目に `Package Manager` の項目があります
![unity_upm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/4c15b17a-b011-4b84-8d1f-608fa051ecce.png)

ここで+ボタンを押して新規にScopedRegistry を登録します

| 項目 | 説明|
|:- |:- |
| Name | UPMの部分で表示する名称 |
| URL | URL. 先ほど立てたGCE のInstance の外部IP:port を設定しましょう |
| Scope(s) | 表示するパッケージname のフィルタ.<br> 高橋keijiro さんだと jp.keijiro と入力することで jp.keijiro.* のパッケージリストが表示されます |

ここの登録が問題なくいくと、UnityPackageManager のWindow に表示されます。

ちなみにUnity6 からはMyRegistries の項目に追加されます。
![ump_tab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65257/9a5c126b-a3df-420b-a43e-8bd77d1b5101.png)


# まとめ

- 個人開発だとそこまで大きな効果は期待できないですが、会社・サークル等の団体で開発するときは社内ライブラリを充実させる恩恵は大きいです
- また自作パッケージ間で依存関係がある場合、Git のURL経由だと依存問題を解決しませんがScopedRegistry に登録することで依存関係がある場合依存パッケージもまとめてInstall できます
- 社内パッケージをUPM経由でポチポチして導入できると車輪の再発明を減らせたり、シンプルに開発工数を下げられるので非常におすすめです