はじめに
元々のフロントエンド/バックエンドには、バックエンド設定の自由度を高める仕組みとしてクラウド関数がすでにある。とはいえ、オリジナルのフロントエンドにはやはり不十分なところがあり、もっとカスタマイズしたいなら、フロントエンドの二次開発が必要になる。
以前ブログを構築したときに、Shiro を自分のリポジトリにフォーク済みのはずなので、そのフォークをベースに二次開発を進める。
実はとても簡単なことなのだが、自分はまったくの初心者だったので、環境をきちんと構築できるまでに2日かかった。
環境構築
必要な基本ソフトウェア環境は次のとおり。
- fnm
- Node.js
- pnpm
fnm のインストール
管理者モードでターミナルを開き、次のコマンドを実行する。
choco install fnm
続いて、次のコマンドで動作確認をする。
fnm -h
ここまでで十分なはずだが、環境変数を設定しておくこともできる。
以下のディレクトリに profile.ps1 ファイルを作成する。
%USERPROFILE%\Documents\WindowsPowerShell\profile.ps1
%USERPROFILE%: ユーザーディレクトリを表す。エクスプローラーのアドレスバーに %USERPROFILE% と入力して Enter を押せばよい。
WindowsPowerShell は新規に作成するフォルダー名。Node をインストールしてもコマンドが認識されない場合は、フォルダー名を PowerShell に変更すること。
次のコードを上記の設定ファイルに書き込む。
fnm env --use-on-cd | Out-String | Invoke-Expression
Node.js のインストール
次のページの手順に従って Node.js をインストールする。
環境に応じて自分に合った方法を選ぼう。たとえば自分の環境では次のコマンドでインストールした。ただし、もともと Node.js をインストール済みだったので、PATH 環境変数の追加設定は不要だった。
winget install Schniz.fnm
fnm env --use-on-cd | Out-String | Invoke-Expression
fnm use --install-if-missing 22
node -v # should print `v22.10.0`
npm -v # should print `10.9.0`
pnpm のインストール
管理者モードでターミナルを開き、次のコマンドでインストールする。
Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression
プロジェクトを開く
元のプロジェクトには最初から .vscode フォルダーがあるので、VS Code で元のプロジェクトフォルダーを開けばよい。
VS Code のターミナルで次のコマンドを実行する。ポイントは --frozen-lockfile で、ここで非常に長い時間詰まった。このパラメータを付けると、プロジェクトに元からあるバージョン指定に従って依存関係をインストールしてくれる。
pnpm install --frozen-lockfile
続いて、プロジェクト直下の .env ファイルを用意する。デプロイ時と同じ内容にしておけばよい。
以下の2つの方法のどちらでも、サーバーを起動してプレビューできる。
開発サーバーの起動
VS Code のターミナルで次のコマンドを入力する。
pnpm run dev
ターミナルに表示される http://localhost:3000 のようなリンクをクリックすると、ブラウザでプレビューを開ける。
本番環境のビルドと起動
VS Code のターミナルで次のコマンドを入力する。
pnpm run build
ビルドが完了したら、次のコマンドを入力する。
pnpm run start
ターミナルに表示される http://localhost:3000 のようなリンクをクリックすると、ブラウザでプレビューを開ける。
Docker Compose の参照元を自分のプロジェクトに切り替える
これはグループの仲間によるチュートリアルだ。 あなたの改修版 Shiro の Docker イメージをビルドする - Mikuの次行星
リポジトリのルートにある .github フォルダーを削除する。
リポジトリの .github/workflows ディレクトリに、名前は何でもよいので、yml ファイルを新規作成する。コードは次のとおり。
name: Docker Build
on:
push:
branches:
- 'main'
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Login to Registry
uses: docker/login-action@v3
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Build and push
uses: docker/build-push-action@v4
with:
context: .
file: ./Dockerfile
platforms: linux/amd64
push: true
tags: ghcr.io/innei/shiro:latest
あとは一番下の Build and push ステップの tag を、ghcr.io/innei/shiro:latest から自分が適当だと思う名前に変更するだけ。大文字を一切含めないように注意すること。覚えやすくするため、innei の部分を自分の GitHub ユーザー名の小文字に置き換えて、イメージの名前空間にするのがおすすめ。
サーバー上で Docker イメージを取得している docker-compose.yml ファイルを変更し、その中の image の値を自分のイメージに置き換える。たとえば、自分はこの項目を次のように設定した。
image: ghcr.io/stbanana/shiro:latest
stbanana は自分の GitHub ユーザー名だからだ。