廃プラを使ったキーキャップの作り方をオープンソースで広げていくコミュニティです
開発時のアプリケーション起動には以下の 3 つのコマンドが使用できます。
| コマンド | 説明 |
|---|---|
npm run dev |
next dev でローカル上でアプリケーションを実行します。Firebase への接続情報が必要です。ローカルの環境変数で指定してください。 |
npm run dev:no-firebase |
next dev でローカル上でアプリケーションを実行します。Firebase への接続は行わず、Firebase から得るはずだったデータは lib/helper.tsで定義したサンプルデータを代わりに使用します。 |
npm run dev:vercel |
vercel dev でローカル上でアプリケーションを実行します。Firebase への接続情報が必要です。 ローカルの環境変数、もしくは Vercel のプロジェクト設定で指定してください。 |
Firebase への接続情報の設定については Firebase 接続情報の設定について を参照してください。
デプロイ環境として Vercel を使用することを想定しています。（事前にリポジトリと Vercel を連携させておく必要があります）
Vercel の機能として、ブランチを GitHub に Push するたびに自動でプレビュー環境がデプロイされます。（デフォルトでは、mainブランチへの Push によって本番環境へのデプロイが行われます）
また、以下のコマンドを使用することで手動でのデプロイが可能です。
| コマンド | 説明 |
|---|---|
npm run deploy:dev |
Vercel のプレビュー環境にデプロイします。 |
npm run deploy:prod |
Vercel の本番環境にデプロイします。 本番環境に影響を与えます。実行時は注意してください。 |
このアプリケーションは素材データを Firebase から取得することを想定しています。
接続のために必要な情報は環境変数に設定してください。必要な値は以下の通りです。
| 環境変数 | 説明 |
|---|---|
KEYCAP_FIREBASE_SERVICE_ACCOUNT |
Firebase Admin SDK を使用するための サービスアカウント |
KEYCAP_FIREBASE_PROJECT_ID |
素材データを管理している Project の ID |
KEYCAP_FIREBASE_PRIVATE_KEY |
Firebase Admin SDK の Private Key |
環境変数を設定する方法はアプリケーションの実行環境によって異なります。
| 環境 | 設定方法 |
|---|---|
npm run dev |
- 使用しているシェルや IDE の設定で環境変数を追加 - リポジトリ直下に .envを作成し、その中に環境変数を記述 |
npm run dev:no-firebasel |
Firebase を使用しないので環境変数の設定は不要です |
npm run dev:vercel |
- 使用しているシェルや IDE の設定で環境変数を追加 - リポジトリ直下に .envを作成し、その中に環境変数を記述 - Vercel 上のプロジェクト設定で Development 向けに環境変数を設定 |
| Vercel 上で実行（プレビュー環境） | Vercel のプロジェクト設定で Preview 向けに環境変数を設定 |
| Vercel 上で実行（本番環境） | Vercel のプロジェクト設定で Production 向けに環境変数を設定 |