竹の子エンジニア

30代から目指すエンジニアの日記

DockerでReact開発環境の構築

Docker React インフラ

CentOS上のDockerでReactの開発環境を構築します。

Dockerについては

ちなみに前回、前々回でDockerの使い方については触れました。
takecho.hatenablog.com

ただ上記についてはDocker-composeでの利用方法になっており、
Dockerへの理解が及ばないため
使い慣れないうちはDocker単体で使ってみるのがよさそうですね。。

Dockerの使い方については別途書きたいと思います。

DockerでReact開発環境の構築

本題ですがDockerでReactの開発環境を作ってみたいと思います。

フォルダ構成

まず、CentOS上でReactの開発環境を作るためのフォルダ
およびファイル構成についてです。
今回以下のようなフォルダ構成にしています。

/usr/local/react-app
              ├── docker
              │       └── node
              │               └── Dockerfile
              └── docker-compose.yml

nodeのイメージを取得

Reactの開発環境を構築するにあたり、nodeのイメージが必要になるため、
事前に以下のコマンドを入力し、imageを保存しておきます。
今回はnode:8-alpineを取得します。

# docker pull node:8-alpine

上記を実行すると、imageをダウンロードしてくるためしばらく時間がかかります。
ダウンロードが完了したら、以下のコマンドを実行し、imageがダウンロード
できていることを確認します。

# docker images
REPOSITORY            TAG                 IMAGE ID            CREATED             SIZE
docker.io/node        8-alpine           df48b68da02a     2 months ago     65.7 MB

Dockerfileの編集

/usr/local/react-app/docker/node/Dockerfileを編集します。
内容は以下の通りです。

FROM "node:8-alpine"
WORKDIR /usr/src/app/react-sample

docker-compose.ymlの編集

/usr/local/react-app/docker-compose.ymlを編集します。

version: "2"
services:
  node:
    build: ./node
    environment:
      - NODE_ENV=production
    volumes:
      - ./:/usr/src/app
    ports:
      - "3000:3000"

次にdocker-composeをビルドします。
ビルドしたときにエラーが表示された場合は行末を参照してみてください。

# docker-compose build

create-react-appの実行とアプリケーションの作成

# docker-compose run --rm node sh -c "npm i -g create-react-app && create-react-app react-sample"

上記のコマンドを実行すると、CentOS上の/usr/local/react内に
react-sampleというフォルダが作成されます。

yarn installの実行

yarn installコマンドを実行し、package.json にリスト化されている全ての依存関係を
node_modules 内にインストールします。

# docker-compose run --rm node sh -c "cd react-sample && yarn install"

サーバの起動

最後にReactサーバを起動します。

# docker-compose run --rm --service-ports node sh -c "cd react-sample && yarn start"

サーバが起動すると、コンソールに以下のように表示されます。
f:id:take9021:20181116101800p:plain

起動確認

サーバの起動後、以下のURLにアクセスし、起動を確認します。
http://localhost:3000

以下の画面が表示されれば、完了です。
f:id:take9021:20181116101908p:plain

docker-compose build実行したときのエラー

私のdockerのバージョンが古かったせいか、以下のエラーが表示されました。

Building node
Step 1/2 : FROM "node:8-alpine"
ERROR: Service 'node' failed to build: Error parsing reference: "\"node:8-alpine\"" is not a valid repository/tag: invalid reference format

調べてみるとdockerのバージョンが古いせいで起きているよう？
このときのdockerのバージョンは以下でした。

# docker -v
Docker version 1.13.1, build 8633870/1.13.1

なのでdockerをアンインストールし、リポジトリを指定し、
yumでdocker-ceを指定しインストールしたところ
dockerのバージョンアップができ、buildも成功しました。
dockerのインストール方法については、下記公式ドキュメントを参考にしています。
Get Docker CE for CentOS | Docker Documentation

'リポジトリの追加
# yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

' docker-ceのインストール
# yum -y install docker-ce

' dockerのバージョン確認
# docker -v
Docker version 18.09.0, build 4d60db4