Zenn
EGSTOCK,Inc.Publicationへの投稿
🌊

tailwind css + RemixをDocker環境で動かしてみた

サブ
2023/09/04に公開
tech

この記事について

フロントエンドの学習のため、Remix + Tailwind css の構成を Docker 環境で動作させてみました。

使用マシン/ツール

macOS Ventura ver13.5
Docker Desktop ver4.17.0

環境構築までの流れ

  1. Remix環境をローカルPCで構築する
  2. docker内でRemixを動かす
  3. tailwind cssをインストールする

※ 手順をスキップしてとにかく動かしてみたい方はこちらから
https://github.com/EGSTOCK/tailwind_remix_docker

1. Remix環境をローカルPCで構築する

事前に任意の場所にremixディレクトリを作成し、そこでコマンドを実行していきます。

コマンドを実行(事前にnpxをインストールが必要)

npx create-remix

実行すると、4か所ほど対話形式で入力を求められます。

  • Ok to proceed? (y) ：y
  • ? Where would you like to create your app? ./my-remix-app # デフォルトのままでいいならEnterでOK
  • ? TypeScript or JavaScript? TypeScript
  • ? Do you want me to run npm install? Yes
$ npx create-remix
Need to install the following packages:
  create-remix@1.19.3
Ok to proceed? (y) y
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
? Where would you like to create your app? ./my-remix-app
? What type of app do you want to create? Just the basics
? Where do you want 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 `npm install`? Yes
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs

added 956 packages, and audited 957 packages in 55s

241 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
💿 That's it! `cd` into "/Users/projects/remix/my-remix-app" and check the README for development and deploy instructions!

実行後は my-remix-app というディレクトリができており、移動後npm run devを実行するとRemix環境が起動します。

$ npm run dev

> dev
> remix dev


 💿  remix dev

 info  building...
 info  built (681ms)
Remix App Server started at http://localhost:3000 (http://172.16.0.16:3000)

http://localhost:3000 をブラウザで確認すると下記が確認できます。

これで、まずはローカルPC上でRemix環境を構築できました。

2. docker内でRemixを動かす

docker-compose.ymlとDockerfileを作成する

今回は下記内容で作成しました。

docker-compose.yml
version: "3.9"
services:
  app:
    build:
      context: .
      dockerfile: ./infra/Dockerfile
    volumes:
      - ./my-remix-app:/my-remix-app
    ports:
      - 3000:3000
      - 3001:3001

Dockerfile
Remixの起動にはnpmコマンドではなくyarnコマンドを使用しています

infra/Dockerfile 
FROM node:lts-buster-slim as base

WORKDIR /my-remix-app

RUN apt-get update && apt-get install -y procps
EXPOSE 3000

CMD ["yarn", "run", "dev"]

RUN apt-get update && apt-get install -y procps
について、最初は記載なくともコンテナ起動できるのですが、tsxファイルを更新すると下記エラーが発生したので、解消の為記載しました。

[info] rebuilding... (~ app/routes/test.tsx)
[info] rebuilt (663ms)
 /my-remix-app/node_modules/pidtree/lib/bin.js:45
     done(new Error(err));
          ^
 Error: Error: spawn ps ENOENT
     at ChildProcess.<anonymous> (/my-remix-app/node_modules/pidtree/lib/bin.js:45:10)
     at ChildProcess.emit (node:events:514:28)
     at ChildProcess._handle.onexit (node:internal/child_process:289:12)
     at onErrorNT (node:internal/child_process:476:16)
     at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
 Node.js v18.17.0
 error Command failed with exit code 1.
 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Makefileを作成する

Dockerfileの RUN で yarn install を実行するようにしていたのですが、
実行後、コンテナが正常に起動せず、コンテナ内で下記のようなログが出ていました。

$ remix dev
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
 /bin/sh: 1: remix: not found
 error Command failed with exit code 127.

こちらの解決の為

  • 一時的にDockerコンテナを構築し、yarn installを実行してコンテナを終了する
  • 再度コンテナを起動し、 yarn run dev でRemixサーバーを起動する

という手法を取っています。
また、起動・シャットダウンも簡単に実行できるように、Makefileを下記のように作成しました。

Makefile
# 環境構築
init:
	docker-compose run --rm app yarn install --frozen-lockfile
	docker compose up -d --build
# docker compose 起動
up:
	docker compose up -d
# docker compose シャットダウン
down:
	docker compose down --remove-orphans

コンテナを起動してみる

make initを実行してdocker環境を起動してみます。

