部署 Remix 應用程式有四個層級
@remix-run/express
的伺服器轉接器根據您的 Web 主機,您可能會擁有較少的層級。例如,部署到 Cloudflare Pages 會一次處理 2、3 和 4。在 Express 應用程式中部署 Remix 會包含所有四個層級,而使用「Remix 應用程式伺服器」則會合併 2 和 3!
您可以自己將所有這些組合起來,或從 Remix 範本開始。
讓我們來談談每個部分的作用。
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 應用程式伺服器是新專案、修補或對伺服器沒有任何特定需求(例如 Express)且部署到 Node.js 環境的專案的基本 Express 伺服器。
請參閱 @remix-run/serve
Remix 的設計極具彈性,僅在將 UI 連接到後端方面提供足夠的建議,但對於您使用的資料庫、如何快取資料,或應用程式部署的位置和方式則沒有任何意見。
Remix 範本是應用程式開發的起點,其中包含了社群所建立的上述額外建議。
您可以使用 Remix CLI 中的 --template
標誌,指向 GitHub 上的儲存庫來使用範本
npx create-remix@latest --template <org>/<repo>
您可以在範本指南中閱讀更多關於範本的資訊。
一旦您選擇了一個範本或從頭設定一個應用程式,您就可以開始構建您的應用程式了!