Skip to content

Latest commit

 

History

History
292 lines (242 loc) · 9.44 KB

README-jp.md

File metadata and controls

292 lines (242 loc) · 9.44 KB

Portal Site For Nuxt2 Study

Twitter: N-LAB

Nuxt2の学習用として本プロジェクトを作成しました。 このプロジェクトでは以下の機能を実装しています。

  • アカウント作成
  • アカウントパスワードの変更
  • ログイン
  • アカウント情報の表示

このプロジェクトはフロントエンドとバックエンドの2つのプロジェクトで構成されています。

project_root
├── frontend (Nuxt2)
└── backend (Express)

フロントエンドプロジェクトはNuxt2を利用して作成しています。 以下のライブラリを利用しています。

  • TypeScript
  • Nuxt/auth
  • Nuxt/axios
  • Font Awesome
  • Bulma CSS
  • Vee-Validate
  • SweetAlert2
  • Jest
  • Jest Puppeteer
  • SonarQube

バックエンドプロジェクトはExpressを利用して作成しています。 以下のライブラリを利用しています。

  • TypeScript
  • CryptoJS
  • Helmet
  • TypeORM
  • Jest
  • SonarQube
  • JSONWebToken

目次

  1. 前提条件
  2. デモ
  3. インストール方法
  4. 使い方
  5. ユニットテストの実行
  6. E2Eテストの実行
  7. プロジェクトの解析
  8. ライセンス
  9. Author

前提条件

ローカルのパソコンに以下がインストール済みであることが前提:

  • Git
  • Node.js -v18ではなくv16.x系をインストールしてください。npm package managerもインストールする必要があります。

デモ

  • アカウント作成

  • アカウントパスワードの変更

  • ログインとアカウント情報の表示

インストール方法

・ フロントエンド

# フロントエンドプロジェクトへ移動
$ cd frontend

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

・ バックエンド

# バックエンドプロジェクトへ移動
$ cd backend

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

使い方

アプリケーションを起動するには以下を実施します。

# フロントエンドプロジェクトへ移動
$ cd frontend

# アプリケーションの起動
$ npm run start:all

以下のURLでアプリケーションの動作確認ができます。

ユニットテストの実行

・ フロントエンド

フロントエンドのユニットテストを実行するには以下を実施します。

# フロントエンドプロジェクトへ移動
$ cd frontend

# すべてのテストファイルのテスト実施
$ npm run test:all

テストファイルごとにテストを実施することもできます。

以下のファイルのconfigのpathに任意のテストファイルを設定します。

  • frontend/package.json
{
  "config": {
    "path": "./src/test/pages/login.spec.ts",
  }
}

上記を設定後に以下を実施します。

# フロントエンドプロジェクトへ移動
$ cd frontend

# frontend/package.jsonのconfigのpathに設定されたテストファイルのテストを実施
$ npm run test

# Windowsを利用している場合は上記のコマンドの代わりに以下のコマンドを実行してください
$ npm run test:win

・ バックエンド

バックエンドのユニットテストを実行するには以下を実施します。

# バックエンドプロジェクトへ移動
$ cd backend

# すべてのテストファイルのテスト実施
$ npm run test:all

テストファイルごとにテストを実施することもできます。

以下のファイルのconfigのpathに任意のテストファイルを設定します。

  • backend/package.json
{
  "config": {
    "path": "./src/test/controller/LoginController.spec.ts",
  }
}

上記を設定後に以下を実施します。

# バックエンドプロジェクトへ移動
$ cd backend

# backend/package.jsonのconfigのpathに設定されたテストファイルのテストを実施
$ npm run test

# Windowsを利用している場合は上記のコマンドの代わりに以下のコマンドを実行してください
$ npm run test:win

E2Eテストの実行

各ページをjest-puppeteerを使ってテストすることができます。

以下のファイルのconfigのe2eに任意のテストファイルを設定します。

  • frontend/package.json
{
  "config": {
    "e2e": "./e2e/e2e-test/login.spec.ts",
  }
}

上記を設定後に以下を実施します。

# フロントエンドプロジェクトへ移動
$ cd frontend

# frontend/package.jsonのconfigのe2eに設定されたテストファイルのテストを実施
$ npm run test:e2e

# Windowsを利用している場合は上記のコマンドの代わりに以下のコマンドを実行してください
$ npm run test:e2e-win

プロジェクトの解析

SonarQubeを利用してプロジェクトの静的解析を行うことができます。 事前にSonarQubeをインストールしておく必要があります。

・ フロントエンド

SonarQubeのインストール後に、SonarQube上でプロジェクトを作成してプロジェクトトークンを生成します。 プロジェクトの作成時に、project display nameとproject keyには以下の名前を設定する必要があります。

portal-frontend

以下のファイルのconfigのtokenに生成したプロジェクトトークンを設定します。

  • frontend/package.json.
{
  "config": {
    "token": "sqp_XXXXXXXXX",
  }
}

上記を設定後に以下を実施します。

# フロントエンドプロジェクトへ移動
$ cd frontend

# ユニットテストを全件実行
$ npm run test:all

# SonarQubeの解析実行
$ npm run sonar

# Windowsを利用している場合は上記のコマンドの代わりに以下のコマンドを実行してください
$ npm run sonar:win

以下のURLより解析結果を確認することができます。

・ バックエンド

SonarQubeのインストール後に、SonarQube上でプロジェクトを作成してプロジェクトトークンを生成します。 プロジェクトの作成時に、project display nameとproject keyには以下の名前を設定する必要があります。

portal-backend

以下のファイルのconfigのtokenに生成したプロジェクトトークンを設定します。

  • backend/package.json.
{
  "config": {
    "token": "sqp_XXXXXXXXX",
  }
}

上記を設定後に以下を実施します。

# バックエンドプロジェクトへ移動
$ cd backend

# ユニットテストを全件実行
$ npm run test:all

# SonarQubeの解析実行
$ npm run sonar

# Windowsを利用している場合は上記のコマンドの代わりに以下のコマンドを実行してください
$ npm run sonar:win

以下のURLより解析結果を確認することができます。

ライセンス

MIT

Author

👤 Naoki Nakanishi