見切り発車で平仮名の学習アプリを作る【2日目】

2024年のアドベントカレンダー2日目の記事です。

開発環境を作成する

開発にあたりReactを動かせる環境を作成します。
さしあたってReactのロゴを表示するところまでを簡単にやってみようかと思います。

まずReactアプリの作成のためターミナルで以下のコマンドを実行します。
(過去にReact触っていたので諸々インストールは終わっています)

npx create-react-app hiragana
cd hiragana/

無事に作成できたのでDockerfile及びdocker-compose.ymlの作成を行います。

Dockerfile

FROM node:14

WORKDIR /app

COPY package.json /app
COPY package-lock.json /app

RUN npm install

COPY . /app

RUN npm run build

CMD ["npm", "start"]

EXPOSE 3000

docker-compose.yml

version: '3'
services:
  hiragana:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development

この状態で以下のコマンドを実行します。

docker-compose up --build

実行したところ以下のエラーが表示されました。

0.460 > hiragana@0.1.0 build /app
0.460 > react-scripts build
0.460 
1.080 Creating an optimized production build...
2.515 Failed to compile.
2.515 
2.515 Module not found: Error: Can't resolve 'web-vitals' in '/app/src'

web-vitalsなるものが足りていないようなのでpackage.jsonのdependenciesブロックを以下のように書き換えます。

package.json

  "dependencies": {
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

以下のコマンドを実行し追加したweb-vitalsのインストールとコンテナの起動を行います。

npm install web-vitals
docker-compose up --build

無事にReactお馴染みのページの表示まで対応できました。

おわりに

2日目にして欲望に負け記事投稿が止まってしまいました。
最終的に25記事投稿できるよう、ここから頑張ります。