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"
サーバが起動すると、コンソールに以下のように表示されます。
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