Zenn
Open5

monorepo管理 nx 初心者がメモしている

Docker
#
tutorial
Nx
#
study
makomako

monorepo管理のnxがすこぶる良さそうな気がしている。

最近AWSのAmplifyもNext.jsのホスティングに対応したみたいで、今後の環境ベースとして検討できる。

Nx を使用すると、新しいスタンドアロンプロジェクトやモノリポジトリ全体をすばやくスキャフォールディングすることができます。

もう最近のフロントの開発のメタが決まっている気がしていて、そのレポジトリをスキャフォールドで作ってくれるのめっちゃありがたい。

全体的にメモはunder constructionなので、足りない部分は僕も足したいのでコメントいただければ。

makomako

インストールと Docker起動化

チュートリアルの

npm create nx-workspace

をまず実行してみたい。

ローカルにnpmの環境を用意はしていないのでdockerを利用する
（ /folder/to/dev はご自身の環境に適宜読み替えてください）

cd /folder/to/dev
docker run -v "/folder/to/dev:/app" -it node:latest /bin/bash

Docker内でnxのコマンド npm create nx-workspace を実行する

root@43770e9dd4f4:/# cd app
root@43770e9dd4f4:/app# npm create nx-workspace

 >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Where would you like to create your workspace? · nxtest
✔ Which stack do you want to use? · react
✔ What framework would you like to use? · nextjs
✔ Standalone project or integrated monorepo? · standalone
✔ Would you like to use the App Router (recommended)? · Yes
✔ Default stylesheet format · css
✔ Enable distributed caching to make your CI faster · No

 >  NX   Creating your v16.5.2 workspace.
中略
 >  NX   First time using Nx? Check out this interactive Nx tutorial.

   https://nx.dev/react-tutorial/1-code-generation

終わったみたい。

できたファイルを確認してみる

root@da72b11c03e6:/app# cd nxtest/
root@da72b11c03e6:/app/nxtest# ls
README.md  index.d.ts	   next-env.d.ts   nx.json	      project.json   tsconfig.spec.json
app	   jest.config.ts  next.config.js  package-lock.json  public
e2e	   jest.preset.js  node_modules    package.json       tsconfig.json

色々出来てる

ところでdockerのコマンドでVolumeをホスト側とローカル側で共有していた。
よって生成されたファイルがローカル側にもファイルがSyncされた。
ここにファイルを２つ加えてnx環境の起動をdockerに任せる。

root@da72b11c03e6:/app/nxtest# exit

cd nxtest
touch Dockerfile
touch docker-compose.yml
Dockerfile
FROM node:latest
WORKDIR /app/nxtest
COPY . .
RUN npm install
# 後で使用するポート
EXPOSE 4200
docker-compose.yml
version: '3'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 4200:4200
    volumes:
      - .:/app/nxtest
      - project_node_modules:/app/nxtest/node_modules
    command: npx nx serve nxtest

volumes:
  project_node_modules:

Dockerとして起動。

docker-compose up
Attaching to nxtest-app-1
nxtest-app-1  |
nxtest-app-1  | > nx run nxtest:serve:development
nxtest-app-1  |
nxtest-app-1  | - ready started server on 0.0.0.0:4200, url: http://localhost:4200

おっ！ http://localhost:4200 へアクセスする。
（こっそり4200ポートあけてるやないかい！そのとおりですｗ）

いいね！
一旦整った。すごい楽。

makomako

nxの最初につまづいた用語の概念について整理する

  • workspace
    • ルートフォルダの名前？
  • project
    • 自動的に作られたappフォルダのこと？
makomako
  • Task Executor
  • Code Generator
    あたりの使い道を考えてみたい。
makomako

結局どう使っていくのか？ のパターンを作りたい
（コマンド叩くのはVS Codeのnx consoleプラグインが良さそう）