ガントチャート

Notion | 個人開発

---

LightHouse

本番環境 計測結果

システム全体図

Next.js 内部構成（予想）

Web アプリケーションの 3 層構造に基づいて
Next.js の内部構造を予想してそれを「見える化」してみる

Next.js では、データベースサーバーまではデフォルトで搭載されていないので
もしデータベースサーバーを使用したいなら
手動で「RDBMS」か「NoSQL」のどちらかを導入する必要がある

---

環境変数

環境変数は 3 つ用意する

環境名	環境変数	説明	ブランチ
本番環境	production	本番環境	master
ステージング環境	staging	ステージング環境	develop
開発環境	development	ローカル開発環境	feature/〇〇

---

ステージング環境・本番環境の URL

環境名	URL
本番環境	https://www.riot-ec-site.com/
ステージング環境	https://personal-development-client-git-develop-kimuniiii.vercel.app/sample/vercel

ステージング環境の URL は、develop ブランチへ push する毎に新しいドメインを発行するが
上記で添付した URL なら、ドメインは固定されているため、常に最新の情報が反映されるはず

---

Storybook のデプロイ環境

• Storybook の GitHub Pages へ自動デプロイを設定
• GitHub に push と同時に生成された Storybook の静的ファイルが gh-pages ブランチに自動デプロイされる
• なので、常に最新の状態の Storybook が下記 URL で確認できる

Storybook | デプロイ環境

---

フロントエンドのデプロイ環境

• フロントエンドのデプロイ先は「Vercel」を選択
• Vercel は ZEIT 社が提供するフロントエンド向けのホスティングサービスです

フロントエンド | デプロイ環境

---

バックエンドのデプロイ環境

• バックエンドのデプロイ先は「Heroku」を選択（予定）
• Heroku は Salesforce 社が提供する「インフラ管理不要な PaaS」です

環境名	URL
開発環境	https://riot-ec-site-staging.herokuapp.com/console
ステージング環境	https://riot-ec-site-staging.herokuapp.com/console
本番環境	https://riot-ec-site.herokuapp.com/console

• エンドポイントの「Hasura Console」にアクセスするには「パスワード」が必要になります
• もし仮にアクセスしたい場合は「木村」に「パスワード」を聞きに来てください

---

バックエンドのローカル環境（廃止）

• Hasura を Docker で立ち上げている
• Docker Desktop を ON にした上で以下のコマンドを叩く

# コンテナを立ち上げて起動する
yarn server start

# コンテナが起動しているか確認する
yarn server ps

Hasura GraphQL Engine を Docker コンテナー環境で動かす（廃止）

バックエンド | ローカル環境

上記工程で、ローカル環境上で Hasura のコンソール画面を見ることができます

---

技術選定（暫定）

Backend

• TypeScript
• GraphQL Server
• Hasura
• NestJS（暫定）
• Prisma（暫定）

Frontend

• React
• React Hook Form
• TypeScript
• Next.js
• GraphQL Code Generator
• Apollo Client
• Emotion
• ESLint
• Prettier
• Husky
• lint-staged
• Renovate

PaaS

• Vercel
• Heroku

SaaS

• Auth0

Other

• yarn workspace
• Storybook
• GitHub Actions
• Docker / Docker Compose