React 環境作成

Posted: January 25, 2022

React 環境作成

普段GCPのCloud shellを使ってるので、そこで作業しようと思ったが、Nodeのバージョンが12でcreate-react-appが使えなかったので、Dockerで環境作ることにする

Dockerfile

とりあえず動くように最低限セッティング。cloud shellはポート3000が使用されてしまっているので、デフォルトポートを4000に変更する

FROM node:16

RUN apt-get update
RUN apt-get install -y sudo

RUN npm install -g npm@8.3.2 typescript@4.5.5 ts-node@10.4.0

RUN sudo chmod -R 777 ~/
RUN sudo chown -R 1000:1000 "/root/.npm"

ENV PORT 4000

WORKDIR /usr/src/app

docker imageの作成

docker image build -t react_docker .

コンテナの作成

docker container run -itd -p 4000:4000 -v <your_volume>:/usr/src/app react_docker /bin/bash

React プロジェクトの作成

sudo npx create-react-app hello-world --template=typescript

実行してみる

cd hello-world
npm start

できた

An image from Notion