研究室配属希望調査

Contributors

Architecture

環境構築

使用したパッケージとそのバージョン

パッケージ	バージョン
`yarn`	1.22.17
`node`	v15.14.0
`firebase`	9.6.1

firebaseに関しては，8 系と 9 系でコードの書き方が大きく異なるので，注意すること

事前に入れておいてほしいもの

Homebrew
- インストールしていない方はこちらから
git

Node のインストール

1. Homebrew から nodebrew をインストール

こちらは必須ではないが，Node のパッケージ管理が楽になるのでおすすめ
直接 Node をインストールしても OK
すでに Node が入っている場合は削除すること

# Nodeが入っているかを確認
which node

# brewでインストールしていれば，以下のコマンドで削除
brew uninstall node

# brewのアップデート
brew update

# nodebrewのインストール
brew install nodebrew

# nodebrewのバージョンの確認
nodebrew -v

環境変数を追加する
- bash を使っている方は，zshrcの部分をbash_profileに変更

# zshrcを開く
- vi ~/.zshrc

以下の環境変数をzshrcもしくはbash_profileの末尾に追加

export PATH=$HOME/.nodebrew/current/bin:$PATH

zshrcもしくはbash_profileを更新

# zshrcを更新
source ~/.zshrc

最後にセットアップして完了
- これをやらないと，nodebrew が使えない

# セットアップ
nodebrew setup

2. nodebrew から Node をインストール

今回の開発では Node 15 系を使用しているので，こちらをインストール
- 15 系であれば，どのバージョンでも OK

# nodebrewでインストールできるNodeのバージョンを確認
nodebrew ls-remote

# Nodeのインストール
nodebrew install-binary v15.14.0
nodebrew compile v15.14.0 # M1の場合はこちら

# インストールしたバージョンの確認
nodebrew ls

# 使いたいバージョンを指定
nodebrew use v15.14.0

# nodeのバージョンを確認
node -v
npm -v

yarn のインスール

今回の開発では，npmではなく，yarnでパッケージ管理を行った
npm と yarn の違いはこちらから

Cloud Functions では，npmを使用しているが，
パッケージをインストールしなくていいので，基本的にnpmは使用しない

# npm 経由でyarnをインストール
npm install -g yarn

# yarnがインストールできたかを確認
yarn -v

Firebase Tools のインストール

Firebase を使用した開発ではほぼ必須の CLI なので，こちらもインストール
このパッケージをインストールすると，Firebase の操作用コマンドが使用できる

npm install -g firebase-tools

ローカルホストでの立ち上げ

1. リポジトリのクローン

gitにて，リポジトリのクローンを行う
- GitHub に ssh 接続ができるように設定しておきましょう

git clone git@github.com:Kenny-NISLab/lab-assignment.git

2. 開発環境の用意

yarnにて，今回使用するパッケージのインスール

# ディレクトリの移動
cd lab-assignment

# パッケージのインストール
yarn install

プロジェクトのルートディレクトリに.envの作成
- .envは環境変数用のファイル
- git にて管理を行いたくない情報を管理している
- .envは先輩から引き継ぐようにしてください

# .envの作成
touch .env

# .envの中身
FIREBASE_API_KEY='xxxx'
FIREBASE_AUTH_DOMAIN='xxxx'
FIREBASE_PROJECT_ID='xxxx'
FIREBASE_STORAGE_BUCKET='xxxx'
FIREBASE_MESSAGE_SENDER_ID='xxxx'
FIREBASE_APP_ID='xxxx'
ADMIN_EMAIL='xxxx'
ADMIN_ROOT_URL='xxxx'
ADMIN_SUB_URL='xxxx'
CRYPT_JS_PASSPHRASE='xxxx'

開発環境の Firebase プロジェクトの選択
- Firebase のプロジェクトに関しては，後述

# Firebaseにログイン
firebase login

# プロジェクトの選択
firebase use lab-assignment-dev

