レガシーなWebアプリの裏側
みなさんはWebアプリを作成したことがありますか。おそらくこの記事を見ているほとんどの人が経験したことがあると思います。私も実際に新人研修でWebアプリを作成したことがあります。ですが作成したアプリが「どのように」「どの経路で」「どうやって」Web上で見ることができるのか知っている人は少ないのではないでしょうか。やったことあるという人でも、書いてある手順通りににやってみたらできた。なんて人も多いのではないでしょうか。今回はそのことについて、配属先での研修でやったことを書いていこうと考えています。
使用環境
- Oracle VM VirtualBox バージョン 6.1.26 r145957 (Qt5.6.2)
- Ubuntu Server 20.04.2 LTS
- Eclipse IDE for Enterprise Java and Web Developers, Version: 2021-06 (4.20.0)
- Spring Tools 4 (aka Spring Tool Suite 4)
- Tomcat 9
- MySQL Ver 8.0.26-0Ubuntu0.20.04.2 for linux on x86_64
- Tera Term 4.106
VM環境
初めに、VirtualBoxをインストールし、そこにUbuntuをインストールしました。このVirtualBox上のUbuntuをサーバーとして使用します。さらにちゃちゃっとTomcat9とMySQLもUbuntuサーバーにインストールしてしまいます。
ここで使用しているコンピュータとVirtualBoxとで通信の設定を行いました。VirtualBoxのipを確認したところ、10.0.2.15であったので、ここにTera Termでssh接続を試みます。結果は
何も設定していないのですから当然です。
なぜこうなったのかというとコンピュータ内にあるVirtualBoxに接続しようとしているのに、コンピュータ外の10.0.2.15に接続しにいったからです。これを回避するのにVirtualBoxの設定でポートフォワーディングの設定を行います。
VirtualBoxの設定→ネットワークで高度タブを開き、ポートフォワーディングをクリックし以下のように設定します。
再度接続を試みますが、今度は127.0.0.1:2222に接続します。すると、無事接続できました。
実際どのようになっているのかというと、以下のような図になっています。
図1: ポートフォワードで VM にアクセスする仕組み
ポートフォワーディングの設定ができたところで一旦サーバーから離れてWebアプリを作成していきます。
Webアプリ作成
今回はWebアプリの通信経路等の学習が目標であるのでアプリ自体はどんなものでも関係ありません。このサイトの通りにそのままアプリを作成します。ブラウザからhttp://localhost:8080/にアクセスしてサイトが表示されれば1段階目は終了です。
次に、データベースに接続します。データベースは先程UbuntuにインストールしたMySQLを使用します。こちらのサイトを参考に作成していきます。ただ、ローカルにMySQLがないので、データベース接続設定が先のサイトとは異なります。
まず、MySQLの設定をします。外部からアクセスできる権限のあるユーザーを作成します。また、アドレスバインド設定もします。このあたりは調べればいくらでも記事があるのでここでは省きます。
次にVirtualBoxのポートフォワーディングの設定を行います。設定は以下のように行いました。ホストポートは使用されていないポートであれば何番でも構いません。
最後にWebアプリの接続設定です。application.propertiesを以下のように設定します。
usernameとpasswordは先ほど作成したMySQLのユーザーを使用してください。
設定が完了して、アプリを実行し、ブラウザでhttp://localhost:8080/user/listを開くとDBの値が取得できているはずです。
現段階の通信経路は以下のようになっています。
図2: ローカルの Web アプリが VM の DB を参照する仕組み
しかし、これではSpring BootアプリはEclipse上で開発環境として動作しているだけなので、本番ではUbuntuのTomcatのサーバーにデプロイしなければなりません。最後に本番環境(UbunutuのTomcat)にデプロイする方法とその後の通信経路について説明します。
本番環境
- WARファイルの作成
先ほど作成したWebアプリをデプロイするためのWARファイルを作成します。しかし、先ほどの接続設定では繋がらないのでapplication.propertiesの設定のspring.datasource.urlの値をjdbc:mysql://localhost:3306/sampledbにします。ユーザーはローカルからアクセスできる権限があれば変更しなくても大丈夫です。
変更したところで、Eclipseのファイル→エクスポートからWARファイルを選択し、任意の場所にエクスポートします。これでデプロイするWARファイルの作成ができました。 - ポートフォワーディング設定
接続経路が変わるのでポートフォワーディングの設定も以下のように書き換えます。
- Tomcatにデプロイ
http://localhost:22222/manager/html/に接続してTomcatのマネージャを開きます。少し下の「WARファイルの配備」のところでエキスポートしたWARファイルを選択し、配備します。
以下のようになっていれば成功です。
ブラウザからhttp://localhost:22222/springSample/user/listに接続確認をして完了です。
最後に本番環境デプロイ後の通信経路の図を載せておきます。
図3: ブラウザから直接 VM の Web アプリを参照する仕組み
最後に
実際の実用化されてるアプリはVirtualBox内が1つのコンピュータとして、インターネットに出ていく過程でルーター等経由したり、VirtualBox内でもTomcatより前にApache等のアプリケーションを経由したりで複雑です。(まだ勉強中なので違うかもですが)
研修はまだまだ続き、この後VirtualBox環境をラズベリーパイ実装したり(これはほぼ終了しています)、AWS環境に実装したりと進んでいく予定です。
まだまだ勉強中で用語の間違い等あったかもしれませんが、もし間違いがあればコメント等でご教授いただけると幸いです。