T-CREATOR

Remix 最短セットアップ：初期化から初デプロイまで 10 分で完走する手順

Remix 最短セットアップ：初期化から初デプロイまで 10 分で完走する手順

Remix は React ベースのフルスタックフレームワークとして、モダンな Web 開発において注目を集めています。しかし、初めて使う方にとってはセットアップから実際のデプロイまでの手順が複雑に感じられることも少なくありません。

この記事では、Remix プロジェクトの初期化から初回デプロイまでを、わずか 10 分で完了できる最短手順をご紹介いたします。余計な設定や複雑な手順は省略し、すぐに動作する Web アプリケーションを立ち上げることに焦点を当てました。

これから Remix を始める方や、素早くプロトタイプを作成したい方にとって、きっとお役に立てるでしょう。

事前準備

必要な環境とツール

Remix プロジェクトを最短で立ち上げるために、以下の環境とツールが必要です。

#項目必要なバージョン確認コマンド
1Node.js18.0.0 以上node --version
2Yarn1.22.0 以上yarn --version
3Git2.0.0 以上git --version

Node.js の環境管理には nvm や nodenv を使用されることをお勧めします。Yarn がインストールされていない場合は、以下のコマンドでインストールできます。

javascript# Yarn のインストール（npm 経由）
npm install -g yarn

前提条件の確認

セットアップを開始する前に、以下の前提条件を満たしているか確認しましょう。

次のコマンドを実行して、必要なツールがすべて利用可能であることを確認してください。

bash# 環境確認コマンド
echo "Node.js: $(node --version)"
echo "Yarn: $(yarn --version)"
echo "Git: $(git --version)"

すべてのバージョンが表示されれば、準備は完了です。次のステップに進みましょう。

ステップ 1：Remix プロジェクトの初期化

create-remix コマンドの実行

Remix プロジェクトの初期化は、公式の create-remix コマンドを使用することで簡単に行えます。

以下のコマンドを実行してプロジェクトを作成しましょう。

bash# Remix プロジェクトの作成
yarn create remix my-remix-app

このコマンドを実行すると、対話式のセットアップが開始されます。各質問に対する推奨回答は以下の通りです。

テンプレート選択

create-remix コマンド実行時に表示される選択肢と、10 分セットアップに最適な回答をご紹介します。

bash# セットアップ時の質問と推奨回答
? Where would you like to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment targets.
→ Remix App Server を選択

? TypeScript or JavaScript?
→ TypeScript を選択（型安全性のため）

? Do you want me to run `yarn install`?
→ Yes を選択（依存関係の自動インストール）

次の図は、Remix プロジェクト作成時の全体的なフローを示しています。

mermaidflowchart TD
    start["yarn create remix"] --> choice["テンプレート選択"]
    choice --> server["Remix App Server"]
    server --> lang["TypeScript 選択"]
    lang --> install["yarn install 実行"]
    install --> done["プロジェクト作成完了"]

選択が完了すると、自動的に依存関係のインストールが開始され、数分でプロジェクトの初期化が完了します。

ステップ 2：初期設定とカスタマイズ

依存関係の確認

プロジェクトが作成されたら、まずディレクトリに移動して依存関係を確認しましょう。

bash# プロジェクトディレクトリに移動
cd my-remix-app

# 依存関係の確認
yarn list --depth=0

Remix プロジェクトには以下の主要な依存関係が含まれています。

#パッケージ名役割バージョン例
1@remix-run/nodeサーバーサイド実行環境^2.0.0
2@remix-run/reactReact 統合^2.0.0
3@remix-run/serve開発サーバー^2.0.0
4reactUI ライブラリ^18.0.0
5typescript型システム^5.0.0

基本設定の調整

最短セットアップでは、デフォルト設定をそのまま使用しますが、remix.config.js の内容を確認しておきましょう。

typescript// remix.config.js の基本設定
import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
  ],
});

この設定ファイルには Vite との統合設定と、将来のバージョンへの対応フラグが含まれています。初期設定では変更の必要はありません。

ステップ 3：ローカル開発環境の起動

開発サーバーの起動

Remix の開発サーバーを起動して、アプリケーションが正常に動作することを確認しましょう。

bash# 開発サーバーの起動
yarn dev

このコマンドを実行すると、以下のような出力が表示されます。

bash# 開発サーバー起動時の出力例
 💿 Building...
 💿 Built in 1.2s

Remix App Server started at http://localhost:3000 (http://192.168.1.100:3000)

動作確認

ブラウザで http:​/​​/​localhost:3000 にアクセスして、Remix のウェルカムページが表示されることを確認してください。

正常に動作している場合、以下の要素が含まれたページが表示されます。

  • Remix のロゴ
  • ウェルカムメッセージ
  • ドキュメントへのリンク
  • サンプルコードの例

