Turborepoで複数のRemixアプリを同時に開発するためのport設定

TurborepoでRemixのアプリを複数用意するみたいなプロジェクトでちょっと細かい設定が必要だったのでここに書いていこうと思います。

なにが必要なのか

portがかぶらない用に注意する必要があります。
このportに2種類あります

devServerPortの設定
必要であればRemix App ServerのPortの設定を行う

この２つの設定がひつようになります。
プロジェクトを作成するところから順を追って説明します。

基礎から学ぶ React/React Hooks

amazon.co.jp

まずはTurborepoのプロジェクト作る

まずはTurborepoのプロジェクトを作ります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


$ pnpm dlx create-turbo@latest

.../Library/pnpm/store/v3/tmp/dlx-37296  | +143 ++++++++++++++
.../Library/pnpm/store/v3/tmp/dlx-37296  | Progress: resolved 143, reused 140, downloaded 3, added 143, done

>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Where would you like to create your turborepo? turborepo-remix-example
? Which package manager do you want to use? pnpm

Downloading files. This might take a moment.

>>> Created a new Turborepo with the following:

apps
 - apps/docs
 - apps/web
packages
 - packages/eslint-config-custom
 - packages/tsconfig
 - packages/ui

不必要なapps内のディレクトリを削除する

web, docsは今回は必要ないので削除しておきます。

1
2


$ rm -rf apps/web
$ rm -rf apps/docs

remixのアプリを複数用意する

site
admin

という複数のアプリを用意します。

1
2


$ pnpm dlx create-remix@latest site
$ pnpm dlx create-remix@latest admin

これで apps/(admin|site)　という形でプロジェクトファイルが作られていると思います。

それぞれのディレクトリにpackage.jsonが作成されていると思いますが name のプロパティが定義されていないため、このまま pnpm dev を実行してもエラーになります。そのため、nameを指定しましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


// apps/site/package.json
{
  "name": "site",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^1.15.0",
    "@remix-run/react": "^1.15.0",
    "@remix-run/serve": "^1.15.0",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.15.0",
    "@remix-run/eslint-config": "^1.15.0",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "eslint": "^8.38.0",
    "typescript": "^4.9.5"
  },
  "engines": {
    "node": ">=14"
  }
}

apps/admin/package.json も修正します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


// apps/admin/package.json
{
  "name": "admin",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^1.15.0",
    "@remix-run/react": "^1.15.0",
    "@remix-run/serve": "^1.15.0",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.15.0",
    "@remix-run/eslint-config": "^1.15.0",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "eslint": "^8.38.0",
    "typescript": "^4.9.5"
  },
  "engines": {
    "node": ">=14"
  }
}

とりあえずremixを動かしてみる

この状態でプロジェクトルートに戻り pnpm dev を実行してみましょう。

1
2
3
4
5
6


$ pnpm dev


docs:dev: ready - started server on 0.0.0.0:3001, url: http://localhost:3001
web:dev: ready - started server on 0.0.0.0:3000, url: http://localhost:3000
admin:dev: Error: listen EADDRINUSE: address already in use :::8002

8002番ポートがかぶって起動できないというエラーになります。 Remix App Serverはportがかぶっていると自動的に別のポートで起動しますが、devServerPortは自動で切り替わりません。

devServerPortの設定を変更する。

devServerPortを変更するにはremix.config.jsでポートを指定するだけです。ためしに apps/admin/remix.config.js でポートを8003番に設定してみましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
  devServerPort: 8003
};

これでもう一度 pnpm dev を実行します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


$ turbo run dev

╭──────────────────────────────────────────────────────────────────────╮
│                                                                      │
│                   Update available v1.8.8 ≫ v1.9.3                   │
│    Changelog: https://github.com/vercel/turbo/releases/tag/v1.9.3    │
│              Run "npx @turbo/codemod update" to update               │
│                                                                      │
│     Follow @turborepo for updates: https://twitter.com/turborepo     │
╰──────────────────────────────────────────────────────────────────────╯
• Packages in scope: admin, eslint-config-custom, site, tsconfig, ui
• Running dev in 5 packages
• Remote caching disabled
admin:dev: cache bypass, force executing d977accb1f6a8b12
site:dev: cache bypass, force executing 7503cead1776878d
site:dev:
admin:dev:
admin:dev: > admin@ dev /home/polidog/ghq/github.com/polidog/turborepo-remix-example/apps/admin
admin:dev: > remix dev
admin:dev:
site:dev: > site@ dev /home/polidog/ghq/github.com/polidog/turborepo-remix-example/apps/site
site:dev: > remix dev
site:dev:
admin:dev: Remix App Server started at http://localhost:3001 (http://192.168.1.16:3001)
site:dev: Remix App Server started at http://localhost:3000 (http://192.168.1.16:3000)

今度は無事に起動できました。

Remix App ServerのPortの設定を行う

Remix App Serverはポートをよしなに変えて起動できますが、それでも一応ポートを固定したくなると思います。

apps	port
site	3001
admin	3002

みたいな形にポートを固定させてみます。それぞれのpackages.jsonで "dev": "remix dev" の部分でポートを指定します。まずは「apps/site/package.json」を変更しましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


{
  "name": "site",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev --port 3001",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^1.15.0",
    "@remix-run/react": "^1.15.0",
    "@remix-run/serve": "^1.15.0",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.15.0",
    "@remix-run/eslint-config": "^1.15.0",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "eslint": "^8.38.0",
    "typescript": "^4.9.5"
  },
  "engines": {
    "node": ">=14"
  }
}

次に「apps/admin/package.json」を変更しましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


{
  "name": "admin",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev --port 3002",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^1.15.0",
    "@remix-run/react": "^1.15.0",
    "@remix-run/serve": "^1.15.0",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.15.0",
    "@remix-run/eslint-config": "^1.15.0",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "eslint": "^8.38.0",
    "typescript": "^4.9.5"
  },
  "engines": {
    "node": ">=14"
  }
}

これで各アプリのポートが固定できました。

Remix App ServerとdevServerPortをあわせておくといいかも？

特に理由はないんですが、Remix App ServerとdevServerPortをあわせておくといいかなと思いました。

apps	Remix App Server port	devServerPort
site	3001	8001
admin	3002	8002

上記の用にRemix App Serverは300x、devSeverPortは800xとするみたいなルールを決めておくとトラブルが少ないかもしれません。

まとめ

remixアプリが複数あるとdevServerPortが被って起動しない
remix.config.jsでdevSeverPortのポートを変更する

今回のサンプルコードはこちらに用意してあります。
polidog/turborepo-remix-example

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発