💨

NextJSでSemantic Releaseのバージョン表示を行う

2022/08/26に公開

Next.js

GitHub Actions

Semantic Release

tech

背景

頻繁に更新するWebアプリにバージョン表示をしたい
自動でバージョンを更新したい

Semantic Releaseの導入

ライブラリのインストール

npm install --save-dev @semantic-release/git @semantic-release/changelog

yarn add -D @semantic-release/git @semantic-release/changelog

package.jsonに以下を追記します。

"plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/changelog",
    "@semantic-release/github",
    "@semantic-release/npm",
    "@semantic-release/git"
  ],
  "release": {
    "prepare": [
      "@semantic-release/changelog",
      "@semantic-release/npm",
      {
        "path": "@semantic-release/git",
        "assets": [
          "package.json",
          "package-lock.json",
          "CHANGELOG.md"
        ],
        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
      }
    ]
  }

GitHub Actionsで自動的にセマンティックリリースを行う

NextJSプロジェクトのルートに.github/workflowsというフォルダを作り、その中にyamlを作成する。
personal access tokenの発行については割愛する。

name: Semantic release 

on:
  push:
    branches:
      - master
jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 14
      - name: Semantic Release
        uses: cycjimmy/semantic-release-action@v3
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

masterにマージするとGitHub Actionsが動作し、自動的にタグを切ってリリースしてくれる。

NextJSでのリリースバージョン表示

package.jsonのversionプロパティが自動でインクリメントされるので、それをNextJSで読み出せるようにする。

envファイルに

NEXT_PUBLIC_APP_VERSION=$npm_package_version

と記述する。
NEXT_PUBLIC_まではNextJSの環境変数の接頭辞として必須。

あとは

<div
    style={{
        fontSize: 12,
        textAlign: 'right'
    }}
 > version {process.env.NEXT_PUBLIC_APP_VERSION}</div>

と記述すれば表示される。

特定のバージョンから始めたいときは？

デフォルトではv1.0.0からセマンティックリリースされるが、発行されたタグを削除し、
始めたいバージョンでタグを付与しておけば、次回以降そのバージョンからインクリメントされる。