開発サーバーは Hot Reload に対応しているため、ファイルを編集すると自動的にブラウザが更新されます。次のステップでは、このアプリケーションをデプロイする準備を行います。

ステップ 4：デプロイの準備

ビルド設定の確認

デプロイ前に、本番環境用のビルドが正常に実行できることを確認しましょう。

bash# 本番ビルドの実行
yarn build

ビルドが成功すると、以下のようなファイルが build ディレクトリに生成されます。

bash# ビルド後のディレクトリ構造
build/
├── client/          # クライアントサイドのアセット
├── server/          # サーバーサイドのコード
└── assets/          # 静的ファイル（CSS、画像など）

環境変数の設定

本番環境で必要な環境変数を設定します。プロジェクトルートに .env ファイルを作成しましょう。

bash# .env ファイルの作成
touch .env

基本的な環境変数の設定例は以下の通りです。

bash# .env ファイルの内容
NODE_ENV=production
SESSION_SECRET=your-session-secret-here

SESSION_SECRET には、本番環境では安全なランダム文字列を設定してください。開発時は任意の文字列で構いません。

次の図は、デプロイ準備の全体的なフローを示しています。

mermaidflowchart LR
    check["ビルド確認"] --> env["環境変数設定"]
    env --> verify["動作検証"]
    verify --> ready["デプロイ準備完了"]

これでデプロイの準備が整いました。次のステップで実際にデプロイを実行します。

ステップ 5：初回デプロイの実行

デプロイ先の選択

Remix アプリケーションは様々なプラットフォームにデプロイできますが、最短セットアップでは Vercel を使用します。

Vercel を選ぶ理由は以下の通りです。

#理由詳細
1簡単なセットアップGit 連携だけでデプロイ可能
2無料プラン個人プロジェクトには十分
3Remix 公式サポート最適化された設定

まず、Vercel CLI をインストールしましょう。

bash# Vercel CLI のインストール
yarn global add vercel

デプロイコマンドの実行

Vercel にログインして、デプロイを実行します。

bash# Vercel にログイン
vercel login

# 初回デプロイの実行
vercel --prod

初回デプロイ時には、いくつかの質問が表示されます。

bash# デプロイ時の質問と推奨回答
? Set up and deploy "~/my-remix-app"?
→ Y を選択

? Which scope do you want to deploy to?
→ 個人アカウントを選択

? Link to existing project?
→ N を選択（新規プロジェクト作成）

? What's your project's name?
→ my-remix-app（またはお好みの名前）

? In which directory is your code located?
→ ./ を選択（現在のディレクトリ）

デプロイが完了すると、以下のような出力が表示されます。

bash# デプロイ完了時の出力例
✅  Production: https://my-remix-app-xxxxx.vercel.app [3s]
📝  Deployed to production. Run `vercel --prod` to overwrite later.
💡  To change the domain or build command, go to https://vercel.com/your-username/my-remix-app/settings

ブラウザで表示された URL にアクセスして、アプリケーションが正常にデプロイされていることを確認してください。

次の図は、デプロイプロセス全体の流れを示しています。

mermaidsequenceDiagram
    participant Dev as 開発者
    participant CLI as Vercel CLI
    participant Git as Git Repository
    participant Vercel as Vercel Platform

    Dev ->> CLI: vercel login
    CLI ->> Vercel: 認証
    Dev ->> CLI: vercel --prod
    CLI ->> Git: コード取得
    CLI ->> Vercel: デプロイ実行
    Vercel ->> Vercel: ビルド & デプロイ
    Vercel ->> Dev: デプロイ URL 返却

これで Remix アプリケーションの初回デプロイが完了しました！

まとめ

この記事では、Remix プロジェクトの初期化から初回デプロイまでを 10 分で完了する最短手順をご紹介しました。

実際の作業時間の内訳は以下の通りです。

#ステップ所要時間主な作業内容
1事前準備1 分環境確認
2プロジェクト初期化3 分create-remix 実行
3初期設定2 分依存関係確認・設定調整
4ローカル動作確認1 分開発サーバー起動
5デプロイ準備1 分ビルド確認・環境変数設定
6デプロイ実行2 分Vercel デプロイ

合計：約 10 分

これらの手順により、Remix の強力な機能を活用したフルスタック Web アプリケーションを、最短時間で本番環境にデプロイできました。

今回は最短セットアップに焦点を当てましたが、実際のプロジェクトではデータベース接続、認証機能、API 設計などの追加実装が必要になるでしょう。しかし、この基盤があれば、すぐに本格的な開発を開始することができます。

Remix の豊富な機能を活用して、ぜひ素晴らしい Web アプリケーションを構築してください！

関連リンク

Remixの記事Remix

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る