アプリ開発からデプロイまで1人で実践してみよう

1. はじめに

文系出身の2年目のエンジニアです。
業務の合間に、JavaのSpringBootフレームワークでアプリを開発し、WEB、AP、DBサーバーを作成し、デプロイまで自分でやってみるという挑戦をしていました。
基本的に無料で出来る上にかなり勉強になった実感があるので、実際に行った内容と進め方をこちらにまとめます。
私と同じような、初心者の方の参考になれば幸いです。

2. 目次

• 1. はじめに
• 2. 目次
• 3. 概要
  • 3.1. 内容
  • 3.2. 目的
  • 3.3. 進め方
• 4. 作業詳細
  • 4.1. 序盤：Java（Spring Boot）で予約管理アプリを開発
    • 4.1.1. 課題内容
    • 4.1.2. 実施した作業
  • 4.2. 中盤：VM上にサーバーを手動構築してアプリをデプロイ
    • 4.2.1. 課題内容
    • 4.2.2. 実施した作業
  • 4.3. 終盤：Podmanでアプリをコンテナ化＆OpenShiftを使用してオーケストレーション（←途中）
    • 4.3.1. 課題内容
    • 4.3.2. 実施した作業
• 5. 成果と展望
  • 5.1. 成果
  • 5.2. 展望

3. 概要

3.1. 内容

以下の４つのステップを踏んで、アプリ開発からデプロイまで一気通貫で1人で実践してみようという内容

• Java（Spring Boot）で予約管理アプリを開発
• VM上にサーバーを手動構築してアプリをデプロイ
• Podmanでアプリをコンテナ化
• OpenShiftを使用してコンテナをデプロイ（←途中）

3.2. 目的

• アプリ開発からデプロイまで一連のプロセスを経験してみることで、Webシステムの全体像を把握できるようになること。
• アプリの設計・開発に関する基礎的な知識・技術を身に着けること。
• WEB、アプリ、DBサーバーからなる基本的なWEB三層アーキテクチャを理解して、1人で構築できるようになること。Linux操作に慣れること。
• コンテナ、コンテナオーケストレーションに関する基礎的な知識を身に着けること。

3.3. 進め方

• 各フェーズの最初に、先輩から課題を提示してもらう。
• 基本的にはノーヒントで、調べながら手を動かして課題をクリアしていく。

4. 作業詳細

実施した作業をざっくりとだけ書いていきます。ヒントにしていただければと思います。

4.1. 序盤：Java（Spring Boot）で予約管理アプリを開発

4.1.1. 課題内容

• 課題1：開発環境の準備
  • Eclipce IDEを使用して、開発・テストができるように準備
• 課題2：要件を満たしたアプリの開発
  • 【Java】SpringBootで美容院の予約管理システムを作成してみた - Qiitaを参考にしつつ、下記要件を満たしたアプリを実装
    （下記要件を満たそうとするには参考コードに修正を加える必要があります。）

  - 業務要件
    - 美容院の予約システム
    - 営業時間は9:00～20:00（最終受付 18:00） 火曜定休
    - 担当は2名。週5日稼働。（定休日以外の任意の曜日が休み）
    - メニューは、カット（1h）、パーマ(1.5h)、カラーリング(2h)の3種類。
    - 予約時は、会員登録必須。
    - 予約の登録(2日前まで)、確認、変更、取消。
    - 名前、住所、メールアドレス、電話番号、希望メニュー、担当をDBに格納。
    - 各日付の予約ページにてDBから予約情報を出力し、空いている時間を見ることが可能。
    - 予約完了時に10桁の予約番号を発行。トップページから予約番号を入力することで予約内容を確認することが可能。
  

  - システム要件
    - javaでの開発
    - フレームワークはSpring Bootを使用
    - DBはPosgreSQL
    - ソース管理はGit
  

4.1.2. 実施した作業

1. 開発環境の準備

   • JDKのインストール
   • Eclipce IDEのインストールと環境設定
   • SpringBootプロジェクトの開発環境準備
   • PostgreSQLのインストールとDB作成

2. JavaとSpringフレームワークの勉強

   • 本とWebサイトを頼りながら、Javaの基礎文法やSpringフレームワークについて勉強
     • スッキリわかるJava入門 という本を読み切る
     • Springフレームワーク入門というサイトを読み切る
   • 参考コードを弄って遊んでみる

