dockerを用いた仮想環境上で、nodeのモジュールがインストールできない

Question

前提・実現したいこと

dockerで仮想環境を構築し、
react+redux+typescriptでアプリを製作しようとしております。
しかし、axiosやmaterial-uiなど、
使いたいモジュールがインポート出来ていなくて困っております。
仮想環境上でモジュールをインストール、インポートする方法をご教授願いたく存じます。

発生している問題・エラーメッセージ

App.tsx上で、
import axios from 'axios';を入力すると、
下記のようなメッセージが出て、
コンパイル出来ない状態でございます。

Cannot find module 'axios' or its corresponding type declarations.ts(2307)

該当のソースコード

ディレクトリ
.
├── docker
│   └── react
│         └── Dockerfile
└── docker-compose.yml    

FROM node:12.18.4
WORKDIR /usr/src/app
RUN npx create-react-app . --template redux-typescript
RUN npm install axios
RUN npm install react-router-dom @types/react-router-dom
RUN npm install react-icons @types/react-icons
RUN npm install react-modal @types/react-modal
RUN npm install @material-ui/core @material-ui/icons

version: "3"
services:
  react_frontend:
    build:
      context: .
      dockerfile: ./docker/react/Dockerfile
    container_name: react_container
    tty: true
    volumes:
      - ./react_frontend:/usr/src/app
    command: sh -c "npm start"
    ports:
      - 3000:3000

カレントディレクトリにて下記コマンドを実行

docker-compose run --rm react_frontend sh -c 'npx create-react-app . --template redux-typescript'

実行後のディレクトリ

.
├── docker
│   └── react
│         └── Dockerfile
├── react_frontend
│         ├── node_modules
│         ├── public
│         ├── src
│         └── ...
└── docker-compose.yml  

気になっていること

この場合ですと、ホスト側のディレクトリにて、
npm installなどを使って直接モジュールをインストールしても問題ないのしょうか。
それとも、仮想環境構築の時点でミスがあるのでしょうか。

初歩的な質問で恐縮でございますが、何卒よろしくお願い申し上げます。

補足情報

Docker version 20.10.5
node v12.18.4

Comments

[hoshi-takanori]

Dockerfile の中で create-react-app したものとは別に docker-compose run で create-react-app する意味って何でしょうか？

[masa_iss_mago]

ご連絡、誠にありがとうございます。
docker-compose run で、ホスト側のreact用ディレクトリを作成するものだと思っておりましたが、
完全に無駄なコマンドだったのですね…。
ホスト側でreactアプリを作成、それを仮想環境にコピーする形で解決することができました。
ご指摘ありがとうございました。

Answer 1

ホスト側でreactアプリ作成。
後にDockerfileにて作成したディレクトリをCOPYによって解決。