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

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

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

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

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

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

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

【参考記事】

• 【Udemy】もう怖くないLinuxコマンド。手を動かしながらLinuxコマンドラインを5日間で身に付けよう
• 【Udemy】【3週間で学ぶ】Amazon Linux Bash シェルスクリプト実践講座！！初心者でも1からマスターする
• 【Udemy】Linux とネットワークの基礎から学ぶ Docker 入門

【関連記事】

• 【第1回】Dockerインストール→Linux(CentOS7)を起動
• 【第2回】Linuxの概要／GCPでUbuntuをインストール
• 【第3回】WEBサーバを構築（Nginx）／ネットワークの概要
• 【第4回】WEBアプリ構築／Dockerでの環境構築準備
• 【第5回】Dockerの概要
• 【第6回】Dockerのインストール・作成・起動・停止
• 【第7回】PHPの開発環境を構築（PHPとApacheのみ）
• 【第8回】PHPの開発環境を構築（docker-composeで複数コンテナを一括で起動）
• 【第9回】PHPの環境構築_その2_(環境構築自動化)

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の講座内でも紹介されておりますが、３層構造の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を実行する）