コンテナーを使った開発

もくじ

説明

ここまでに Docker Desktop をインストールしたので、アプリケーション開発を進めていきます。 特に以下のことを行います。

  1. 開発プロジェクトをクローンして進めていきます。
  2. バックエンド、フロントエンドにそれぞれ変更を加えます。
  3. 変更が即座に反映されることを確認します。

試してみよう

このハンズオンガイドでは、コンテナーを使った開発方法を学んでいきます。

プロジェクトの開始

  1. まずはじめに、対象プロジェクトをクローンするか、あるいは ZIP ファイルのダウンロード を行ってローカルマシンに保存します。

    $ git clone https://github.com/docker/getting-started-todo-app

    プロジェクトのクローンを行ったら、クローンによって生成されたディレクトリに移動します。

    $ cd getting-started-todo-app

  2. プロジェクトが用意できたので、Docker Compose を使って開発環境を取り扱っていきます。

    CLI を使ってプロジェクトを起動するには、以下のコマンドを実行します。

    $ docker compose watch

    コンテナーイメージがプルされていることや、コンテナーが起動する状況などが書かれたメッセージが表示されます。 この時点で出力内容をすべて理解していなくても問題はありません。 このメッセージは 1、2 分程度で終了します。

  3. ブラウザーを開いて http://localhost にアクセスし、アプリケーションが起動していることを確認します。 アプリの起動には数分程度要するかもしれません。 アプリは単純な todo アプリです。 適当に 2、3 のアイテムを追加してみたり、アイテムの削除を行ってみてください。

    初回起動直後の todo アプリのスクリーンショット

この環境内にあるものは？

環境が整い稼働したわけですが、その中身はいったいどういうものなのでしょう？ 高度なことを言えば、そこにはいくつかのコンテナー (あるいはプロセス) があって、それぞれはアプリケーションが必要としている所定のサービスを提供しています。

  • React フロントエンド - Node コンテナーであり、 Vite を利用して React 開発サーバーが稼働しています。
  • Node バックエンド - このバックエンドは todo アイテムの参照、生成、削除を実現する API を提供します。
  • MySQL データベース - 複数のアイテムを保持するデータベースです。
  • phpMyAdmin - http://db.localhost へのアクセスを通じてデータベースとのやり取りを行うことができる、ウェブベースのインターフェースです。
  • Traefik プロキシー - Traefik はアプリケーションプロキシーであり、リクエストを適切なサービスに振り分けます。 localhost/api/* に対するリクエストはすべてバックエンドに、また localhost/* に対するリクエストはすべてフロントエンドにそれぞれ送信します。 そして db.localhost へのリクエストは phpMyAdmin に送信します。 アプリケーションへのアクセス機能はすべてポート 80 番を使って提供します (各サービスに対しては別のポートを利用します)。

この環境で開発者は、サービスのインストールや設定、データベーススキーマの定義、データベースへの資格情報の設定などは行う必要がありません。 必要なのは Docker Desktop だけです。 これ以外はすべて勝手に動作してくれます。

アプリへの変更作業

この環境を稼働させたら、次はアプリケーションにちょっとした変更を加えてみます。 そこから Docker がいかにして、そのフィードバックを素早く示してくれるのかを見ていきます。

あいさつ文の変更

ページ上部に示されるあいさつ文は、/api/greeting という API 呼び出しにより実現しています。 今のところ、その呼び出し結果は常に "Hello world!" を返します。 この部分を、3 つのランダムなメッセージの中から選び出される 1 つを返すように変更しましょう。

  1. backend/src/routes/getGreeting.js ファイルをテキストエディターで開きます。 このファイルは API エンドポイントへのハンドラーを提供しています。

  2. 最上段の行にて、変数定義をあいさつ文の配列定義に変更します。 以下に修正方法を示しますが、内容は好きなように書き換えてください。 そして配列の中からランダムにあいさつ文が取り出されるように、API エンドポイントを修正します。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    const GREETINGS = [
    "Whalecome!",
    "All hands on deck!",
    "Charting the course ahead!",
];

module.exports = async (req, res) => {
    res.send({
        greeting: GREETINGS[ Math.floor( Math.random() * GREETINGS.length )],
    });
};

  3. ファイルの保存がまだであれば保存します。 ブラウザー表示を更新すると、新たなあいさつ文が表示されるはずです。 表示更新を繰り返していけば、あいさつ文のすべてを見ることができるはずです。

    todo アプリの新たなあいさつ文を示したスクリーンショット

入力欄テキストの変更

アプリを見てみると、入力欄には単純に "New Item" が表示されています。 このテキストを変更して、もう少し説明を加えた意味のあるものにしましょう。 ついでにアプリのスタイルについても簡単な変更を加えてみます。

  1. client/src/components/AddNewItemForm.jsx ファイルを開きます。 このファイルは todo リストに新規アイテムを追加するコンポーネントを提供しています。

  2. Form.Control 要素の placeholder 属性を修正して、表示させたい内容に変更します。

    33
34
35
36
37
38
39

    <Form.Control
    value={newItem}
    onChange={(e) => setNewItem(e.target.value)}
    type="text"
    placeholder="What do you need to do?"
    aria-label="New item"
/>

  3. ファイルを保存してブラウザーに戻ります。 ブラウザー上ではアプリ再起動をしなくてもホットリロード機能により変更結果が確認できます。 変更内容が気に入らなければ、好きなように変更してください。

アイテム追加テキスト欄におけるテキストを更新した todo アプリのスクリーンショット

背景色の変更

アプリケーションへの変更の最後に、色の変更を行っておきます。

  1. client/src/index.scss ファイルを開きます。

  2. background-color 属性を調整して望みの背景色を設定します。 このスニペットでは Docker の海のテーマに合わせた薄青色としています。

    IDE を利用している場合は、カラーピッカー機能を使って色設定を行うことができます。 そうでない場合は、必要に応じて カラーピッカー をご利用ください。

    3
4
5
6
7

    body {
    background-color: #99bbff;
    margin-top: 50px;
    font-family: 'Lato';
}

    ファイル保存によりブラウザー上では即座に変更を確認することができます。 好みの色が得られていなければ調整を続けてください。

    テキスト欄と背景色を変更した todo アプリのスクリーンショット

こうして作業が終了しました。 ウェブサイトの更新作業、おつかれさまでした。

まとめ

これより先に進む前に、もう一度、ここで行った内容を思い起こしてください。 ほんの数分の中で、以下のことができるようになりました。

  • インストールの手間ひまをいっさいかけずに、完全な開発プロジェクトを構築しました。 コンテナー化された環境は開発環境を提供するものです。 その中では必要となることをすべて行うことができます。 マシン内には Node、MySQL をはじめすべての依存パッケージを自分でインストールする必要はありません。 必要となるのは Docker Desktop とコードエディターだけです。

  • アプリへの修正を加え、それを即座に確認しました。 これが実現できた理由は、1) 各コンテナー内に稼働しているプロセスは、ファイル変更を常に監視しておりそれに応じた対処が可能であるからであり、2) ファイルはコンテナー化環境内において共有されているからです。

上のことをすべて Docker Desktop が行っているわけですが、実現できることは他にも多々あります。 コンテナーを使うという考えを持った時点で、どのような環境であっても作成できたも同然であり、それを開発チーム内で共有することが可能です。

次のステップ

アプリケーションの修正を行うことができたので、これをコンテナーイメージとしてパッケージングし、特に Docker Hub と呼ばれるレジストリにプッシュする方法について学んでいきます。

初めてのイメージ作りとプッシュ