はじめに
こんばんは、イエノカドです。
今日はフロントエンドの方向けにReactの開発環境を作る手順を紹介します。
環境構築ばかりしていますが、そろそろ解説系記事も書いていきたいと思います。
いろんな言語に取り組むことが好きで、
それにはまず開発環境のセッティングからする必要があるので、
それも含め楽しめられたらと思ってます。
Reactの設定手順
1. Docker for Mac のインストール
Mac に Docker Desktop をインストール — Docker-docs-ja 19.03 ドキュメント
今回は、Docker上にReactをインストールして表示していくため、
上記URLからあらかじめDocker for Macをインストールしておきましょう。
2. 空のワークスペースの作成
workspaceというフォルダを作成する(既にある場合はしなくてOK)
$ mkdir ~/workspace
workspaceフォルダ配下にdocker-reactフォルダを作成する
$ mkdir ~/workspace/docker-react
docker-reactフォルダに移動する
$ cd ~/workspace/docker-react
3. Dockerfileを作成
docker-reactフォルダ配下にDockerfileという名前でファイルを作成し、
以下のコードをコピペしてください。
FROM node:12.14.1
WORKDIR /usr/src/app
RUN npm install -g create-react-app
4. docker-compose.ymlを作成
docker-reactフォルダ配下にdocker-compose.ymlという名前でファイルを作成し、
以下のコードをコピペしてください。
version: "3.9"
services:
db:
image: postgres
volumes:
- ./data/db:/var/lib/postgresql/data
environment:
- POSTGRES_DB=postgres
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=postgres
web:
build: .
command: python manage.py runserver 0.0.0.0:8000
volumes:
- .:/code
ports:
- "8000:8000"
depends_on:
- db
6. Reactのプロジェクトを作成
$ docker-compose run --rm node sh -c 'create-react-app docker-react-project'
最終的に以下のようになるかと思います。


7. 初期設定画面にアクセス
http://localhost:3000
上記にアクセスすると、下記のような画面表示がされればOKです。


参考



Docker + React 開発環境構築してみた|mugitya
Dockerの勉強をしてみたので、 これから勉強していきたいReactの開発環境を構築してみる Dockerを使うことのメリットを考えてみた ・VMより軽い ・開発環境構築をコード化できるので誰かに教えやすそう ・上と同じだが、Docker関連のファイルを渡すだけで構築終わるので楽そう ・本番、検証と同等の環境も作...
今回、基本的には上記に基づいて環境構築をしてみました。
(ライブラリのインストールをDockerfileに入れているため少し工程は違います。)
最後にReactに関するおすすめの本を紹介しておきます。
最後に
フロントエンドのみの環境を構築するのは、
Dockerやnpm(パッケージ管理システム)の知識が少なからずいるので、
是非これを機にコマンド一つで環境を用意できるようになっておくのはアリかと思います。
では、またお会いしましょう。
コメント