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

今パートの目標
環境について
作業用ブランチを作成する
Render.comとは
Dockerfileを編集する
HealthCheckAPIを作成する
Render.comにデプロイする
mainブランチにマージする
まとめ

今パートの目標

前回はReactとAxiosを使用してAPIのHelloControllerに向けてリクエストを送信し、取得した結果を画面に表示する、フロントエンドとバックエンドの通信を行いました。
今回はSpringBootアプリケーションをRenderにデプロイし、本番環境の構築をしていきたいと思います。

環境について

Next.js 14.2.3
Typescript 5
SpringBoot 3.2.0
java 17
git 2.43.0
macOS Sonoma 14.1.1
Docker Desktop 4.18.0

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

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

share-favplace-api % git checkout develop
share-favplace-api % git pull origin develop
share-favplace-api % git checkout -b develop_20240121_render_settings

Render.comとは

様々な Web アプリケーションを簡単に Deploy 可能にする PaaS であり、静的サイトから Web アプリまで幅広いアプリケーションを簡単に運用できるサービスです。

以前はHerokuを利用していましたが無料プランが廃止されてしまったため、無料プランがありかつ勉強用としては十分な機能があるRender.comを使っていきます。

▼参考

【格安本番運用が可能に】Render.com のメリット・デメリットを Heroku と比較してみた

Dockerfileを編集する

Render.comにデプロイできるようDockerfileを編集します。

#
# Build stage
#
FROM amazoncorretto:17 AS builder
ARG WORKDIR
ENV HOME=/${WORKDIR} \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0
WORKDIR ${HOME}
COPY ./ ${HOME}
RUN ./gradlew build
#
# Package stage
#
FROM amazoncorretto:17-alpine
ARG WORKDIR
ENV HOME=${WORKDIR} \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0
COPY --from=builder ${HOME}/build/libs/share-favplace-api-0.0.1-SNAPSHOT.jar share-favplace-api.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","share-favplace-api.jar"]

ここではDockerのマルチステージビルドを使用しています。
開発用にはアプリケーションのビルドに必要な全てが含まれるDockerfileを使用し、プロダクト用にはアプリケーションおよび実行に必要なもののみが含まれるスリム化されたDockerfileを使用するというのを一つのファイルで実現できる機能です。

ビルドステージの指定

ビルド時のコマンドにtargetを指定すると指定したステージのみをビルドすることができます。

$ docker build --target build

docker-composeから指定する場合も同じくtargetを追加します。

  api:
    build:
      context: .
      dockerfile: Dockerfile
      target: builder
      args:
        WORKDIR: ${WORKDIR}
    container_name: share-favplace-api
    env_file:
      - ./environment/api-variables.env
    tty: true
    command: ./gradlew bootRun
    volumes:
      - .:/${WORKDIR}
    ports:
      - "${API_PORT}:${API_PORT}"
      - "${DEBUG_PORT}:${DEBUG_PORT}"
    depends_on:
      - db

▼参考

マルチステージビルドの利用

マルチステージイメージを使って、イメージサイズを小さく維持する。

HealthCheckAPIを作成する

Render.comがアプリの監視やゼロダウンタイムのデプロイに使用するためのヘルスチェック用APIを追加します。

- src
  └ main
    └ java
      └ {パッケージ名}
        └ controller
      　　└ HealthCheckController.java

package com.pandaman.sharefavplaceapi.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/v1")
public class HealthCheckController {
    @GetMapping("/healthcheck")
    public String healthcheck() {
        return "health check ok";
    }
}

ここまで変更できたらgithubにプッシュしておきましょう。

share-favplace-api % git add -A
share-favplace-api % git commit -m "Renderデプロイ用にDockerfileを修正"
share-favplace-api % git push origin develop_20240121_render_settings

Render.comにデプロイする

下記にアクセスし、GitHubのアカウントからRender.comに登録します。

Render | The cloud for builders

Deploy and scale any app or agent from your first user to your billionth. Build faster on intuitive cloud infrastructure...

アカウント登録し、ログインできたらデプロイの設定をしていきます。
まず下記画面からWeb Serviceを選択します。

Build and deploy from a Git repositoryを選択し、次へ進みます。

GitHubのデプロイしたいリポジトリを選択します。

アプリケーションの設定をしていきます。

フリープランを選択します。

環境変数に「WORKDIR=app」を追加します。

追加設定をします。

HealthCheckPathは先ほど作成したヘルスチェックのパスを記載します。
上記以外はデフォルトでOKです。

ここまできたら完了です

mainブランチにマージする

GitHubからmainブランチに向けてプルリクエストを作成し、アプリケーションを本番環境にデプロイします。
先ほどの設定でmainブランチを指定したので、mainブランチに変更があるたびRender.comがそれを検知してデプロイを実行してくれます。

GitHubにログインすると先ほどPushしたブランチからプルリクエストを作成するアラートが表示されていると思うので、「Compre&Pull Request」からプルリクエストを作成し、マージします。
develop_20240121_render_settings → develop → mainの順にマージします。

mainブランチまでマージすると画像のようにRender.comのダッシュボードのSTATUSが「Deploying」となりDeployが自動で走っていると思います。

STATUSが「Deployed」になれば成功です。
実際にリクエストを送信して確認してみましょう。

「https://share-favplace-api.onrender.com/api/v1/hello」にアクセスし、「Hello World」が返ってきたら成功です。

ちなみにデプロイしたアプリケーションのURLはサービストップの以下で確認できます。

まとめ

以上でSpringBootアプリケーションをRenderにDeployできました。
DBの接続に関してはまだできていないので後ほどやっていきます。
次回はフロントエンドのReactをRenderにデプロイして本番環境でフロントエンドとバックエンドの通信をやっていきたいと思います。