dockerでReactを実行するまでの環境構築手順。[CentOS8]

Contents

1 はじめに
2 CentOS8のイメージ取得〜React実行まで
- 2.1 CentOS8のイメージ取得〜コンテナのログインまで
- 2.2 必要なモジュールのインストール

はじめに
CentOS8のイメージ取得〜React実行まで
1. CentOS8のイメージ取得〜コンテナのログインまで
2. 必要なモジュールのインストール

はじめに

本日はDockerのCentOS8のイメージでReactを実行できるまでを簡単に解説します。

WEBを見ても、纏まっているものがないため、dockerのクリエイトから
Reactの実行までをスコープとしています。

＃環境はMacを想定しています。

CentOS8のイメージ取得〜React実行まで

Dockerはネットで調べて頂き、自身でインストールをお願いいたします。

CentOS8のイメージ取得〜コンテナのログインまで

まずはCentOS8のイメージを取得します。

docker pull centos:centos8

次にホスト側のブラウザでアクセスできるように、
下記のコマンドを叩き、Reactデフォルトのlocalhost:3000にアクセスできるようにします。

docker run -p 3000:3000 -v $PWD:/root -it centos:centos8 bash

新しくrunしたコンテナのIDを確認して、execでコンテナにログインします。

#プロセスの確認
docker ps -a

#コンテナへログイン（xxxxxはコンテナID）
docker exec -it xxxxx bash

必要なモジュールのインストール

Reactを実行するためのプロジェクトために、今回はcreate-react-appを利用します。
（create-react-appは本当に便利です！）

#create-react-appをインストールするために、npmを事前にインストールします。
dnf -y install npm

#create-react-appをインストールする。
npm install -g create-react-app

#好きなディレクトリまで移動して、Reactプロジェクトを作成します。
#(私の場合は、usr/src/配下で作成。)
cd usr/src/  
create-react-app sample-project

ここまでくれば、あとはサービス起動のみです。
プロジェクトに入って、npm startをしましょう。

#ディレクトリの移動
cd sample-project
#サービススタート
npm start

下記のような文言が標準出力されますので、
http://localhost:3000へホスト側のPCよりアクセスしてみてください。

Compiled successfully!

You can now view investment-simulation in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.17.0.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

きっと、下記のような画面が出力されるはずです。

ということで、Reactの実行までの手順解説となります。