4
Help us understand the problem. What are the problem?

posted at

updated at

DockerでReact環境を構築する手順

なぜこの記事を書いたのか

「Dockerfile と docker-compose.ymlを一から作成してビルドする」という一連の流れを確認したかったため。

環境構築完了(ゴール)の確認

この記事のゴールは以下のようにReactのページが起動すること。
React-top

環境構築の手順

①Docker、nodeのインストール
②Dockerfile、docker-compose.ymlの作成
③ビルド
④Reactアプリの作成
⑤コンテナの実行

①Docker、nodeのインストール

Dockerはコンテナ型の仮想環境。
Dockerをインストールして、Dockerの環境の中で開発をすることになる。

Dockerで環境構築したり、ライブラリをインストールする為にnodeが必要になる。

②Dockerfile、docker-compose.ymlの作成

docker-react-app(プロジェクトフォルダ)
 └┬─ Dockerfile
  └─ docker-compose.yml

上記のフォルダ構成を参考に、ファイルを作成する。

「docker-react-app」というフォルダを作成し、その直下に「Dockerfile」「docker-compose.yml」という名称で新規ファイルを作成すればOK。

  • Dockerfile
FROM node:14.17.5 
WORKDIR /usr/src/app/

ターミナルで「node -v」を実行することでnodeのバージョンを確認できる。バージョンを「FROM node:○○.○○.○」という形で指定する。

  • docker-compose.yml
docker-compose.yml
version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=development
    volumes:
    - ./:/usr/src/app
    command: sh -c "cd reactapp && npm start"
    ports:
    - "3000:3000"

③ビルド

「③ビルド」「④Reactアプリの作成」「⑤コンテナの実行」で実行する「docker-compose」コマンドは、Dockerfileが存在するディレクトリで実行する必要がある。ターミナルにて「cd docker-react-app」を実行してディレクトリを移動しておく必要がある。

このコマンドを実行してビルドする。

docker-compose build

※buildコマンドはimageを作成する。コンテナは作成しない。

④Reactアプリの作成

docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app reactapp"

上記「①Docker、nodeのインストール」でnpmをインストールしていれば「npm install -g create-react-app && create-react-app reactapp」が実行され、Reactがインストールされる。

⑤コンテナの実行

docker-compose up

ここまで完了したらWebブラウザで「 http://localhost:3000 」へアクセスする。以下のようにReactのページが起動すれば環境構築完了となる。
React-top

参考

Dockerで環境を構築する手順の記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?