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

これらのファイルのうち、重要なのは下記の二つで、それ以外は削除してもリネームしても問題ありません。

  • public/index.html
  • src/index.js

srcディレクトリ配下には自由にサブディレクトリを作ってOK。src内のファイルはWebpackで処理されるようになっていて、JSやCSSファイルはここに置く必要があります。

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

npm install bulma

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

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください