【Remix】環境構築手順

ホーム
BLOG
【Remix】
【Remix】環境構築手順

【Remix】
2024.03.23

【Remix】環境構築手順

Overview
Dockerfileの作成
docker-compose.yamlの作成
docker imageの作成・確認
Remix プロジェクトの作成
プロジェクトの起動・確認

1. Overview

今回は、Docker-Composeを使用した、Remixの環境構築手順を説明します。
前提として、Dockerはインストールされているものとして説明します。

2. Dockerfileの作成

はじめに、Dockerfileを作成します。

FROM node:21-alpine

ENV APP /app
WORKDIR $APP

COPY . $APP

EXPOSE 5173

軽量のalpineを使います。ドキュメント作成時点で、比較的新しい21-alpineを使います。
Work Directoryは/appにします。

3. docker-compose.yamlの作成

Dockerfileを作成したら、docker-compose.yamlを作成します。

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

4. docker imageの作成・確認

Dockerfile、docker-compose.yamlの作成完了後、以下のコマンドを実行してイメージを作成します。

$ docker-compose build

次に、以下のコマンドを実行して、イメージが作成されているかを確認します。

$ docker images

以下のように、表示されていれば、イメージの作成は完了です。

$ docker images       
REPOSITORY                               TAG       IMAGE ID       CREATED          SIZE
remix-tutorial-remix                       latest    e9b42b57aedb   41 minutes ago   139MB

5. Remix プロジェクトの作成

イメージの作成完了後、作成したイメージにRemixのプロジェクトを作成していきます。
以下のコマンドを実行してください。

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

コマンドを実行すると、複数の質問がされます。

質問１：Ok to proceed? (y)
これは「進めていいか？」と聞かれているだけなのでyで大丈夫です。

質問２：Where should we create your new project?
どのディレクトリにプロジェクトを作成するかを聞かれています。
任意のディレクトリを指定してください。基本的には、カレントディレクトリ（.）で大丈夫です。

質問３：Initialize a new git repository?
GItのリポジトリを作るか聞かれています。
ここは各自で判断してください。

質問４：Install dependencies with npm?
「ライブラリのDependenciesはnpmで管理しますか？」と聞かれています。
問題がなければ基本的にはyで大丈夫です。

プロジェクトが、以下のように作成されたら完了です。

6. プロジェクトの起動・確認

プロジェクトの作成が完了したら、次は、プロジェクトの起動と確認をしていきます。
まずは、Docker環境内のRemixプロジェクトにアクセスできるようにpackage.jsonを修正します。

"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-compose up時にRemixサーバを起動するように、docker-compose.yamlにcommandを設定します。

version: "3"
services:
  remix:
    build: .
    ports:
      - 5173:5173
    volumes:
      - .:/app
    # 以下を追加
    command: /bin/sh -c "cd /app; npm run dev;"

これで準備は完了です。
下記のコマンドを実行して、プロジェクトを起動します。

$ docker-compose up

正常に起動したら、以下のようにターミナルに表示されます。

$ 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/

ブラウザで http://localhost:5173 にアクセスしてみましょう。
以下のページが表示されたら、Remixの環境構築は完了です。