3. ローカルホストを起動

起動できたら，ブラウザにてlocalhost:3000にアクセス

# このコマンドでローカルホストの起動ができる
yarn dev

# 停止したい場合は以下を押下
control + C

以下の画面が出てこれば完了！

4. VSCode で開発に必要な拡張ツール

開発するにあたり，以下の拡張ツールをインストールしておいてください

ESLint
Vetur
Prettier

Firebase プロジェクトの管理

Firebase とは?

Google が提供しているモバイル・Web アプリケーション向けのプラットフォーム
全ての機能が Google のインフラ技術に支えられており、簡単にアプリケーションの開発を行うことができる

プロジェクトの管理

Firebase コンソール：https://console.firebase.google.com/
nislab.root@gmail.comのアカウントで Google にログインを行えば，操作可能
- 操作する場合は，ネットワーク班の担当者から共有してもらうこと

環境名	プロジェクト名	URL	備考
本番環境	lab-assignment-prod	・https://assign.nislab.io ・https://lab-assignment-prod.web.app	B3 の学生がデータを入力する際に使用
開発環境	lab-assignment-dev	https://lab-assignment-dev.web.app	ローカルホストと開発環境用に使用

今回使用したサービスの説明

Authentication

認証/認可を行うサービス
今回はメールアドレス認証のみを有効にした（プロバイダによる認可は未実装というか必要なし）

Firestore

Firebase におけるデータベース用のサービス
NoSQL であり，コレクションとドキュメントという概念で DB を管理
インデックスやセキュリティルール(権限)の設定も可能
- 詳しくは公式ドキュメントにて

Hosting

研究室配属希望調査のデプロイ先
デプロイはGithub Actionsが担当しているので，気にしなくて良い
URL の末尾スラッシュの設定をオフにしている
- 例：https://assign.nislab.io/user

Cloud Functions

Firebase で使用されるサーバレスのバックエンドフレームワーク
クライアントから HTTP リクエストを呼ぶことで，呼び出すことが可能
主にメールの送信と，ユーザの作成・削除にて使用
Cloud Functios のみデプロイの仕方が違うので，注意

# デプロイ先のプロジェクトを選択（本番環境であれば，lab-assignment-prod）
firebase use lab-assignment-dev

# Cloud Functionsのみデプロイ
firebase deploy --only functions

研究室配属希望調査の開発

Nuxt.js について

Vue.js のフレームワーク
- Vue.js はライフサイクルの考え方が開発をする上で，非常に重要なので理解をすること
基本的には，Vue.js と同じだが，一部 Nuxt.js の方が使いやすくなっているイメージ
今回はSPA(Single Page Application)にて開発を行なった

UI フレームワーク

本開発では，Vuetifyを使用
- 公式ドキュメント
- Vue.js のマテリアルデザインのコンポーネントを提供
よく使用したコンポーネント
- v-card
- v-data-table

URL 構造

URL 構造はpagesのディレクトリ構造と一致しているため，編集したいページのコードは対応するファイルから探すようにすること

URL	備考
/	トップとログインページ
/form	学生が問い合わせを行うページ
/user	各学生の研究室の得点や進路希望の調査結果を表示するページ
/user/edit	各学生の研究室の得点や進路希望を編集するページ
/admin/users	管理者画面・学生のデータを管理するページ
/admin/teachers	管理者画面・教授のデータを管理するページ

ディレクトリ構造

