Dockerコンテナを使ってPC環境に依存しないReact x tailwind.cssの開発環境を構築する

Reactが実行できる環境を用意するにはPCにnode.jsをインストールする必要があります。しかし、ネットに転がっているチュートリアルを使って手を動かしてみようと思っても、依存関係が壊れていたり、自分の環境に入っている何かしらのライブラリのバージョンが古く、そもそも環境構築でつまづいてしまう人は少なくないのではないでしょうか？私自身もReactの勉強をしようとこちらの記事の通りに環境構築を試したところ同じようにハマってしまいました。そこで今回はDockerでnode.jsが動作するコンテナを用意し、その中でreactとtailwind.cssの開発が進められる環境を構築する手順をみなさんにご紹介できればと思います。

Dockerコンテナの用意

今回はDockerfileとdocker-compose.ymlを使ってコンテナ環境を用意します。

Dockerfileの作成

node.jsの現在のバージョンは公式サイトから確認できます。2022/10/30現在では18.12.0がLTS(long time support)なので18.12.0-alpineをイメージとして使用します。

FROM node:18.12.0-alpine
WORKDIR /usr/src/app

docker-compose.ymlの作成

version: '3.3'
services:
  react-tutorial:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./react:/usr/src/app
    ports:
      - "3000:3000"
    stdin_open: true

./reactディレクトリを/usr/src/appにマウントすることで、コンテナ内で実施した変更をローカルに反映させることができます。

コンテナ起動とReact開発環境の構築

docker-compose up -dでコンテナを起動したら、vscodeの拡張機能であるRemote-Containersを使ってコンテナに入りましょう。 [画像挿入] Attach to Running Container...に起動したコンテナの名称が表示されているはずなので、クリックしてreact-tutorialコンテナに入ります。ここで作ったはずのコンテナ名が表示されない時は、コンテナの作成に失敗していることが考えられます。Docker Desktopからコンテナ内のエラーログが確認できるので、適宜修正してください。

React環境を構築する

npx create-react-appコマンドを実行して、新規のReactプロジェクトを作成します。プロジェクトの名前は今回はreact_sandboxとしています。みなさんの好みに応じた名前をつけてください。

npx create-react-app react_sandbox

プロジェクト作成が終わったら、プロジェクトのディレクトリに移動してnpm startを実行してReactが動作するかを確認します。ブラウザが起動し下記の画面が表示されたら成功です。

Tailwind cssのインストールと設定

Reactが動作する環境は用意できたので、Tailwind cssのインストールを行います。yarnコマンドを利用してTailwind cssをインストールします。

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

ReactでTailwind cssを利用するにはcracoをインストールします。

yarn add @craco/craco

各種ファイルの更新

cracoのインストールが完了したら、react_sandbox配下のpackage.jsonのscripts配下を下記の通り修正します。

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

次に、react_sandobox/src直下にcraco.config.jsを作成します。

module.exports = {}

いくつか環境構築の参考にした記事ではstyle配下のpostOptionsがpostcssになっているものがありましたが、例えば下記のような記述でnpm run startをしたところ下記のようなエラーが発生しました。

module.exports = {
  style: {
    postOptions: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

TypeError: match.loader.options.plugins is not a function
    at extendsPostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54:51)
    at overrideLoader (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:97:9)
    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:118:13
    at Array.forEach (<anonymous>)
    at overridePostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:117:17)
    at overrideStyle (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\style.js:9:25)
    at mergeWebpackConfig (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\merge-webpack-config.js:77:30)
    at overrideWebpackDev (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\override.js:11:36)
    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\scripts\start.js:27:5

こちらのstackoverflowの記事によると、craco configはtailwindのドキュメントではもう必要ない記述になったようです。最後に Tailwind cssの設定ファイルであるtailwind.config.jsを作成するためにnpx tailwindcss initコマンドを実行します。最後に、Tailwind cssのclassをそれぞれのファイルから利用できるように srcフォルダにあるindex.cssを更新します。

@tailwind base;
@tailwind components;
@tailwind utilities;

vscodeで実装していると、これらの記述に対してUnknown at rule @tailwind cssと警告されることがあります。その場合PostCSS Language Supportという拡張機能を入れる、または下記のように記述することでエラーが解消します。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

動作確認

これでReactでTailwind cssを設定する準備が整いました。App.jsをTailwind cssを使って記述し直すことで、読み込めるかどうか確認します。ブラウザを開いて、画面中央に文字が表示されれば正常に動作していることになります。お疲れ様でした！