42Tokyoの統計情報を表示するウェブサイトです。
学生の進捗を知るために作成しました。
対象 | URL |
---|---|
42の学生 | https://42tokyo-stats.vercel.app/ |
42の学生以外の方 | https://42tokyo-stats.vercel.app/demo (デモページを見ることができます) |
- 42 API
- Redirect URI
- 少なくとも、以下のURLが必要です
https://localhost:3000/api/auth/callback/42-school
<デプロイ先URL>/api/auth/callback/42-school
- 少なくとも、以下のURLが必要です
- Scopes
- 「Access the user public data」のみチェックを入れてください。
- Redirect URI
- Google Cloudのサービスアカウントキー
- サービスアカウントには「Cloud Storage for Firebase サービス エージェント」のロールが必要です。
- Google Cloud Storageのバケット
- nafuka11/42tokyo-stats-data-collector を使ってデータを収集しているバケットを指定ください。
- Vercelの Deploy Hook
- 定期デプロイをする場合、必要です。
-
このリポジトリをcloneもしくはforkします。
以下の場合はforkしてください。
- GitHub Actionsを用いた定期デプロイを行いたい場合
- ソースコード内の 定数 を変更したい場合(例:リポジトリURL、タイムゾーン)
-
.env.example
を.env.local
としてコピーします。 -
.env.local
を編集し、環境変数の値を設定します。環境変数名 説明 FT_CLIENT_ID 42 APIのuid FT_CLIENT_SECRET 42 APIのsecret NEXTAUTH_SECRET JWTの暗号化に使われるキー openssl rand -base64 32
で生成できます(参考:Options | NextAuth.js)FIREBASE_PROJECT_ID サービスアカウントキーの project_id
FIREBASE_CLIENT_EMAIL サービスアカウントキーの client_email
FIREBASE_PRIVATE_KEY サービスアカウントキーの private_key
Vercelのwebエディタで設定する場合は、JSONの値そのままではなく、改行(\n
)を実際の改行に置き換えてください
macOSかつjqコマンドが使える場合cat service-account-file.json | jq -jr '.private_key' | pbcopy
でwebエディタ用にクリップボードへprivate_keyをコピーできますBUCKET_NAME Cloud Storageのバケット名 EXCLUDE_USER_IDS 除外したい42の複数ユーザIDをカンマ区切りにした文字列。明らかに学生ではないデータが混入する場合に使います。(例:除外したいユーザIDが 21
と42
の場合、21,42
と空白文字無しで指定します) -
Cloud Storageからcursus_usersのファイルを取得し、
contents/
下にデータを保存します。保存したデータはログイン後の画面で表示されるデータとなります。yarn build:contents
-
開発サーバを起動します。
yarn dev
https://localhost:3000
にアクセスすると、ログイン画面が表示されるはずです。
この項目ではVercel + GitHub Actionsを用いた定期デプロイについて説明します。
-
GitHubでリポジトリをforkします。
ローカルの手順で既にfork済みの場合、forkは不要です。
-
Vercel でforkしたリポジトリをimportします。
-
Vercelにて環境変数を設定します。
Projectの「Settings」→「Environment Variables」から追加します。追加する環境変数は ローカル の項目を確認ください。
-
VercelのDeploy Hookを作成します。
VercelのProjectの「Settings」→「Git」→「Deploy Hooks」→「Create Hook」から作成します。
-
GitHubのforkしたリポジトリの「Settings」→「Secrets」→「Actions」から、GitHub ActionsのSecretを設定します。
Secret名 説明 VERCEL_DEPLOY_URL Vercelの Deploy Hook
以上で、00:05〜00:50 JSTにGitHub ActionsからDeploy Hookが叩かれ、定期的にデプロイが行われるはずです。
(workflowファイルでは00:05に設定していますが、GitHub Actionsのcronはタイムラグが発生します)
.
├── README.md
├── README.nextjs.md
├── contents
├── docs
├── next-env.d.ts
├── next.config.js
├── package.json
├── public
├── src
│ ├── builder
│ ├── components
│ ├── constants
│ ├── pages
│ ├── repositories
│ ├── services
│ ├── styles
│ ├── types
│ └── utils
├── tsconfig.builder.json
├── tsconfig.json
└── yarn.lock
ディレクトリ | 内容物 |
---|---|
.github/workflows | GitHub Actions用のworkflowファイル |
contents | yarn build:contents で生成したファイル |
docs | README.mdで使用する画像ファイル |
public | 静的ファイル |
src/builder | yarn build:contents のコード。Google Cloud Storageから情報を取得・集計し、contents/ に保存します |
src/components | コンポーネント。ページ共通のコンポーネントは /common に配置し、それ以外は機能ごとにディレクトリ名をつけます |
src/constants | 定数が定義されたファイル |
src/pages | ルーティング用のファイル。 /api 下はAPIとして公開されます |
src/repositories | Google Cloud Storage、ローカルのファイルを操作する関数のファイル |
src/services | repositoriesで取得したデータを集計する関数のファイル |
src/styles | CSSファイル |
src/types | 型定義ファイル |