今回は最近話題に上がるRemixの環境をdocker-composeで構築していきたいと思います。

Remixとは

Remixとは、ReactをベースとしたWebフレームワークです。

フルスタックフレームワークとも呼ばれ、フロントエンドとバックエンドを同時に構築できます。

ちなみにRemixについてChatGPTに聞いたところこんな回答でした。

Remixは、Reactをベースにした新しいフルスタックWebフレームワークであり、開発者がユーザーインターフェイスから始めてWeb標準を通じて高速でスムーズで耐障害性のあるユーザーエクスペリエンスを提供することにフォーカスしています。このフレームワークは、クラウドフレアワーカーや従来のNode.js環境など、あらゆるNode.jsサーバーや非Node.js環境にデプロイ可能です​​。

Remixは、特にルーティングとデータロードの処理においてユニークな特徴を持っており、ネストされたルートを使用してほとんどのローディング状態を排除し、サーバーサイドでデータを並行してロードし、完全なHTMLドキュメントを送信することで、より速く、滑らかなユーザーエクスペリエンスを提供します。これにより、ウェブアプリケーションのパフォーマンスが大幅に向上します​​。

開発フローは、主にビューの定義、ローダー（またはアクション）の定義、データベースへの保存の3つのステップに分けられます。Remixでは、ビューはReactコンポーネントとして定義され、ファイルベースのルーティングシステムを使用して簡単にURLパスを設定できます。loaderとaction関数を使用して、クライアントとサーバー間のデータのやり取りを行い、サーバーでの状態管理やデータの更新を容易にします​​。

また、Remixは開発者が煩雑な状態管理を行う必要を減らし、リモートサーバーで管理される状態と常に同期を取ることができるように設計されています。これにより、バグの可能性を減らしつつ、クライアントのローカルな状態管理もReactの状態管理ライブラリを使用して行うことができます​​。

Remixの詳細なドキュメントには、ルーティング、データフロー、クライアントとサーバーのコード実行、進行中のUI、状態管理など、多岐にわたるトピックが含まれており、開発者が総合的な理解を深めることができます​​。

ChatGPT

要するに、Remixは

• フルスタックフレームワーク
• 高速でスムーズで耐障害性のあるユーザーエクスペリエンスを提供
• あらゆるNode.jsサーバーや非Node.js環境にデプロイ可能
• 状態管理が楽

ということです。

また、RemixではReact RouterとViteをベースとするSPAモードが搭載されています。バックエンドとSPAのフロントエンドが同時に作れるのはかなり良いですね✨

では早速docker-composeを使って環境構築してみましょう！

目的

今回の記事での目的は、docker-composeを使ってRemixのローカル環境を構築する。

することリスト

1. NodeのDocker Imageを作ってRemixプロジェクトを作成する
2. Remixプロジェクトを起動してブラウザでアクセスする

1. NodeのDockerイメージを作ってRemixプロジェクトを作成する

まずはDockerHubのNodeでイメージを作っていきます。

Dockerfileを作ります。

FROM node:21-alpine

ENV APP /app
WORKDIR $APP

COPY . $APP

EXPOSE 5173

軽量のalpineを使います。執筆時点で比較的新しい21-alpineを使います。

Work Directoryを /app にします。

どうせ後でdocker-compose.yamlを追加するのでこの時点で作ってしまいます。

version: "3"
services:
  remix:
    build: .
    ports:
      - 5173:5173
    volumes:
      - .:/app

これで準備OKです。では下記コマンドを実行してイメージを作ります。

$ docker-compose build

イメージができたか確認します。

$ docker images
REPOSITORY                   TAG       IMAGE ID       CREATED              SIZE
remix-test_remix             latest    fd37dba0547d   About a minute ago   139MB
...
...

できていますね🎉

ではこのイメージにRemixのプロジェクトを作成します。

$ docker run -it --rm --mount type=bind,src=$(pwd),dst=/app remix-test_remix:latest npx create-remix

Need to install the following packages:
create-remix@2.8.1
Ok to proceed? (y) y

 remix   v2.8.1 💿 Let's build a better website...

   dir   Where should we create your new project?
         .

      ◼  Using basic template See https://remix.run/guides/templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         No

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

  done   That's it!
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

４つの質問が出てきますので自身の適切な選択を採っていきます。

質問１：Ok to proceed? (y)

これは「進めていいかい？」と聞かれているだけなので y ですね

質問２：Where should we create your new project?

これは「どのディレクトリにプロジェクト作る？」と聞かれています。任意のディレクトリを指定してください。上の例ではカレントディレクトリ（.）を指定しました。

質問３：Initialize a new git repository?

GItのリポジトリを作るか聞かれています。今回は特に必要ないので No にしました。

質問４：Install dependencies with npm?

ライブラリのDependenciesはnpmで管理しますか？と聞かれています。Recommendedみたいなのでyesにしました。

プロジェクトがこんな感じになったらOKです 🎊

2. Remixプロジェクトを起動してブラウザでアクセスする

Remixプロジェクトの初期状態が完成したのでここからプロジェクトの起動、そしてブラウザでアクセスしてみたいと思います。

ここでまず、package.jsonを少しいじります。

{
  "name": "",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    # "dev": "remix vite:dev", ここを↓のように書き換える
    "dev": "remix vite:dev --host --port 5173",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc"
  },

こうすることでDocker環境内のRemixプロジェクトにアクセスできるようになります。

次にdocker-compose.yamlをいじります。

docker-compose up時にRemixサーバを起動するようにcommandを設定します。

version: "3"
services:
  remix:
    build: .
    ports:
      - 5173:5173
    volumes:
      - .:/app
    command: /bin/sh -c "cd /app; npm run dev;"

これで準備OKです。

下記コマンドで起動してみましょう！

$ docker-compose up
Recreating remix-test_remix_1 ... done
Attaching to remix-test_remix_1
remix_1  |
remix_1  | > dev
remix_1  | > remix vite:dev --host --port 5173
remix_1  |
remix_1  |   ➜  Local:   http://localhost:5173/
remix_1  |   ➜  Network: http://192.168.32.2:5173/

こんな感じになったらOKです。

ブラウザで http://localhost:5173 にアクセスしてみましょう！

↓の画像のようなページに遷移できたら成功です！

これで、docker-composeでRemixのローカル環境を構築できましたね。これからRemixを色々触っていきたいと思います！

最後までお読みいただきありがとうございました！👍