Remix 2.3开发时修改文件后remix-serve端口自动变更问题求助

问题场景 #

从Remix 1.4升级到2.3后，执行npm run dev启动服务时端口随机分配，修改任意文件触发热重载后，remix-serve会切换到新的随机端口，导致开发过程中需要频繁更新访问地址。

当前package.json脚本配置：

"scripts": {
  "build": "remix build",
  "dev": "remix dev",
  "start": "remix-serve build",
  "test": "jest",
  "typecheck": "tsc"
}

解决方案 #

方法1：在dev脚本中指定固定端口 #

修改package.json里的dev命令，添加--port参数指定固定端口（示例用3000，可按需调整）：

"scripts": {
  "build": "remix build",
  "dev": "remix dev --port 3000",
  "start": "remix-serve build",
  "test": "jest",
  "typecheck": "tsc"
}

配置后，每次启动服务和触发热重载时，都会固定使用http://localhost:3000，不再随机切换端口。

方法2：在remix.config.js中配置固定端口 #

若不想修改脚本，可在项目根目录的remix.config.js中添加serverPort配置项：

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  serverPort: 3000,
  // 保留原有其他配置
};

保存配置后重启开发服务，端口将固定为指定值。

原理说明 #

Remix 2.x版本中，remix dev命令默认会让后端的remix-serve随机选择可用端口，而1.4版本默认复用固定端口。通过显式指定端口，可强制服务在热重载时复用同一端口，解决端口频繁变化的问题。

内容的提问来源于stack exchange，提问作者That dude