React Router v7 已發布。 查看文件
執行環境、轉接器、樣板與部署
本頁面內容

執行環境、轉接器、範本和部署

部署 Remix 應用程式有四個層級

  1. 像是 Node.js 的 JavaScript 執行環境
  2. 像是 Express.js 的 JavaScript Web 伺服器
  3. 像是 @remix-run/express 的伺服器轉接器
  4. Web 主機或平台

根據您的 Web 主機,您可能會擁有較少的層級。例如,部署到 Cloudflare Pages 會一次處理 2、3 和 4。在 Express 應用程式中部署 Remix 會包含所有四個層級,而使用「Remix 應用程式伺服器」則會合併 2 和 3!

您可以自己將所有這些組合起來,或從 Remix 範本開始。

讓我們來談談每個部分的作用。

JavaScript 執行環境

Remix 可以部署到任何 JavaScript 執行環境,像是 Node.js、Shopify Oxygen、Cloudflare Workers/Pages、Fastly Compute、Deno、Bun 等等。

每個執行環境對 Remix 建構所依賴的標準 Web API 的支援程度不同,因此需要 Remix 執行環境套件來填補執行環境中任何遺失的功能。這些填補包含 Web 標準 API,像是 Request、Response、crypto 等等。這讓您可以在伺服器上使用與瀏覽器中相同的 API。

以下執行環境套件可用

您在應用程式中互動的大部分 API 並非直接從這些套件匯入,因此您的程式碼在執行環境之間具有相當高的可移植性。然而,您偶爾會從這些套件匯入某些東西,以用於非標準 Web API 的特定功能。

例如,您可能會想在檔案系統或 Cloudflare KV 儲存體中儲存 Cookie。這些是執行環境的特定功能,其他執行環境無法共用

// store sessions in cloudflare KV storage
import { createWorkersKVSessionStorage } from "@remix-run/cloudflare";

// store sessions on the file system in node
import { createFileSessionStorage } from "@remix-run/node";

但如果您將工作階段儲存在 Cookie 本身中,則所有執行環境都支援此功能

import { createCookieSessionStorage } from "@remix-run/node"; // or cloudflare/deno

轉接器

Remix 不是 HTTP 伺服器,而是在現有的 HTTP 伺服器內部的處理常式。轉接器允許 Remix 處理常式在 HTTP 伺服器內部執行。某些 JavaScript 執行環境,尤其是 Node.js,有多種方式可以建立 HTTP 伺服器。例如,在 Node.js 中,您可以使用 Express.js、fastify 或原始的 http.createServer

這些伺服器都有自己的 Request/Response API。轉接器的作用是將傳入的要求轉換為 Web Fetch Request,執行 Remix 處理常式,然後將 Web Fetch Response 轉回主機伺服器的回應 API。

以下是一些說明流程的虛擬碼。

// import the app build created by `remix build`
import build from "./build/index.js";

// an express http server
const app = express();

// and here your Remix app is "just a request handler"
app.all("*", createRequestHandler({ build }));

// This is pseudo code, but illustrates what adapters do:
export function createRequestHandler({ build }) {
  // creates a Fetch API request handler from the server build
  const handleRequest = createRemixRequestHandler(build);

  // returns an express.js specific handler for the express server
  return async (req, res) => {
    // adapts the express.req to a Fetch API request
    const request = createRemixRequest(req);

    // calls the app handler and receives a Fetch API response
    const response = await handleRequest(request);

    // adapts the Fetch API response to the express.res
    sendRemixResponse(res, response);
  };
}

Remix 應用程式伺服器

為了方便起見,Remix 應用程式伺服器是新專案、修補或對伺服器沒有任何特定需求(例如 Express)且部署到 Node.js 環境的專案的基本 Express 伺服器。

請參閱 @remix-run/serve

範本

Remix 的設計極具彈性,僅在將 UI 連接到後端方面提供足夠的建議,但對於您使用的資料庫、如何快取資料,或應用程式部署的位置和方式則沒有任何意見。

Remix 範本是應用程式開發的起點,其中包含了社群所建立的上述額外建議。

您可以使用 Remix CLI 中的 --template 標誌,指向 GitHub 上的儲存庫來使用範本

npx create-remix@latest --template <org>/<repo>

您可以在範本指南中閱讀更多關於範本的資訊。

一旦您選擇了一個範本或從頭設定一個應用程式,您就可以開始構建您的應用程式了!

文件和範例依據 MIT