対象者

これからポートフォリオサイトを作ろうとしている方
- 特にテック企業を目指している就活前の方など
React, Dockerを勉強・使用したい方

背景

就職活動に向けて、自分の実績をまとめたポートフォリオサイトを作成しています。
今回は、開発環境をローカルに直接インストールせず、Docker を活用して構築することにしました。手元で変更をすぐに確認できる環境を整えるのが目的です。

React アプリの Docker 環境構築や、GitHub Pages へのデプロイに関する記事はそれぞれ存在しますが、両者を一貫して解説する記事は意外と少ないと感じました。

そこで本記事では、「Docker 上で React アプリを開発し、それを GitHub Pages にデプロイする」までの一連の手順を、再現しやすく丁寧にまとめていきます。

参考記事

開発

作業環境

MacBook Air M2
Docker v28.2.2
Docker Desktop (Mac) v4.42.0
- windowsの方はWindows版のDockerをインストールしてください

1. 事前準備

Dockerのインストール
- Windows に Docker Desktop をインストール
- Docker を使ってみる
Githubのリポジトリ作成

2. Reactプロジェクトの生成

以下のものをルートディレクトリに作成して下さい
- ポートフォリオサイトのソースコードを格納するディレクトリを作成
  - 今回はmy-resume-siteと命名します
- compose.yamlというファイルを作成
  - 以下のコードを記述してください
```
services:
resume-app:
    image: node:24-bookworm-slim
    volumes:
    - ./:/app
    stdin_open: true
    tty: true
    working_dir: /app/
```
ターミナルからこのcompose.yamlを元に、コンテナを起動します

$ docker compose up -d

このコンテナに入り、Reactのプロジェクトを生成します

$ docker compose exec resume-app bash # コンテナ侵入
---
$ npx create-react-app my-resume cd my-resume # JavaScriptで構築
$ npx create-react-app my-resume --template typescript # typescriptで構築

my-resume-siteの中に以下のようなファイルが作成されているか確認

my-resume-site
├── build/
├── node_modules/                  
├── package-lock.json
├── package.json
├── src
│   └── App.js etc...
├── public
│   └── index.html etc...
└── README.md

上記のファイル群があるかどうかを確認後、コンテナから退出

$ exit # コンテナ内
---
$      # ローカル環境

3. Dockerコンテナ上でテスト環境を構築

compose.yamlを修正します
- imageをbuildに変更し、カレントディレクトリを指定
- volumesの: の前にreactのプロジェクト名を指定
  - 今回は- ./my-resume-site:/appとしている
- portの3000番を開放する
  - これにより、ブラウザで確認することができる
  - http://localhost:3000

services:
  resume-app:
    build: .
    volumes:
      - ./my-resume-site:/app
    stdin_open: true
    tty: true
    working_dir: /app/
    ports:
    - 3000:3000

Dockerfileを用意し、以下のコードを記述する

FROM node:24-bookworm-slim

WORKDIR /app
# 必要なツールをインストール
RUN apt-get update && apt-get install -y git && rm -rf /var/lib/apt/lists/*

RUN npm install -g create-vite

再度コンテナを起動する

$ doker compose build # Dockerfileをもとにビルド
$ docker compose up -d # ビルドしたコンテナイメージを起動する
$ docker compose exec resume-app bash # コンテナに侵入
---
$ npm run build # reactアプリケーションのビルド
$ npm start # reactアプリケーションの起動

上記の作業が完了すると、ブラウザで確認することができます
- http://localhost:3000
- 以下のような画面が現れると思います
終了時はCtrl+Cで終了できます。
compose.yamlを修正し、Docker起動と同時にreactを起動するように設定する

services:
  resume-app:
    build: .
    volumes:
      - ./my-resume:/app
    stdin_open: true
    tty: true
    working_dir: /app/
    ports:
    - 3000:3000
    command: sh -c "npm install && npm start" # 追加する

4. デプロイを行う

目標はreactの最初の画面をGitHub Pagesで閲覧できる状態
package.jsonの修正
- GitHub PagesでReactアプリをビルドする際に生成するHTML, CSS, JavaScriptのパスを調整する役割がある

{
  "name": "my-resume-site",
  "version": "0.1.0",
  "homepage": "https://username.github.io/Portfolio/", // 追加
}

GitHubのリモートリポジトリの設定
workflowの構築

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source
        uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
          cache-dependency-path: my-resume/package-lock.json

      - name: Install dependencies
        run: npm ci
        working-directory: ./my-resume-site #自分で命名したディレクトリ名

      - name: Build site
        run: npm run build
        working-directory: ./my-resume-site # 自分で命名したディレクトリ名

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./my-resume-site/build #自分で命名したディレクトリ名

GitHubのリポジトリの設定を行う
- 「設定」から「Pages」のセクションを開く
- 「Source」セクションで、gh-pagesブランチを公開ソースとして選択し、保存する

5. 確認

公開されているページを確認する
- https://username.github.io/(リポジトリ名)にアクセスし確認する
- 変更が反映されるまで少々時間がかかりますので、ご注意ください

更新手順について

ローカルで変更の際にブランチを作成し、変更作業を行います。
Pull Requestを作成し、mergeしたタイミングでdeployを行う設定にしています。

修正前にお手持ちのリポジトリでブランチを作成する

$ git  checkout -b "ユニークなブランチ名"

変更を行う

http:localhost:3000で変更内容を視覚的に確認する

変更をcommitする

$ git add ~~
$ git commit -m "commitメッセージ"
$ git push -u origin "ブランチ名" #初回のみ
$ git push #2回目以降

Pull Requestの作成

GitHubのリモートリポジトリを開き、「create Pull Request」を選択
変更内容を確認

Mergeする

Pull Request内になる「Merge」を選択
デプロイ開始

公開されているページを確認する

https://username.github.io/(リポジトリ名)にアクセスし確認する

おわりに

以上の手順により、ローカル環境(自分のパソコン内)に直接npmをinstallせずにreact環境を構築し、GitHub Pagesにデプロイすることができました。今後は、自分でサイトのデザインや実装などを行って行く流れになりますので、自分自身のサイトデザインを作成してみてください！