lgtm-cat（サービス名 LGTMeow https://lgtmeow.com のフロントエンド用プロジェクトです。
2022 年 9 月に新デザインバージョンをリリースしました。
tomoshige さんに Figma で作成して頂きました。 tomoshige さん、ありがとうございます 🐱
.env.localを作成し、下記を設定してください。
数がそれなりに多いので vercel env pull .env.local で環境変数をダウンロードするのがオススメです。
https://vercel.com/docs/cli#commands/dev/when-to-use-this-command
NEXT_PUBLIC_APP_ENV=local
NEXT_PUBLIC_APP_URL=本アプリケーションのURL、ローカルの場合は http://localhost:2222
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-から始まるGoogle Tag ManagerのIDを指定
EDGE_CONFIG=Vercel Edge ConfigのURL（Vercel上の値を参照）
COGNITO_TOKEN_ENDPOINT=/oauth2/token で終わるCognitoのエンドポイントを指定
COGNITO_CLIENT_ID=CognitoUserPoolのClient IDを指定
COGNITO_CLIENT_SECRET=CognitoUserPoolのClient Secretを指定
LGTMEOW_API_URL=https://github.com/nekochans/lgtm-cat-api が稼働しているAPIサーバーのURLを指定
IMAGE_RECOGNITION_API_URL=ねこ画像判定APIが稼働しているAPIサーバーのURLを指定
UPSTASH_REDIS_REST_URL=upstash Redis REST APIのURLを指定
UPSTASH_REDIS_REST_TOKEN=upstash Redis REST APIのトークンを指定
ローカルでSentryやChromaticの動作確認を実施する場合 direnv を使って .envrc に以下の環境変数を設定します。
export NEXT_PUBLIC_APP_ENV=local
export CHROMATIC_PROJECT_TOKEN=Chromaticのトークンを指定
export SENTRY_ORG=Sentryの組織を指定（Vercel上の値を参照）
export SENTRY_PROJECT=Sentryのプロジェクト名（Vercel上の値を参照）
export NEXT_PUBLIC_SENTRY_DSN=SentryのDNS（Vercel上の値を参照）
export SENTRY_AUTH_TOKEN=Sentryのトークン（Vercel上の値を参照）
CHROMATIC_PROJECT_TOKEN に関しては npm run chromatic を利用しない限りは設定不要です。
以下の環境変数は Sentry の初期化に必須です。
NEXT_PUBLIC_APP_ENVSENTRY_ORGSENTRY_PROJECTNEXT_PUBLIC_SENTRY_DSNSENTRY_AUTH_TOKEN
20 系の最新を利用して下さい。
複数プロジェクトで異なる Node.js のバージョンを利用する可能性があるので、Node.js 自体をバージョン管理出来るようにしておくのが無難です。
以下は asdf を使った設定例です。
asdf install nodejs 20.11.0
asdf local nodejs 20.11.0npm ci で依存 package をインストールします。
その後 npm run dev でホットリロードが有効な状態でアプリケーションサーバーを起動します。
http://localhost:2222 でアクセス可能です。
Vercel Edge Config を利用してメンテナンスモードを実現しています。
以下から Vercel Edge Config を編集可能です。
https://vercel.com/nekochans/lgtm-cat-frontend/stores
それぞれ以下のように対応しています。
lgtm-cat-frontend-store（本番用）stg-lgtm-cat-frontend-store（ローカルを含む開発、ステージング用）
メンテナンスモードに移行する為には isInMaintenance を true に変更します。
編集後は「Save」を押下するか Command + s で保存しないと反映されません。
メンテナンスモードになると全てのページでメンテナンス中を示すエラーページが表示されます。
様々な linter を実行します。
現在採用している linter は以下の通りです。（Prettier はどちらかと言うと Formatter）
こちらのチェックでエラーになったコードは CI のチェックを通過する事が出来ません。
linter で利用しているツールの format 機能を利用してソースコードの整形を行います。
Storybook のサーバーを起動します。
http://localhost:6006 でアクセス可能です。
テストを実行します。
npm install [package名] を実行すると package.json の dependencies に追加されます。
開発にしか利用しない package（テストコードや Linter, Storybook とか）は devDependencies に追加します。
devDependencies に追加を行う為には --save-dev オプションを利用します。
npm install [package名] --save-dev
package 内容に変更を加えない場合は npm install ではなく npm ci を利用します。
npm install は package-lock.json が変更されてしまう可能性がある為です。
また npm ci のほうが高速に動作します。
npm の 7 系からは依存 package の整合性を厳密にチェックするようになりました。
例えば storybook は React の最新版での動作しますが、依存関係上は 16 系を要求してくるので、インストールが出来ません。
具体的には こんな感じのエラー が発生します。
これを回避する為には、 npm install --legacy-peer-deps のように --legacy-peer-deps オプションを使って対応します。
あまり良い方法ではありませんが、依存先の package が対応しない限りは、こちらではどうしようもないので、一時的に --legacy-peer-deps が必要な場合もあります。
npm dedupe を実行すると、モジュールの重複を整理してくれるので、複数の package を入れた後はこちらを実行するようにします。
npm install 実行時に --legacy-peer-deps を実行した場合は npm dedupe --legacy-peer-deps のように実行する必要があります。
https://docs.npmjs.com/cli/v7/commands/npm-dedupe
このアプリケーションは Vercel によってホスティングされています。
main ブランチにマージされた時点で本番環境へデプロイが行われます。
アプリケーションで利用する環境変数が増えた場合は こちら より設定が必要です。
環境変数は以下の環境毎に必要です。
- Production
- 本番環境
- Preview
- GitHub のブランチにプッシュされる度に一時的に生成される環境
- Development
- vercel dev コマンドでローカル環境を起動した場合、この環境変数が利用されます。
※ 全環境で共有な環境変数を設定する事も可能です。
各ドキュメントを参照して下さい。