DockerでReactの開発環境を構築

これまでホスト側にnode.jsやwebpackなど必要なツールを揃えてReactの環境を構築していたのですが、ホストPCの環境が汚れてお手入れが大変なので、Dockerでreactの環境を用意しました。

Dockerビルド

↓ホスト側のディレクトリ構成

react/
├── Dockerfile
└── code/

↓Dockerfileです。ほぼ何もしていませんが。。Reactを動かすにはNode.jsが必要なので、nodeのコンテナを引っ張ってきます。

FROM node:8
RUN mkdir /code
WORKDIR /code

↓ビルドの実行

docker image build -t react:v1 .

↓コンテナの起動

docker container run -dt --name react_dev -p 3000:3000 -v $(pwd):/code react:v1

nodeでテスト用にサーバーを起動するときに3000番ポートを使用するため、3000番にポートフォワードしています。

Reactアプリのセットアップ

↓Create React Appを使います。

https://facebook.github.io/create-react-app/

↓コンテナに入ります。

docker container exec -it react_dev /bin/bash

↓クイックスタート

npx create-react-app my-app

↓サーバーの起動

cd my-app
npm start

少し時間がかかりますが、そのうちサーバーが起動します。

ブラウザから http://localhost:3000/ へアクセスすると、例のようこそ画面が表示されます。

ディレクトリ構成

create-react-app を実行すると、次のようなディレクトリが作られます。

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

src 内のファイルはWebpackで処理されるようになっていて、JSやCSSファイルはここに置く必要があります。

後から新しいパッケージが必要になった場合は、次のように yarn や npm コマンドでインストールします。

npm install bulma

インストールされたパッケージは node_modules に追加されます。

まとめ

めちゃくちゃ簡単に構築できました。やったね！

最近はWebpackとか深く考えずに構築できるようになってるみたいで。。本当にフロントエンドは動きが速いです。

この環境でReactを少し復習して、次はGolangやDjango REST frameworkと連携です。。！