Remixドキュメント日本語版

English

クイックスタート

このガイドでは、できるだけ早くRemixアプリを実行するために必要な基本的な配管について説明します。さまざまなランタイム、デプロイターゲット、データベースを持つスターターテンプレートはたくさんありますが、ここではゼロからベアメタルのプロジェクトを作成します。

Remixプロジェクトを本格的に始める準備ができたら、コミュニティテンプレートから始めることを検討してください。テンプレートには、TypeScriptの設定、データベース、テストハーネス、認証などが含まれています。コミュニティテンプレートのリストは、Remix Resourcesページにあります。

インストール

バッテリー込みのRemixプロジェクトを初期化したい場合は、create-remix CLIを使用できます。

npx create-remix@latest

ただし、このガイドでは、CLIがプロジェクトをセットアップするために実行するすべての操作を説明します。CLIを使用する代わりに、次の手順に従うことができます。Remixを初めて使用する場合は、このガイドに従って、Remixアプリを構成するさまざまなパーツを理解することをお勧めします。

mkdir my-remix-app
cd my-remix-app
npm init -y
 
# ランタイム依存関係をインストール
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom
 
# 開発依存関係をインストール
npm i -D @remix-run/dev vite

Vite設定

touch vite.config.js

RemixはViteを使用するため、Remix Viteプラグインを含むVite設定を提供する必要があります。必要な基本的な設定を次に示します。

vite.config.js
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
 
export default defineConfig({
  plugins: [remix()],
});

ルートルート

mkdir app
touch app/root.jsx

app/root.jsxは、私たちが「ルートルート」と呼ぶものです。これは、アプリ全体のルートレイアウトです。すべてのプロジェクトに必要な基本的な要素を次に示します。

app/root.jsx
import {
  Links,
  Meta,
  Outlet,
  Scripts,
} from "@remix-run/react";
 
export default function App() {
  return (
    <html>
      <head>
        <link
          rel="icon"
          href="data:image/x-icon;base64,AA"
        />
        <Meta />
        <Links />
      </head>
      <body>
        <h1>Hello world!</h1>
        <Outlet />
 
        <Scripts />
      </body>
    </html>
  );
}

ビルドと実行

最初に、アプリを本番環境用にビルドします。

npx remix vite:build

これで、buildフォルダに、serverフォルダ（アプリのサーバーバージョン）とclientフォルダ（ブラウザバージョン）が作成され、そこにビルドアーティファクトが含まれます。（これはすべて構成可能です。）

👉 remix-serveでアプリを実行する

最初に、package.jsonでタイプをmoduleに指定する必要があります。そうすることで、remix-serveがアプリを実行できるようになります。

package.json
{
  "type": "module"
  // ...
}

これで、remix-serveでアプリを実行できます。

# ダッシュに注意！
npx remix-serve build/server/index.js

http://localhost:3000を開くと、「hello world」ページが表示されます。

node_modules内の大量のコードを除けば、Remixアプリは単一のファイルのみです。

├── app/
│   └── root.jsx
└── package.json
└── vite.config.js

独自のサーバーを用意する

remix vite:buildによって作成されたbuild/serverディレクトリは、単なるモジュールです。これは、Express、Cloudflare Workers、Netlify、Vercel、Fastly、AWS、Deno、Azure、Fastify、Firebaseなど、サーバー内で実行します。...どこでも。

独自のサーバーをセットアップしたくない場合は、remix-serveを使用できます。これは、Remixチームが保守するシンプルなexpressベースのサーバーです。ただし、Remixは、どのJavaScript環境でも実行できるように設計されているため、スタックを所有できます。多くの場合、特に本番環境のアプリでは、独自のサーバーを持つことが期待されます。この点については、Runtimes、Adapters、and Stacksで詳しく説明しています。

ちょっとした実験として、remix-serveの使用をやめて、代わりにexpressを使用してみましょう。

👉 Express、Remix Expressアダプター、および本番モードで実行するためのcross-envをインストールする

npm i express @remix-run/express cross-env
 
# これ以上は使用しない
npm uninstall @remix-run/serve

👉 Expressサーバーを作成する

touch server.js
server.js
import { createRequestHandler } from "@remix-run/express";
import express from "express";
 
// `remix vite:build`の結果は「単なるモジュール」であることに注意
import * as build from "./build/server/index.js";
 
const app = express();
app.use(express.static("build/client"));
 
// アプリも「単なるリクエストハンドラー」です
app.all("*", createRequestHandler({ build }));
 
app.listen(3000, () => {
  console.log("App listening on http://localhost:3000");
});

👉 expressでアプリを実行する

node server.js

これでサーバーを所有したため、サーバーが備えているツールを使用してアプリをデバッグできます。たとえば、Node.js inspectフラグを使用して、chrome devtoolsでアプリを検査できます。

node --inspect server.js

開発ワークフロー

サーバーを停止、再ビルド、起動を繰り返すのではなく、Viteミドルウェアモードを使用してRemixを開発モードで実行できます。これにより、React Refresh（ホットモジュール置換）とRemix Hot Data Revalidationを使用して、アプリの変更に対する即時のフィードバックが可能になります。

まず、便宜上、package.jsonにdevとstartコマンドを追加します。これらは、それぞれ開発モードと本番モードでサーバーを実行します。

👉 package.jsonに「scripts」エントリを追加する

package.json
{
  "scripts": {
    "dev": "node ./server.js",
    "start": "cross-env NODE_ENV=production node ./server.js"
  }
  // ...
}

👉 サーバーにVite開発ミドルウェアを追加する

process.env.NODE_ENVが"production"に設定されている場合は、Viteミドルウェアは適用されません。この場合は、前述のように、通常のビルド出力を実行し続けます。

server.js
import { createRequestHandler } from "@remix-run/express";
import express from "express";
 
const viteDevServer =
  process.env.NODE_ENV === "production"
    ? null
    : await import("vite").then((vite) =>
        vite.createServer({
          server: { middlewareMode: true },
        })
      );
 
const app = express();
app.use(
  viteDevServer
    ? viteDevServer.middlewares
    : express.static("build/client")
);
 
const build = viteDevServer
  ? () =>
      viteDevServer.ssrLoadModule(
        "virtual:remix/server-build"
      )
  : await import("./build/server/index.js");
 
app.all("*", createRequestHandler({ build }));
 
app.listen(3000, () => {
  console.log("App listening on http://localhost:3000");
});

👉 開発サーバーを起動する

npm run dev

これで、アプリをすぐにフィードバックを得ながら操作できます。試してみてください。root.jsxのテキストを変更して、変化を見てみましょう！

サーバーとブラウザのエントリを制御する

Remixでは、ほとんどのアプリでは触る必要のない、デフォルトのマジックファイルを使用しています。しかし、Remixのサーバーとブラウザへのエントリポイントをカスタマイズしたい場合は、remix revealを実行すると、これらのファイルがプロジェクトにダンプされます。

npx remix reveal
Entry file entry.client created at app/entry.client.tsx.
Entry file entry.server created at app/entry.server.tsx.

まとめ

おめでとうございます。Remixを履歴書に追加できます！要約すると、次のようなことを学びました。

  • Remixはアプリを2つのものに変換します。
    • 独自のJavaScriptサーバーに追加するリクエストハンドラー
    • ブラウザ用のパブリックディレクトリにある静的資産の山
  • アダプターを使用して独自のサーバーを用意して、どこでもデプロイできます。
  • HMRが組み込まれた開発ワークフローをセットアップできます。

一般的に、Remixは少し「ガッツ」があります。少しのボイラープレートを記述するだけで、スタックを所有できます。

次は？