population-transition-chart

仕様

https://notion.yumemi.co.jp/0e9ef27b55704d7882aab55cc86c999d

デモ

https://population-transition-chart-zeta.vercel.app/

インストール

node_modulesのインストール

root

yarn install

e2e

cd e2e
yarn install

.envの作成

.env.sampleをコピーして.envを作成し、以下の環境変数を設定する。

NEXT_PUBLIC_RESAS_API_KEY=XXXXXXXXXXXXXXXX # RESAS APIのAPIキー
NEXT_PUBLIC_RESAS_API_URL=https://opendata.resas-portal.go.jp/api/v1

./e2e/cypress.env.json.sampleをコピーして ./e2e/cypress.config.tsを作成し、以下の環境変数を設定する。

{
  "RESAS_API_KEY":"XXXXXXXXXXXXXXXX" // RESAS APIのAPIキー
  "RESAS_API_URL":"https://opendata.resas-portal.go.jp/api/v1" // RESAS APIのURL
}

コマンド

devサーバー起動

yarn dev

build

yarn build

サーバー起動

yarn start

jestテスト --watch

yarn test

cypress UIを起動

yarn cypress

cypress headlessで実行

yarn cypress:headless

buildしたファイルでe2eテスト cypress UIを起動

yarn e2e

buildしたファイルでe2eテスト cypress headlessで実行

yarn e2e:headless

lint実行

yarn lint

prettierでソースを整形

yarn fmt

デプロイ

vercelにデプロイします。 git pushすると自動でデプロイされます。

https://population-transition-chart-zeta.vercel.app/

環境変数の設定

vercelの管理画面から環境変数を設定します。

NEXT_PUBLIC_RESAS_API_KEY=XXXXXXXXXXXXXXXX # RESAS APIのAPIキー
NEXT_PUBLIC_RESAS_API_URL=https://opendata.resas-portal.go.jp/api/v1 # RESAS APIのURL

githubの管理画面から環境変数を設定します。

NEXT_PUBLIC_RESAS_API_KEY=XXXXXXXXXXXXXXXX # RESAS APIのAPIキー
NEXT_PUBLIC_RESAS_API_URL=https://opendata.resas-portal.go.jp/api/v1 # RESAS APIのURL

CYPRESS_RESAS_API_KEY=XXXXXXXXXXXXXXXX # RESAS APIのAPIキー
CYPRESS_RESAS_API_URL=https://opendata.resas-portal.go.jp/api/v1 # RESAS APIのURL