😺
Remix環境構築①: Dockerコンテナ作成、Remixのインストール～表示まで
はじめに
Remixをさわってみたいと思ってDocker上に Remix + Storybook + MUI の環境を構築したので、手順をまとめてみました。
作って壊して試す用に作ったので、とりあえず欲しいパッケージだけつっこんでとりあえず動くとこまでという感じです。
なるべく余計なコードや設定は書かずに必要最低限の内容で作成してます。
ちなみに自分はReact自体にまだ慣れていないので、もしかすると所々おかしい部分があるかもしれません。変なところがあれば指摘いただけると助かります。
1. プロジェクトディレクトリを作成
プロジェクト用のディレクトリを作成します。
2. Docker環境作成
docker-compose.yml を作成
プロジェクトディレクトリ内に docker-compose.yml を作ります。
docker-compose.yml
services:
app:
image: node:current-slim
ports:
- 3000:3000
- 6006:6006
environment:
TZ: Asia/Tokyo
working_dir: /usr/src/app
volumes:
- ./myapp:/usr/src/app
stdin_open: true
tty: true
[補足]
-
portsの設定は、- 3000:3000はRemix用、- 6006:6006はStorybook用のポート設定です。 -
working_dirの設定でデフォルトの作業ディレクトリを指定してます。 -
volumesの設定でホスト側のmyappというディレクトリがコンテナ内の/usr/src/appに同期されるようにしています。myappディレクトリはコンテナを起動すると勝手に作成されるので事前に作っておく必要は無し。 -
nodeのコンテナイメージは起動後すぐに終了してしまうので、stdin_open: trueとtty: trueを入れることで起動し続けるようにしています。
コンテナ起動
プロジェクトディレクトリ直下で下記のコマンドを実行してコンテナを起動します。
$ docker-compose up -d
3. Remix を導入
インストール
下記のコマンドで Remix をインストールします。
docker-compose exec を使うとコンテナに入ってコマンドを実行しないで済むので楽です。
$ docker-compose exec app npx create-remix@latest . --no-git-init
[補足]
-
create-remixでは実行時にgit initを行うか選択することが出来るが、今回使用している Docker イメージにはデフォルトでは Git が入っていないので--no-git-initを付けてgit initを行わないようにする。git initをしたい場合は事前にコンテナにGitをインストールしておく必要がある。 -
Install dependencies with npm?と聞かれるのはYesでOK。
package.json を修正
myapp/package.json を下記のように修正します。
package.json
// 〜〜省略〜〜
"dev": "remix vite:dev --host --port 3000",
// 〜〜省略〜〜
[補足]
-
--hostを指定するのは、コンテナの外からのアクセスを許可してホスト側からアクセスできるようにするため。 -
--port 3000でポート番号を3000番に設定している。3000版以外でもOK(ただしdocker-compose.ymlのportsの設定と合わせる必要がある)。
4. 動作確認
一旦うまくいっているかの確認のために Remix を起動して確認してみます。
Remix を起動
下記のコマンドで Remix を起動します。
$ docker-compose exec app npm run dev
Remix へのアクセスを確認
localhost:3000 にアクセスして下記のようなページが表示されたらOKです。
次の記事へ
この記事では、Dockerコンテナの作成とRemixのインストールから表示までを行いました。
次の記事ではStorybookのインストールから表示までを行います。
Discussion