【Docker第4回】WEBアプリを構築し、Dockerで開発環境を構築する準備をする

【Docker第4回】WEBアプリを構築し、Dockerで開発環境を構築する準備をする

第4回はWEBアプリを構築し、Dockerで開発環境を構築する準備をしていきます。

Dockerに入門したのに、すぐにDockerを学ばずWEBアプリを構築する理由は、Dockerを理解する上で重要だからです。

というのも、開発現場ではDocer上で単体で何かを開発するよりは、フロントエンド、バックエンド、DB、インフラなどを包括的に構築することが多いため、双方で行われている通信や処理をある程度把握しておいた方が、Dockerを理解する上で有利だからです。

なお、本記事は以下のUdemy講座を参考に学習内容をまとめていますが、コードは記載しておらず概要の記載のみにとどめておきます。

講座内でNginx、Sinatra(ruby), MySQLによるWEBアプリを作成しており、講座の購入者はコードもダウンロードできますので、詳しくは講座にてご確認いただければと思います。

筆者はRubyの実装経験はほとんどありませんでしたが、とてもわかりやすく、問題なく対応できたのでおすすめです。


【参考記事】


【関連記事】


WEBアプリの構築

WEBアプリを構築し、Dockerで開発環境を構築する準備をしていきます。

WEBサイトとWEBアプリの違い

静的サイト

  • WEBサーバーはHTTPリクエストの内容に従って対応するファイルをHTTPレスポンスに含めて返す
  • 静的サイトでは、固定のHTML ,CSS ,JavaScriptだけでサイトを実現する

WEBアプリケーション

  • WEBサーバがHTTPリクエストを受け取る
  • リクエストの内容を踏まえて、プログラムを実行留守
  • プログラムがHTMLやJSONを生成して返す

WEBアプリ作成/ハンズオン手順

ハンズオン手順の詳細とコードに言及するのは差し控えますので、詳しく知りたい方は以下のUdemyの講座を受講されると良いかと思います。かなり分かりやすかったです。

構築自体は、Rubyを実装したことがない私でも数時間で構築できましたし、その後学ぶDockerの講義がすんなり頭に入ってきました。
【参考資料】
>> 【Udemy】Linux とネットワークの基礎から学ぶ Docker 入門


ハンズオンの主な手順

  • サーバの準備/HTMLの実装
  • Ruby(Sinatra)のHello World
  • Nginxのリバースプロキシ設定
  • フロントエンド(JS)とバックエンド(Sinatra)の疎通
  • タスク一覧の取得処理を実装
  • タスクの登録処理を実装
  • JavaScriptの改善
  • MySQLのインストールとテーブルの作成
  • SinatraでMySQLとやり取り

処理の流れ

処理の流れは、Udemyの講座内でも紹介されておりますが、3層構造のWEBアプリにおいて一般的な流れですので、記載させていただきました。

以下の流れを把握した上でDockerを構築するととても理解が進みました。

#######################
# リクエストの流れ
#######################
+----------------------+
|      Browser         |
+----------------------+
1 ---> request to HTML
2 <--- response from HTML
  ## Nginx配下のindex.htmlが呼ばれる
  ## ブラウザに表示される

3 ---> request ro JavaScript
4 <--- response from JavaScript
5-1 ---> request to WEB Server
  ## index.htmlに記載「script src = "main.jp"」に従い、
  ## 「main.js」にはAPPサーバからfetchするように書かれている 
+----------------------+
| WEB Server (Nginx)   |
+----------------------+
5-2 ---> request to APP Server

+----------------------+
| APP Server (Sinatora)|
+----------------------+
5-3 ---> Ruby ---> SQL
  ## Sinatraに記載されたconnect関数が呼ばれ、DBに接続する
  ## DBに接続後、SQLを実行してデータを取得 → その結果を返す

#######################
# レスポンスの流れ
#######################
+----------------------+
| DB (MySQL)           |
+----------------------+
6-1 <--- response from SQL

+----------------------+
| APP Server (Sinatora)|
+----------------------+

+----------------------+
| WEB Server (Nginx)   |
+----------------------+
6-2 <--- response to WEB Server on JSON
6-3 <--- JavaScript generates Display by using JSON
 ## JavaScriptがJSONで返ってきた値を元に画面生成し、ブラウザに表示する

+----------------------+
|      Browser         |
+----------------------+

上記処理のポイント2つ

各プログラムがどこで実行されているか

  • JavaScriptはブラウザで実行されている
    ※プログラムはサーバー上に格納されているが、ブラウザから取得されてブラウザで動いている
  • RubyはGCP上のサーバーで実行されている

どのタイミングで何と何が通信しているか

  • JavaScriptはfetchが書いてあるタイミングでWEBサーバ(Nginx)に向けて通信している
  • Nginxは/apiがついていればAPPサーバ(Sinatra)に通信する
  • Sinatoraは「connect」と書いてあればDBサーバと通信する(DBに接続してSQLを実行する)