React + DockerでHello World

はじめまして、SE8年生の北山一郎です（誰？）
学習記録でもつけていこうかなと思いまして記念すべき一発目の記事です

はじめに

• macOSです
• React触ったことないからHello Worldしてみよう
• 業務でDocker使ってるし勉強がてらDocker環境を作ろう
• フロントエンドはReact、バックエンドは考えてない
• ホストマシンにnodeとかあまり入れたくない
  • ホストマシンにNode.jsが不要
  • プロジェクト作成とコンテナ起動が1コマンドで完結
  • 既にプロジェクトが存在する場合はスキップ
  • Dockerfile/docker-composeがシンプルに
  • デメリットは初回のプロジェクト作成時に少し時間がかかる

Docker環境作成

ディレクトリ構成

.
└── hello-world-react/
    ├── docker/
    │   └── react/
    │       └── Dockerfile
    └── docker-compose.yaml

Dockerfile作成

# ./docker/react/Dockerfile
FROM node:18

WORKDIR /app

ENV WATCHPACK_POLLING=true

CMD ["npm", "start"]

docker-compose.yaml作成

docker-compose.yaml

name: hello-world-react

services:
  front:
    build: ./docker/react
    volumes:
      - ./app:/app
    ports:
      - "3000:3000"

コンテナ作成&起動

$ docker compose up -d --build

セットアップスクリプト作成

setup.sh

#!/bin/bash

# appディレクトリが存在しない場合のみ実行
if [ ! -d "app" ] || [ ! -f "app/package.json" ]; then
    # 一時的なコンテナでReactプロジェクトを作成
    docker run --rm -v $(pwd)/app:/app node:18 bash -c "cd /app && npx create-react-app . --template typescript"
fi

# Reactアプリケーションを起動
docker compose up -d --build

スクリプト実行

# スクリプトに実行権限を付与
$ chmod +x setup.sh

# セットアップと起動を実行
$ ./setup.sh

http://localhost:3000で動作確認
↓のページが表示されていればOK👍

「Hello World!!」を表示

./app/src配下にHelloWorld.tsxを作成

#app配下は大分略しています
.
└── hello-world-react/
    ├── app/
    │   └── src/
    │       ├── App.tsx
+   │       └── HelloWorld.tsx
    ├── docker/
    │   └── react/
    │       └── Dockerfile
    ├── docker-compose.yaml
    └── setup.sh

内容はシンプル

HelloWorld.tsx

export const HelloWorld = () => {
  return (
    <div>
      <h1>Hello World!!</h1>
    </div>
  );
}

作成したHelloWorld.tsxをApp.tsxに読み込ませる

App.tsx

import React from 'react';
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" />
        <HelloWorld /> {/* ここを追加 */}
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

http://localhost:3000で動作確認
→のページが表示されていればOK👍
→

まとめ

• Vue.jsの書き方に似てると思った
• こういう小さいプログラムだとViteなどのビルドツールは無しでも問題ない
• setup.shの# 一時的なコンテナでReactプロジェクトを作成でホストマシンを汚さずにプロジェクト作成ができた
• .mdの書き方に少し慣れてきた

今後のReact学習

ToDoアプリとか何か作る中でReactの特徴に触れていけたらなと