Gitlab CI カタログをみんなで作ろう！
始まり
GitLab CI を使っているみんな、GitHub Actions が羨ましくないですか？
特にGitHub MarketPlace
Marketplace良いところ
- 公開されているので、自分で作らず、そのまま使える(Collaborative = Good!)
- MarketPlace になっているので、探しやすい(Discoverable = Good!)
- 汎用的に作られているので、使いやすい(Integrated = Good!)
- コミュニティが勝手にメンテしてくれる(Mainance = Good!)
Package のページのように管理されているのすごい良いですよね
こんな感じになっている
じゃぁGitHub Actionsでいいじゃん
GitLabはCI以外の魅力も多いので、GitHub よりGitLab推しです。
そんなMarketPlace的なものが GitLab にもやっと来ました
こんな感じ
ちょっと待って！え。。。しょぼくない？ 15件って嘘でしょう！？しかもカテゴリすらない
急いで作る
レシピ
- Nuxt3 のプロジェクトを作る
- GitLab CI でnuxt generate する カタログを作る
- リリースする
- Nuxt3 のプロジェクトの.gitlab-ci.ymlに追加する
- CI Done!
1. Nuxt3 のプロジェクトを作る
こちらの記事で使っているプロジェクトを利用します。
Gitlab リポジトリはこちら
2. GitLab CI でnuxt generate する カタログを作る
マニュアル
こんな感じ
Nuxt3/template.yml
spec:
inputs:
stage:
default: build
type: string
image:
default: node:20-buster-slim
type: string
---
# npm install & nuxt prepare
nuxt-prepare:
image: $[[ inputs.image ]]
stage: $[[ inputs.stage ]]
script:
- npm install
- npx nuxt prepare
cache:
- key: caches-$CI_COMMIT_REF_NAME-$CI_PROJECT_ID-node-20-node_modules
paths:
- node_modules
policy: push
- key: caches-$CI_COMMIT_REF_NAME-$CI_PROJECT_ID-node-20-nuxt3
paths:
- .nuxt
policy: push
# nuxt generate
nuxt-generate:
image: $[[ inputs.image ]]
stage: $[[ inputs.stage ]]
needs: [ "nuxt-prepare" ]
script:
- npx nuxt generate
cache:
- key: caches-$CI_COMMIT_REF_NAME-$CI_PROJECT_ID-node-20-node_modules
paths:
- node_modules
policy: pull
- key: caches-$CI_COMMIT_REF_NAME-$CI_PROJECT_ID-node-20-nuxt3
paths:
- .nuxt
policy: pull
3. リリースする
リリースはCIで作ってもいいけど、考慮することがそこそこあり、面倒なので今回はglabでリリースする
glab についてはこちらを参照
CI Lintだけは通す
glab ci lint templates/Nuxt3/template.yml
リリースする
glab release create v0.0.1 -N "Nuxt3 generate Catalog test release"
カタログプロジェクトにする
あれ？リリースされない
これだとリリースされないので注意
- 作ったプロジェクトが公開プロジェクトじゃなかった
- project description の記載がないとリリースされないので追加する
- 再度、タグを削除してトライ
glab release create v0.0.1 -N "Nuxt3 generate Catalog test release"
カタログに登録された！
4. Nuxt3 のプロジェクトの.gitlab-ci.ymlに追加する
追加する内容。include で追加するだけ。
.gitlab-ci.yml
include:
- component: 'gitlab.com/future-techno-developers/public/ci-catalog/catalog-template/Nuxt3@v0.0.1'
stages:
- setup
- build
5. CI Done!
Gitlab CI を実行しましょう。Done！ うまく動けば成功です。
こんな感じ
終わり
感触とか
ほとんど社内で作成しているスクリプトをGitLab CI にできます。
そんなに手間がかからないです。
正直 コンポーネントはカタログがなければ使わない・・・
include.projectと何が違うのかがわかりません。より公開しやすくなった？
キャッシュとかどうなんの？
include した時に、キャッシュをどうするかは課題がある。触ってもらうのが良いのか？
CIコンポーネントリポジトリは細かく分けた方が良さそう
カタログなので、npmとかnodeとかreact とか、そういう単位で分けた方が良さそうです。
ラベルは？
カテゴリわけされないけど、ラベルはつけられないの？
こうするとベター？？
- 公開する単位は機能単位のプロジェクト名にしておくのが良さそうです(nuxt-catalog とか)
- ルートにはtemplate.ymlをおかない。templatesディレクトリにコンポーネントディレクトリを作った方が後々良さそう。
- 当たり前ですが、変数、引数にできるところ、共通化できるところは共通化した方がいいです。
- 今回は同梱していませんが、CIカタログ中にテストプロジェクトも内包した方が良いです。
- Readmeに inputsの内容、 jobの内容は記載しましょう。パラメータ変更して実行するケースの方が多いと思います。
今後やりたいこと
- 社内で使用しているCIスクリプトをカタログ化してpublicにしていく。
- GitLab CI カタログ増やしていく。
- ベストプラクティクスを共有していく。
みんなもっとGitLab を使っていこうぜ！
補足
情報がまじでないです。特に日本語。みんな発信していきましょう
下記は英語情報ですが、参考になりました。とはいえ誰かの作ったカタログ見るのが一番早いです。
Discussion
GitLab 16.0 から、コンポーネントがベータ版になって、ディレクトリ構造が変更 されていますので、ご注意ください。