はじめに
Reactを使う機会が今後増えそうなので、dockerで開発環境構築できるように調べてみました。
Reactアプリケーションの作成
Dockerfileを記述します。
FROM node:latest
WORKDIR /app
docker-compose.ymlを記述します。
docker-compose.yml
services:
app:
build: .
command: npm start
volumes:
- .:/app
ports:
- 3000:3000
yarnを使う場合は
docker-compose.yml
services:
app:
build: .
command: yarn start
volumes:
- .:/app
ports:
- 3000:3000
commandを書かなくても動きそうと思うかもしれませんが、docker compose run だと書かれているポート番号が無視されてしまうので書いた方が楽だと思います
この状態でDockerfileとdocker-compose.ymlが置いてあるディレクトリで以下のコマンドを打って、イメージを作成します。
docker compose build
そして、reactのアプリケーションを作成します。
docker compose run --rm app sh -c "npx create-react-app yourproject"
yarnコマンドで行う場合は
docker compose run --rm app sh -c "yarn create react-app yourproject"
にしてください
--rm:コマンド実行後にコンテナを削除します
sh -c:シェルを利用して、コマンドを実行させます。
ターミナルに
We suggest that you begin by typing:
cd helloapp
npm start
Happy hacking!
が出てきて、
lsコマンドで以下のようになったら大丈夫です。
ls
Dockerfile docker-compose.yml yourproject
reactアプリの起動
Dockerfileを修正します。
FROM node:latest
WORKDIR /app/yourproject
COPY yourproject/package.json ./
RUN npm install
COPY ./yourproject .
yarnは
FROM node:latest
WORKDIR /app/yourproject
COPY ./yourproject/package.json ./
RUN yarn install
COPY ./yourproject .
Dockerfileの修正が終わったら、
docker compose up --build
でイメージの作成、コンテナの立ち上げを行います。
以下のアドレスに参照して
http://localhost:3000
以下の画像のようになれば、構築完了です。
おまけ
HelloReact!を表示させてみようと思います。
HelloReact.jsxを作成して記述します。
HelloReact.jsx
const HelloWorld = () => {
return(
<h1>HelloReact!</h1>
)
}
export default HelloWorld
App.jsを以下のように修正します。
App.js
import logo from './logo.svg';
import './App.css';
import HelloWorld from "./HelloWorld";
function App() {
return (
<div className="App">
<body>
<HelloWorld />
</body>
</div>
);
}
export default App;
以下のURLで確認すると