3. お題の要件を満たすように実装

   • 画面設計

     • 最初にページ毎の簡単なワイヤーフレームを手書きで作成して、実装しながら追加したり消したり修正を繰り返していました。

     • 画面一覧

       ファイル名	内容
       login	ログインページ
       register	会員登録ページ
       top	ログイン後のトップページ
       reservationCreate	新規予約作成ページ
       reservationSuccess	予約作成完了ページ
       reservationDetails	予約詳細ページ
       reservationChange	予約変更ページ
       changeSuccess	予約変更完了ページ
       cancelSuccess	予約削除完了ページ
       userinfo	会員情報ページ
       userinfoChange	会員情報変更ページ
       userinfoChangeSuccess	会員情報変更完了ページ
       error	エラー用ページ

   • DB設計

     • 最初にふんわりとだけ定義書を作成して、実装しながら追加したり消したり修正を繰り返していました。
     • テーブル一覧
       

       テーブル名	役割
       calendar	営業日のカレンダー情報を管理するマスタ
       menu	メニューの内容と所要時間を管理するマスタ
       stylist	スタイリスト情報を管理するマスタ
       users	顧客情報（ユーザーデータ）を管理するマスタ
       reservation	顧客の予約情報を管理するテーブル

   • 各クラスやHTMLファイル、プロパティファイルを配置するためのディレクトリを準備

     • コントローラー
     • サービス
     • リポジトリ
     • エンティティ
     • HTMLファイル
     • application.propertiesファイル（準備したローカルホスト上のDBへの接続情報を記入）

   • 各機能を実装

     • ログイン機能：ユーザー名とパスワードを入力し、認証が成功したらトップ画面にリダイレクト
     • 予約登録機能：日付、時間、メニュー名、スタイリスト名を指定して予約を登録
     • 予約確認機能：予約番号、日付、時間、メニュー名、スタイリスト名を表示
     • 予約変更機能：日付、時間、メニュー名、スタイリスト名を変更して予約を更新
     • 予約削除：予約を削除
     • ユーザー登録：ユーザー名、パスワード、名前、電話番号、メールアドレス、住所を入力し、ユーザー登録
     • ユーザー情報確認：ユーザー名、名前、電話番号、メールアドレス、住所を表示
     • ユーザー情報変更：名前、電話番号、メールアドレス、住所を変更してユーザー情報を更新

4.2. 中盤：VM上にサーバーを手動構築してアプリをデプロイ

4.2.1. 課題内容

• 課題1：VMを立ててWEB3階層システム構築し、作成したアプリをデプロイ
  • Virtual Boxを使用して下記サーバを作成
    • WEBサーバ（soft：apache）
    • APサーバ（soft：tomcat java servlet）  
  • ローカルホスト上のpostgreSQLと連携
  • WEBサーバにアクセスして、APサーバで実行しているアプリを確認
• 課題2：AWSでのWEB3階層システム構築（使えるAWS環境があれば）
  • AWSで下記サーバーを作成
    • WEBサーバ（EC2 t2.small soft：apache）
    • APサーバ（EC2 t2.small soft：tomcat java servlet）
    • DBサーバ（RDS postgreSQL　テスト用シングル構成 t2.small） 
  • WEBサーバにアクセスして、APサーバで実行しているアプリを確認

4.2.2. 実施した作業

1. Virtual BoxでVM作成
   • Ubuntuのisoで作成
   • VMのネットワークはNAT＋ポートフォワーディング（50080→80、80080→8080）に設定
2. Apacheインストール
3. Tomcatインストール
4. ApacheとTomcatのプロキシ設定
5. warファイルをTomcatにデプロイ
   • warファイルを準備
   • Tomcatのwebapp/配下にデプロイ
6. ブラウザからWEBサーバーにアクセスし、アプリを確認

4.3. 終盤：Podmanでアプリをコンテナ化＆OpenShiftを使用してオーケストレーション（←途中）

4.3.1. 課題内容

• 課題1：作成したアプリをPodmanでコンテナ化
  • Docker Composeを使用し、アプリとDBを両方コンテナ化
  • ローカルホストでコンテナを起動し、ブラウザからアクセスを確認
• 課題2：Openshiftでオーケストレーション実践（←途中につき、完了次第追記します。）
  • Openshift Sandbox環境を使用して、アプリをデプロイ

4.3.2. 実施した作業

1. 環境準備（Windows前提）

   • WSLにpodman、podman composeのインストール
   • WSL上にJava実行環境準備

2. Dockerfileの作成

   • プロジェクトのルートディレクトリ配下に、Dockerfileを作成

3. Docker Composeファイルの作成

   • プロジェクトのルートディレクトリ配下に、docker-compose.ymlを作成

4. Spring Bootアプリをビルドしてjarファイルを作成

5. podman composeでコンテナ起動

6. ブラウザからコンテナ内のアプリにアクセス確認

5. 成果と展望

5.1. 成果

• システムの全体像への理解が深まった
  • これまで業務内ではDB設計やサーバー構築など一部の工程だけに関わることが多く、知識が断片的になっていたが、すべての工程を経験することでシステムの全体像を把握できた。
  • 基礎的なアーキテクチャの全体像を理解したことで、マイクロサービスやCI/CDといったモダン技術が何の要望に応えるために存在しているのかもイメージしやすくなった。
• 1人でアプリを作って動かせるという自信が身についた
  • 全く触ったことがない言語やフレームワークでも、ググればなんとか形にできる

5.2. 展望

• セキュリティを意識して改善してみる

  • SSL証明書の発行や認証・認可の強化など、実際に必要な設定を取り入れる。
  • Webアプリケーションの脆弱性（SQLインジェクションなど）を防ぐための対策を実践してみる。

• CI/CDパイプラインを構築してみる

  • クラウド上のCI/CD系のサービスやJenkinsを活用し、コードのビルド、テスト、自動デプロイの流れを作る。
  • コード変更をスムーズに行える、効率的な開発環境を実現する。

• マイクロサービス化して、各機能を独立したサービスに分割してデプロイしてみる

  • 予約機能や顧客管理機能などを独立したサービスとして分割してみる。
  • APIゲートウェイを使った連携や、RESTなどサービス間通信を試す。