.
├── assets               # CSSの設定等
├── components
│   ├── admin            # 管理画面に使用するコンポーネント
│   ├── card             # カードの汎用コンポーネント
│   └── layouts          # 汎用コンポーネント
├── firebase.json        # Firebase Hostingの設定を行う
├── firestore.rules      # Firestoreのセキュリティルールを設定
├── functions
│   ├── index.js         # Cloud Functionsのソースコード
├── layouts              # レイアウトの表示
├── middleware
│   ├── auth.js          # 認証情報の取得
│   └── redirect.js      # リダイレクト設定
├── nuxt.config.js
├── package.json         # yarnでのパッケージの管理
├── pages                # URL構造と対応
│   ├── admin
│   │   ├── teachers.vue # /admin/teacher
│   │   └── users.vue    # /admin/users
│   ├── form.vue         # /form
│   ├── index.vue        # /
│   └── user
│       ├── edit.vue     # /user/edit
│       └── index.vue    # /user
├── plugins
│   ├── firebase.js      # Firebaseの初期化
│   └── utils.js         # 汎用関数の設定
├── static               # ファビコンの設定等
├── store
│   ├── auth.js          # 認証情報の状態を管理
│   ├── drawer.js
│   ├── excel.js
│   ├── menu.js
│   ├── teachers.js      # 教授データの状態を管理
│   └── users.js         # 学生データの状態を管理
└── yarn.lock

Nuxt.js のディレクトリ構造の詳細はこちらを参照すること
ページロード時の実行順番
- plugins → middlewares → layouts → pages → components
Vuexについて
- Vue.js の状態管理ライブラリ
  - 詳細はこちら
- storeディレクトリに，状態管理を行うためのファイルを格納

Firestore のコレクション設計

作成したテーブルは以下の 2 つ

users

"users": {
  "docmentID": {
    "id": "1316200127",
    "name": "中井",
    "mail": "ctwf0127@mail4.doshisha.ac.jp",
    "password": "pass",
    "status": "test",
    "isActive": true,
    "isPointAssigned": false,
    "group": 1,
    "rank": 39,
    "isGraduate": true,
    "point": {
      "ksato": "3",
      "tkoita": "1",
      ...
    },
    "year": "2022",
  },
  "docmentID": {
    "id": "1316200149",
    "name": "田中",
    "mail": "ctwf0149@mail4.doshisha.ac.jp",
    "password": "pass",
    "status": "prod",
    "isActive": true,
    "isPointAssigned": false,
    "group": 1,
    "rank": 1,
    "isGraduate": true,
    "point": {
      "ksato": "3",
      "tkoita": "1",
      ...
    },
    "year": "2022",
  },
  ...
}

teachers

"teachers": {
  "docmentID": {
    "id": "ksato",
    "name": "佐藤 健哉",
    "lab": "ネットワーク情報システム研究室",
  },
  "docmentID": {
    "id": "tkoita",
    "name": "小板 隆浩",
    "lab": "ネットワーク情報システム研究室",
  },
  ...
}

documentID は Firebase にデータを追加した際，自動的に付与される ID
teachers のidに関しては，運用ルール(Notion 参照)に従って保存すること

git の操作

運用図

ブランチの種類と運用ルール

`main`

本番環境用のブランチ
developからのみマージされるように運用すること
- featureからマージしないように

`develop`

開発環境用のブランチ
featureブランチからのみマージされるように運用すること

`feature/#(チケット番号)`

開発者がコードの修正・追加を行うブランチ
必ずdevelopブランチから切るようにすること
PR を投げる際に，developに向けるように注意すること
- デフォルトはmainのため
チケット番号は Issue の番号を参照にすること

開発時の流れ

1. `main`ブランチにて，pull を行い最新のリポジトリを取得

# mainにチェックアウト
git checkout main

# mainの最新状態を取得
git pull origin main

2. `develop`ブランチにて，pull を行い最新のリポジトリを取得

# developにチェックアウト
git checkout develop

# developの最新状態を取得
git pull origin develop

3. `develop`ブランチから`feature`ブランチを切り，作業を開始

# featureブランチを作成
git checkout -b feature/#(チケット番号)

# 作業を開始

4. 作業が終了したら，作業内容をリモートリポジトリに push

# 作業が終了した場合
git add .
git commit -m "#(チケット番号) 修正内容のコメントを記述"
git push origin feature/#(チケット番号)

