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

2023.04.21

背景

目標

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

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

GitHub - takuma-competition/docker-react-npm-javascript: javascriptを使用してnpmでreactを起動するdockerfileと手順を記したリポジトリ
javascriptを使用してnpmでreactを起動するdockerfileと手順を記したリポジトリ - takuma-competition/docker-react-npm-javascript
github.com
  • Dockerfileの中身は以下のようになっており、nodeをベースイメージとして使用しています。
#nodeの19.4.0をベースに使用する
FROM node:19.4.0
  • 以下のコマンドでdockerを起動します。
$docker-compose up -d --build

$cd ../react_npm_javascript_workdir/
  • npx(node package executer)のcreate-react-appツールを使用して、reactのアプリの雛形を作成します。
  • create-react-appの後ろにくる文字列が作成されるディレクトリ名になります。（ここでは、react_npm_javascriptというディレクトリが作成されることになります。）
$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を起動します。
$npm start
  • 起動が成功すればご自身のPCで設定されているデフォルトのブラウザでreactが起動されます。

参考資料

docker-compose コマンド概要 — Docker-docs-ja 1.12.RC2 ドキュメント
docs.docker.jp
dockerの-dオプション、デタッチドモードって何？ - Qiita
-dで実行されるモード。デタッチドモード。docker-compose up -d nginx mysql-dはデタッチドモードのオプション。バックグラウンドでcontainerを立ち上げる。###バッググラウンドで立ち上げるとは…
qiita.com
プロジェクトを実行！npm startの使い方【初心者向け】 | TechAcademyマガジン
初心者向けにnpm startの使い方について解説しています。npmコマンドを使ってファイルやプロジェクトの実行をすることができます。node inspectorを実行してデバッグするサンプルプログラムを実際に書いています。
magazine.techacademy.jp
よく見かけるNode.js・npm・npx・yarnが何かをまとめた | Vueは友達
Node.js・npm・npx・yarnはプログラミングを始めた時は何をしているか分からずとりあえず使っていたがちゃんと理解した方がいいと思ってまとめた記事
newsite-make.com

Qiita記事

【環境構築】DockerでReactをnpmを使用して作成&起動する方法（JavaScript編） - Qiita
背景【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動＆作成方法があることを…
qiita.com