$ make init            
docker-compose run --rm app yarn install --frozen-lockfile
～～省略～～
docker compose up -d --build
～～省略～～
 ⠿ Container remix-app-1  Started

Docker Desktopはこんな感じ

http://localhost:3000 をブラウザでもう一度確認すると

コンテナ上でRemix環境が立ち上がることが確認できました。

ローカル側の編集が反映されるか確認する

ローカル側で作った内容が反映されるか確認してみます。

test.tsxを下記内容で作成します。
※routes配下に設置した関数コンポーネント名はIndex固定でないと、コード更新時のライブリロードが動かないので注意

my-remix-app/app/routes/test.tsx
export default function Index() {
    return (
        <p>Hello, test</p>
    )
}

作成後は、ブラウザ上で http://localhost:3000/test にアクセスしてみます。

新規に追加したページが確認できました。

3. tailwind cssをインストールする

流れとしては

  • dockerコンテナにログイン
  • コンテナ内でtailwindcssインストールコマンドを実行

でやってみます。

dockerコンテナにログインしてコマンド実行

コンテナへのログインはdockerコマンドを使いますが、せっかくMakefileを作成したのでmakeコマンドで用意しました。
Makefileに下記を追記します。

Makefile
# remix コンテナ に入る
app:
	docker compose exec app bash

make app でコンテナにログイン後、下記2つのコマンドを実行します。

- インストールコマンド
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
- tailwind.config.js と postcss.config.jsを作成するコマンド
npx tailwindcss init -p

$ make app
docker compose exec app bash
root@38146308a2ca:/my-remix-app# yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
～～省略～～
Done in 204.14s.
root@38146308a2ca:/my-remix-app# npx tailwindcss init -p

実行後、コンテナからログアウトして /my-remix-app/ 配下を確認すると、tailwind.config.jsとpostcss.config.jsが新規に作成されています。

cssファイル を作成する

tailwindcssを使用するために、global.css を下記内容で作成します。
(ここで作成するファイル名は任意で大丈夫です)

my-remix-app/app/styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.jsのcontent部分を下記のように変更します。

my-remix-app/tailwind.config.js
- content: [],
+ content: ['./app/**/*.{js,jsx,ts,tsx}'],

次に、root.tsxを変更します。
importを追加し、links部分でglobal.css読み込むようにします。

my-remix-app/app/root.tsx
+ import styles from "~/styles/global.css";

～～省略～～

- export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
- ];
+ export function links() {
+    return [{ rel: "stylesheet", href: styles }];
+}

最後に、remix.config.jsに下記を追記します。
remixでtailwindを使用できるようにします。

my-remix-app/remix.config.js
module.exports = {
  ...
  serverModuleFormat: "cjs",
+  tailwind: true,
  ...

ここまで記載したら、tailwindcssを使うための準備は完了です。

tailwindcssを使ってみる

先ほど作成 test.tsx の表示を修飾します。
(文字を中央に設置、文字色:赤、太字)

my-remix-app/app/routes/test.tsx
+ <div className={'grid place-items-center mt-10'}>
+   <div className={'bg-blue-100 w-[100px] text-center text-red-500 font-bold'}>
      <h1>Hello, test</h1>
+   </div>
+ </div>

http://localhost:3000/test を確認します。

tailwindcssを使って修飾できました。

最終的なファイルの設置状態は下記となります。

remix
├── Makefile
├── README.md
├── docker-compose.yml
├── infra
│    └── Dockerfile
└── my-remix-app
    ├── README.md
    ├── app
    │    ├── entry.client.tsx
    │    ├── entry.server.tsx
    │    ├── root.tsx
    │    ├── routes
    │    │      ├── _index.tsx
    │    │      └── test.tsx
    │    │
    │    └── styles
    │           └── global.css
    ├── build
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
    ├── remix.config.js
    ├── remix.env.d.ts
    ├── tailwind.config.js
    ├── tsconfig.json
    └── yarn.lock

感想

今まではcssにスタイルを記載していく環境が多かったのですが、tailwindは環境が用意できれば既存のスタイルがすぐに使えていい感じですね。
Remixについてはまだほとんど触れていないので、今後もいろいろ触ってみたいと思います。

参考

Remix
https://reffect.co.jp/react/remix-first-time/
tailwind
https://tailwindcss.com/docs/guides/remix

EGSTOCK,Inc.
EGSTOCK,Inc.Publication

EGSTOCK, Inc. 札幌の開発会社 FE/BEはじめインフラも対応してます [言語]PHP/Golang/Vue.js/React.js [クラウド]AWS, GCP [その他]Docker/OpenApi/Notion

Discussion