5. PR を投げる

Github の「Pull Request」にて，自身が開発を行なったfeatureブランチからdevelopブランチに向けて，PR を投げる
その後，すぐに「Merge Pull Request」を押さないようにする
- Github Actions が走るまで，ライムラグがあるため
Github Actions が終われば，レビューとテストを実施
問題がなければ，「Merge Pull Request」を押下し，developにマージ
その後，Github Actions が走り，開発環境にデプロイを行う

6. 本番反映

Github の「Pull Request」にて，developブランチからmainブランチに向けて，PR を投げる
問題がなければ，「Merge Pull Request」を押下し，mainにマージ
その後，Github Actions が走り，本番環境にデプロイを行う

Github Actions

.github/workflowに設定ファイルを格納

発火タイミングと詳細

featureブランチへ push した際
- ファイル名：ci.yml
- 構文チェック
developブランチに PR を投げた際
- ファイル名：deploy_on_dev_preview.yml
- プレビュー環境へのデプロイ
- 成功すれば，以下のコメントが出力される
developブランチに投げた PR をクローズした際（マージした際）
- ファイル名：deploy_on_dev.yml
- 開発環境へデプロイ
- 開発環境に Cloud Functions をデプロイ
- プレビュー環境の削除
mainブランチに投げた PR をクローズした際（マージした際）
- ファイル名：deploy_on_prod.yml
- 本番環境へデプロイ
- 本番環境に Cloud Functions をデプロイ

最後に

かなり急いで開発をしたので，リファクタリングやパフォーマンスチューニング等大募集しています！

Name		Name	Last commit message	Last commit date
Latest commit History 385 Commits
.github		.github
.vscode		.vscode
assets		assets
components		components
functions		functions
layouts		layouts
middleware		middleware
pages		pages
plugins		plugins
static		static
store		store
.eslintrc.js		.eslintrc.js
.firebaserc		.firebaserc
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
LICENSE		LICENSE
README.md		README.md
firebase.json		firebase.json
firestore.index.json		firestore.index.json
firestore.rules		firestore.rules
nuxt.config.js		nuxt.config.js
package-lock.json		package-lock.json
package.json		package.json
yarn.lock		yarn.lock

License

Kenny-NISLab/lab-assignment

Folders and files

Latest commit

History

Repository files navigation

研究室配属希望調査

Contributors

Architecture

環境構築

使用したパッケージとそのバージョン

事前に入れておいてほしいもの

Node のインストール

1. Homebrew から nodebrew をインストール

2. nodebrew から Node をインストール

yarn のインスール

Firebase Tools のインストール

ローカルホストでの立ち上げ

1. リポジトリのクローン

2. 開発環境の用意

3. ローカルホストを起動

4. VSCode で開発に必要な拡張ツール

Firebase プロジェクトの管理

Firebase とは?

プロジェクトの管理

今回使用したサービスの説明

Authentication

Firestore

Hosting

Cloud Functions

研究室配属希望調査の開発

Nuxt.js について

UI フレームワーク

URL 構造

ディレクトリ構造

Firestore のコレクション設計

git の操作

運用図

ブランチの種類と運用ルール

main

develop

feature/#(チケット番号)

開発時の流れ

1. mainブランチにて，pull を行い最新のリポジトリを取得

2. developブランチにて，pull を行い最新のリポジトリを取得

3. developブランチからfeatureブランチを切り，作業を開始

4. 作業が終了したら，作業内容をリモートリポジトリに push

5. PR を投げる

6. 本番反映

Github Actions

発火タイミングと詳細

最後に

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 9

Contributors 5

Languages

`main`

`develop`

`feature/#(チケット番号)`

1. `main`ブランチにて，pull を行い最新のリポジトリを取得

2. `develop`ブランチにて，pull を行い最新のリポジトリを取得

3. `develop`ブランチから`feature`ブランチを切り，作業を開始