【Raspberry Pi】【Vite】【Nginx】React WebアプリをDocker Composeで起動する方法！

社畜

他の記事も見てくれてる方はピンと来るかもしれませんが、今回は今までの内容が一斉に出てきます！

いよいよ実践編って感じです！DockerComposeの利用で簡単に同じ環境を作成できちゃいます！

ちゃちゃっと学んでいきましょう！

構成の理解とマルチステージビルドの採用

ViteでビルドされたReactアプリをラズパイで動かすために、マルチステージビルドを採用します。

ViteでビルドしたReactアプリをDockerで動かす際の設計思想、特にRaspberry Pi環境での最適な構成を理解します。

構成の概要

ReactやViteのようなモダンなフロントエンドのビルド成果物（静的ファイル）をサーバーで公開する場合、以下の2つの環境が必要になります。

【ビルド環境(Builder Stage)】

役割：Node.js、npm、Viteなどのツールを使って、ソースコードをブラウザが理解できる静的ファイル（HTML、CSS、JavaScript）に変換する（ビルド）

特徴：必要なスールが多く、イメージサイズが大きくなる

【実行環境(Production Stage)】

役割：ビルド済みの性的ファイルを公開するけいりょうなWebサーバーとして機能する。

特徴：ファイルを公開する機能だけでよいため、イメージサイズを極限まで小さくできる。

今回はNginxを使用します。

マルチステージビルドを用いると、ビルドステージで生成された静的ファイルだけを、クリーンで軽量な実行ステージ（Nginx）にコピーします。

これにより、最終的なコンテナイメージは数十メガバイトに抑えられ、Raspberry Piのようなリソースが限られた環境でも高速にデプロイ・起動できるようになります。

社畜

不要なものは入れずに軽く動く工夫をしてるってことか！！

SPA対応Nginx設定ファイルの作成

React Routerなどを使用したSPA（Single Page Application）では、Nginxに特殊な設定が必要です。コンテナ内に配置するNginx設定ファイルを作成します。

目的は存在しないURIへのアクセス（例: http://<IP>:8080/settings）をすべて

index.htmlにフォールバックさせ、React Router側でルーティング処理を行えるようにします。

#nginx.conf
server {
    listen 80;
    root /usr/share/nginx/html;

    location /viteapp {
        alias /usr/share/nginx/html/;
        try_files $uri $uri/ /index.html;
    }
}

Dockerfileの作成

マルチステージビルドを定義したDockerfileを作成します。

#/vite-project/Dockerfile
FROM node:lts-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN chmod +x ./node_modules/.bin/*
RUN npm run build

Docker Composeファイルの作成

フロントエンドのビルドと起動をまとめて定義します。

buildセクションでローカルのDockerfileを参照します。

services:
  vite-builder:
    container_name: vite-builder
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./data/dist:/app/dist
    command:  sh -c "cd /app && npm install && rm -rf /usr/share/nginx/html/* && npm run build && cp -r data/dist/* /usr/share/nginx/html && chmod -R 755 /usr/share/nginx/html"

  nginx:
    image: nginx:alpine
    container_name: nginx-proxy
    ports:
      - "80:80"
    volumes:
      - ./data/dist:/usr/share/nginx/html:ro
      # カスタムNginx設定ファイルのマウント
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - vite-builder
    restart: always

社畜

docker-composeを定義しておくと、ビルドから起動時の設定まで

簡単に反映できるんですね！

Raspberry Pi上でのビルドと起動

フォルダ構成は下記のような感じです。

このフォルダをVSCodeからSSH接続を使用して、Raspberry Piにの/home/user/Public配下にデプロイします。

SSH接続をした状態で、Publicに移動します。

cd Public

docker-compose.ymlを使用して、ビルドと起動を行います。下記のコマンドを実行します。

docker compose up -d

Raspberry PiのIPを見に行って、WebAppが公開されているか確認しましょう。

社畜

これで、DockerComposeをつかって、WebAppの起動までできました。

動作確認もばっちりですね！今はソースコードを手動でRaspberry Piにコピーしてるけど、

自動でデプロイできるようにGitHubActionsを設定していきたいですね！

今回使ったソースコードはこちらです。

おわりに

今回はViteを使ったReactAppをDockerComposeを使って起動する方法を紹介しました。

通常はフロントエンドとNginxはセットで起動する方が簡単ですが、マイクロサービスのバックエンドも

リバースプロキシで制御することを見越して、Nginxは単体で起動する方法をとりました。

ほかのフロントエンドやバックエンドも追加して、どんなふうに設定を変えればいいか確認してみましょう！

社畜

Nginxのリバースプロキシの設定ってインフラ系の話かと思ってたけど、

開発側もしっかりしておかないとアプリが作れないな～なんて思いました。

幅広く知識をつけていきたいですね！