Nx をつかって簡単fullstackアプリケーション開発してみた

こんにちは。エンジニア1年目のノグチです。アソビューのフロントエンドで使われているReact, TypeScript, Next.jsあたりの知識を深めるために、最近業務外でアプリケーションを作っています。今回は、その際に便利だったNxを中心に紹介してみたいと思います。(※アソビューの開発業務ではNxは使っておりませんが、モダンなfullstackアプリケーションを作るのに便利そうでしたので使ってみようと思いました！)

Nxとは

フロントエンド、バックエンドなどのパッケージをmonorepoとして扱い、Next.jsやStorybook、Cypress、Jest、ESList、Express、NestJSなどを追加して簡単にそして早くモダンなfullstack開発環境を構築、管理できるというものです。参考: Nx公式

今回作成したアプリケーションについて

クイズアプリを作ってみようとおもい、出来上がりのイメージのことをあれこれ考えずに済む某TBSのオールスター感謝祭風なものを作りました。

こちらがアプリケーションのBASE_URLです。

簡単な仕様

こちらのQiitaを参考にMonitor, Client, Adminの3画面を操作
Websocket(チャットアプリ等で使用されるリアルタイム双方向通信用技術)を使用
本家オールスター感謝祭の挙動

使い方

0. PCで "/admin/manage/" を開き、問題をFirebase Databaseに追加する

1. モニターなどの大きな画面で "/" を叩いてMonitor画面を表示

2. PCで "/admin" を叩いてAdmin画面を表示

3. スマホで "/auth" 叩いてGoogleログインを通し、 "/client" でClient画面を表示

4. Admin画面でMonitorとClient画面の操作を行う

使った技術やツール (* = アソビューの開発でも使用)

Nx
React*
TypeScript*
Material-UI*
Formik*
styled-components*
Framer Motion
Firebase*
Next.js*
NestJS
socket.io
Vercel
Heroku

実際に環境構築してみる

構築する環境: Next.js + React + TypeScript + NestJS

npx create-nx-workspace で任意のディレクトリにworkspace(monorepoのルートディレクトリ)を作成

ryoto.noguchi@63-78836 ~ % npx create-nx-workspace
npx: 48個のパッケージを3.65秒でインストールしました。
✔ Workspace name (e.g., org name)     · demo-workspace
✔ What to create in the new workspace · empty // この段階で使うフレームワークを選んでもOK
✔ Use Nx Cloud? (It's free and doesn't require registration.) · No>  NX  Nx is creating your workspace.To make sure the command works reliably in all environments, and that the preset is applied correctly,
  Nx will run "npm install" several times. Please wait.✔ Installing dependencies with npm
✔ Nx has successfully created the workspace.
ryoto.noguchi@63-78836 ~ %

2. yarn add @nrwl/nest @nrwl/react @nrwl/nextでNestJS、React、Next.jsを追加

ryoto.noguchi@63-78836 ~ % yarn add @nrwl/nest @nrwl/react @nwrl/next
yarn add v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
        // 省略 //
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
        // 省略 //
[4/4] 🔨  Building fresh packages... // babelだったりいろんなpackageをDL
success Saved lockfile.
success Saved 693 new dependencies.
        // 省略 // 
✨  Done in 32.56s.
ryoto.noguchi@63-78836 ~ %

3. nx g @nrwl/nest:app api で apiという名前のNestJS(バックエンド)のpackageを作成

4. nx g @nrwl/next:app frontend で frontend とい名前のNext.jsのpackageを作成

上記1~4までを実行すると↓のようにNext.js+NestJSのパッケージ構造ができます。DBが必要な場合はここにFirebaseを追加すれば、立派なfullstackアプリケーションの環境構築完成です(FirebaseのDBの追加はこちらのYoutubeを参考にしました)。ローカルを立ち上げる際にはフロントとバックエンド両方を起動する必要があるので、それぞれworkspace直下で nx run api:serve 、 nx run frontend:serve と実行すると http://locahost:4200でローカルを立ち上げられます！より詳細なセットアップ方法はこちらのYouTubeが参考になりました。