DockerでReact環境を構築する具体的な方法をいくつか載せておきます。
1つめ
フォルダ「docker」を作成、その中にさらにフォルダ「node」を作成、その中にDockerfileを作成
Dockerfile
|
1 2 |
FROM node:16-alpine WORKDIR /usr/src/app |
一番上の階層にdocker-compose.ymlを配置
docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 |
version: '3.9' services: node: build: ./docker/node volumes: - ./node:/usr/src/app:cached command: sh -c "cd react-practice && yarn start" ports: - "3000:3000" |
ここで、以下のコードを実行
|
1 |
docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-practice" |
最後に起動します。
|
1 |
docker-compose up -d |
しばらくしてからhttp://localhost:3000にアクセスするとページが表示されます。
こちらの記事を参考にしました。
このあと「npx create-react-app testapp」で色々作成されて、「npm start」でYesを選択してWebページ表示。
２つめ
プロジェクトフォルダ直下に「Dockerfile」と「docker-compose.yml」を作成
Dockerfile
|
1 2 |
FROM node:14.17.5 WORKDIR /usr/src/app/ |
一番上の階層にdocker-compose.ymlを配置
docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
version: '3' services: node: build: context: . tty: true environment: - NODE_ENV=development volumes: - ./:/usr/src/app command: sh -c "cd testapp && npm start" ports: - "3000:3000" |
ここで、以下のコードを実行
|
1 |
docker-compose up -d |
こちらの記事を参考にしました。
このあと「npx create-react-app testapp」で色々作成されたあと、「cd testapp」でアプリのフォルダに移り、「npm start」で自動でWebブラウザのタブが開き、http://localhost:3000のページが表示されます。
注意点として（関係ないかもしれないけど）、docker-compose.ymlの中の「testapp」とnpx creat-react-app testapp の「testapp」は揃えないとダメ、…かもしれない。（←わからん）
こんなエラーが出た時の解決方法は…
ちなみに以下のようなエラーが出て困っている人も居るかと思います。
|
1 2 3 4 5 6 7 8 9 10 11 |
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\***\workspace\reactPractice/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\***\workspace\reactPractice\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\***\AppData\Local\npm-cache\_logs\2022-08-25T01_56_57_208Z-debug-0.log |
（僕の場合、npx create-react-app *** を実行し、そのあとすぐ npm start したらエラーが出ました。）
この場合、プロジェクトのフォルダにいってから「npm start」を実行すれば解決しました。
本記事「２つめ」で言えば、「cd testapp」です。
当たり前なことではあるんですが、初心者の僕は結構悩まされてしまったので、少しでも誰かの役に立てれば良いです。
以上です。
コメント