Docker✖️ReactアプリケーションをRender.comにデプロイする

今パートの目標
作業用ブランチを作成する
Dockerfileを編集する
mainブランチにマージする
Render.comにデプロイする
CORSエラーの解消
まとめ

今パートの目標

前回はSpringBootアプリケーションをRenderにデプロイしました。
今回はフロントエンドのReactをRender.comにデプロイして本番環境でフロントエンドとバックエンドの通信をやっていきたいと思います。

作業用ブランチを作成する

下記コマンドを実行し、作業用ブランチを作成します。

share-favplace-front % git checkout develop
share-favplace-front % git pull origin develop
share-favplace-front % git checkout -b develop_20240310_render_settings

Dockerfileを編集する

#
# Build stage
#
FROM node:21-bullseye-slim AS builder

ARG WORKDIR

ENV HOME=/${WORKDIR} \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0

WORKDIR ${HOME}

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

#
# Production stage
#
FROM nginx
ARG WORKDIR
ENV HOME=/${WORKDIR}
COPY --from=builder ${HOME}/build /usr/share/nginx/html

マルチステージビルドを使用して本番環境ではWebサーバーにNginxを使用します。
マルチステージビルドについては前回を参照してください。

docker-compose.ymlを編集する

version: "3.9"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
      target: builder
      args:
        WORKDIR: ${WORKDIR}
    container_name: share-favplace-front
    env_file:
      - ./environment/react-app-variables.env
    command: npm run start
    volumes:
      - .:/${WORKDIR}
    ports:
      - "${FRONT_PORT}:${FRONT_PORT}"

開発環境ではビルドターゲットを指定するように修正します。

mainブランチにマージする

変更をGitHubにPUSHし、develop_20240310_render_settings → develop → mainの順にプルリクエストを作成し、マージします。

mainブランチまでマージできたらアプリケーションをRender.comにデプロイします。

Render.comにデプロイする

DashBoardから「Web Service」で新しいサービスを作成します。

サービスの設定をしていきます。

環境変数を設定します。

Reactアプリ内で使用する環境変数はSecret Fileとして設定します。

REACT_APP_API_URLには前回作成したAPIのアプリケーションのURLを設定しています。

追加設定はHealth Check PathとDockerfile Pathだけ入力し、それ以外はデフォルトにしています。

ここまでできたら完了を押下し、デプロイしましょう。

デプロイできたらサイトにアクセスし、APIへのリクエストボタンを押下します。

しかし、何もレスポンスが返ってこないと思います。
デベロッパーツールのネットワークタブを見ると正しいリクエストは送れているけどCORSにより通信ができていないことがわかります。
なので、API側でフロントの通信を受け入れるように変更していきます。

CORSエラーの解消

APIの方で環境変数の設定をします。
WebMvcConfigクラスで設定したCORSの設定ですが、フロントのURLを環境変数から取得し設定するようにしているため、本番環境の環境変数を設定すれば完了です。

package com.pandaman.sharefavplaceapi.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        final String origin = System.getenv("FRONT_URL");
        registry.addMapping("/**")
               .allowedOrigins(origin)
               .allowedMethods(CorsConfiguration.ALL);
    }
}

変更を保存すると自動でデプロイが走るので、完了まで待ちます。

完了したら再びフロントのURLへアクセスし、リクエストボタンを押下してHelloWorldが帰ってくることを確認できたら完了です！

まとめ

今回でRender.comにバックエンド、フロントエンド両方をデプロイし、通信を行うところまでできました。
Render.comがUIもわかりやすく、デプロイするのが想像以上に簡単ですごいですね。。。😇
勉強用には十分ですね！

次回はJDBCを使用してデータベースから取得した値をフロントに表示させるをやりたいと思います。