【備忘録】react&nginx&node.jsでdocker【即react】

即開発開始

react&nginx環境を、すぐに構築できる方法があるので記録として残しておく。
Dockerってやっぱり便利だ。JavaやC#環境ではこうはいかない。
ビルドして、依存に気をつけてってやっていたのが嘘のようだ。
何回Apacheの設定、Catalinaの設定につまづいたことか。。。

まず、Node.jsがインストールされているか、dockerがインストールされているか確認しましょう。

docker

$ docker -v                                      
Docker version 26.1.5+dfsg1, build a72d7cd

node

$ node -v
v20.18.1

どちらも大丈夫でした。

次にdocker-compose.yml、Dockerfileを作成します。

docker-compose.yml

# version: "3"　バージョは削除しました

services:
 app:
   build:
     context: .
     dockerfile: Dockerfile
   volumes:
     - ./src:/app/src
   ports:
     - "3000:3000"

Dockerfile

FROM node:16-alpine

WORKDIR /app

COPY package.json ./

COPY package-lock.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

同フォルダで下記コマンドを実行します。

プロジェクト作成

npx create-react-app react-nginx-docker

Happy hacking!
〜〜〜〜〜〜〜〜〜〜〜
上記のメッセージが出たら作成できています。
react-nginx-dockerというフォルダができていると思います。
そのフォルダの中で下記コマンドを実行してください。

react開始

npm start

できました！