Remix.run如何按部署环境配置API基础URL？求更优方案

我正在使用Remix.run框架，需要根据部署环境（开发、预发布、生产等）为API配置不同的基础URL。在非Remix项目中，我会用.env文件结合CI/CD构建脚本实现，但Remix对.env的处理不同——根据官方说明，Remix编译器不识别多个.env文件，需在服务端完成环境检测，若要传给前端，可在root.tsx挂载到window对象。

我当前的实现是通过域名匹配环境：

const envData = [
  { url: 'https://dev-example.com/', apiBase: 'https://dev-api-example.com/', name: 'developement' },
  { url: 'https://stg-example.com/', apiBase: 'https://stg-api-example.com/', name: 'staging' },
  { url: 'https://rc-example.com/', apiBase: 'https://rc-api-example.com/', name: 'release-candidate' },
  { url: 'https://example.com/', apiBase: 'https://api-example.com/', name: 'production' },
];

export const getBaseApi = (domain) => {
  ...
  return envData.find((item) => item.url === domain)
}

每个页面的loader里调用该函数，把结果传给API调用：

export const loader: LoaderFunction = async ({ request }) => {
  const apiBase = getBaseApi(new URL(request.url).hostname);
  const userSession = await getUserSession(apiBase);
  const myData = await myApiCall(somedata, userSession, apiBase);
  ...

前端则通过window.API_BASE_URL传递给API函数：

export default function Favorite() {
  const { userSession, favList } = useLoaderData();

  return (
    <section>
      <div className="px-4">
        <FavList
          list={favList}
          isLogin={userSession.login}
          getList={() => getFavorites(userSession.token, window.API_BASE_URL)}
          toogleFav={(id) =>
            setFavorite(id, userSession.token, window.API_BASE_URL)
          }
        />
      </div>
    </section>
  );
}

这个方案能运行，但不够简洁易维护，想知道我的理解是否正确，有没有更优的解决方案？

1. 放弃域名匹配，直接用环境变量配置 #

Remix支持通过环境变量注入配置，不管是本地开发还是CI/CD部署，都可以给不同环境设置对应的API_BASE_URL：

• 本地开发：可以在单个.env文件中设置，或者在package.json的启动脚本里直接指定：

  "scripts": {
    "dev": "API_BASE_URL=https://dev-api-example.com/ remix dev",
    "build:stg": "API_BASE_URL=https://stg-api-example.com/ remix build",
    "start:stg": "API_BASE_URL=https://stg-api-example.com/ remix start"
  }
  

• CI/CD部署：直接在部署平台的环境变量配置项中设置对应环境的API_BASE_URL即可。

服务端代码里直接使用process.env.API_BASE_URL，不需要再写域名匹配的逻辑：

export const loader: LoaderFunction = async ({ request }) => {
  const apiBase = process.env.API_BASE_URL;
  const userSession = await getUserSession(apiBase);
  const myData = await myApiCall(somedata, userSession, apiBase);
  // 其他逻辑
}

2. 统一给前端注入API基础URL #

不需要每个组件都依赖window.API_BASE_URL，可以在root.tsx的loader里统一返回API_BASE_URL，然后通过useRouteLoaderData在任意组件中获取：

• root.tsx的loader：

  export const loader = () => {
    return json({
      apiBase: process.env.API_BASE_URL
    });
  };
  

• 业务组件中使用：

  import { useRouteLoaderData } from "@remix-run/react";
  
  export default function Favorite() {
    const { userSession, favList } = useLoaderData();
    const { apiBase } = useRouteLoaderData("root") as { apiBase: string };
  
    return (
      <section>
        <div className="px-4">
          <FavList
            list={favList}
            isLogin={userSession.login}
            getList={() => getFavorites(userSession.token, apiBase)}
            toogleFav={(id) => setFavorite(id, userSession.token, apiBase)}
          />
        </div>
      </section>
    );
  }
  

3. 封装API调用工具，彻底消除重复传参 #

把所有API调用封装到统一的工具文件中，初始化时传入API_BASE_URL，之后调用API就不需要再传基础URL：

• 创建~/api/client.ts：

  let apiBase = "";
  
  export const initApiBase = (baseUrl: string) => {
    apiBase = baseUrl;
  };
  
  export const getFavorites = async (token: string) => {
    const res = await fetch(`${apiBase}/favorites`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    return res.json();
  };
  
  export const setFavorite = async (id: string, token: string) => {
    const res = await fetch(`${apiBase}/favorites/${id}`, {
      method: "POST",
      headers: { Authorization: `Bearer ${token}` }
    });
    return res.json();
  };
  

• 在root.tsx中初始化API基础URL：

  import { useEffect } from "react";
  import { useRouteLoaderData } from "@remix-run/react";
  import { initApiBase } from "~/api/client";
  
  export default function App() {
    const { apiBase } = useRouteLoaderData("root") as { apiBase: string };
  
    useEffect(() => {
      initApiBase(apiBase);
    }, [apiBase]);
  
    return (
      <html>
        {/* 页面内容 */}
      </html>
    );
  }
  

• 业务组件中简化调用：

  import { getFavorites, setFavorite } from "~/api/client";
  
  export default function Favorite() {
    const { userSession, favList } = useLoaderData();
  
    return (
      <section>
        <div className="px-4">
          <FavList
            list={favList}
            isLogin={userSession.login}
            getList={() => getFavorites(userSession.token)}
            toogleFav={(id) => setFavorite(id, userSession.token)}
          />
        </div>
      </section>
    );
  }
  

关于你的理解纠正 #

你对Remix环境变量的处理逻辑理解是对的，但不需要通过域名匹配来区分环境——直接用环境变量就能实现不同部署环境的配置隔离，比域名匹配更简洁，也更符合CI/CD的最佳实践。

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