【環境構築】DockerでReactをnpmを使用して作成&起動する方法（JavaScript編）

背景

• 【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動＆作成方法があることをご紹介しました。
• この記事は、「1.1.npmでJavaScriptを使用してReactプロジェクトを作成する方法」の解説記事になります。

目標

• npmでJavaScriptを使用してReactプロジェクトを作成できるようになる。

npmでJavaScriptを使用してReactプロジェクトを作成する方法

• docker-react-npm-javascriptをcloneし、起動に必要なdockerfileをローカルに準備します。

• Dockerfileの中身は以下のようになっており、nodeをベースイメージとして使用しています。

Dockerfile

#nodeの19.4.0をベースに使用する
FROM node:19.4.0

• 以下のコマンドでdockerを起動します。

docker起動コマンド

$docker-compose up -d --build

• vscodeでコンテナ内部に入ります。vscodeでコンテナ内部に入る方法は【環境構築】Docker container内部にVS Codeで入って作業する方法を参照ください。
• vscodeでターミナルを起動し、作業用にdocker-compose.ymlでマウント時に作成された作業用のディレクトリに移動します。

作業用ディレクトリに移動

$cd ../react_npm_javascript_workdir/

• npx(node package executer)のcreate-react-appツールを使用して、reactのアプリの雛形を作成します。
• create-react-appの後ろにくる文字列が作成されるディレクトリ名になります。（ここでは、react_npm_javascriptというディレクトリが作成されることになります。）

reactアプリの雛形の作成

$npx create-react-app react_npm_javascript

• reactのアプリをinstallするかを聞かれるのでyを入力してEnterを押します。

Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) 

• 作成されたディレクトリに移動します。

作成されたディレクトリに移動

$cd react_npm_javascript/

• reactを起動します。

react_start

$npm start

• 起動が成功すればご自身のPCで設定されているデフォルトのブラウザでreactが起動されます。

参考資料

個人ブログ