はじめに
Reactを使う機会が今後増えそうなので、dockerで開発環境構築できるように調べてみました。
Reactアプリケーションの作成
Dockerfileを記述します。
FROM node:latest
WORKDIR /app
docker-compose.ymlを記述します。
docker-compose.yml
services:
app:
build:
context: .
dockerfile: Dockerfile
command: npm start
volumes:
- .:/app
ports:
- 3000:3000
この状態でDockerfileとdocker-compose.ymlが置いてあるディレクトリで以下のコマンドを打って、イメージを作成します。
docker compose build
そして、reactのアプリケーションを作成します。
docker compose run --rm app sh -c "npx 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 .
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">
{/*<header className="App-header">*/}
{/* <img src={logo} className="App-logo" alt="logo" />*/}
{/* <p>*/}
{/* Edit <code>src/App.js</code> and save to reload.*/}
{/* </p>*/}
{/* <a*/}
{/* className="App-link"*/}
{/* href="https://reactjs.org"*/}
{/* target="_blank"*/}
{/* rel="noopener noreferrer"*/}
{/* >*/}
{/* Learn React*/}
{/* </a>*/}
{/*</header>*/}
<body>
<HelloWorld />
</body>
</div>
);
}
export default App;
以下のURLで確認すると
