STEP8: docker-composeを利用して複数のサービスを動かす

このステップでは docker-compose の使い方を学びます。

📖 Reference

1. (復習) フロントエンドの docker image を作成する

STEP4を思い出しながらフロントエンドの docker image を作成しましょう。

typescript/simple-mercari-web以下にフロントエンド用の Dockerfile がすでに用意されています。これを変更しフロントエンドが docker 上で立ち上がるようにしましょう。

$ docker run -d -p 3000:3000 build2024/web:latest

を実行し、ブラウザからhttp://localhost:3000/が正しく開ければ成功です。

Docker Composeをインストールし、docker-compose -v が実行できることを確認しましょう

📖 Reference

Docker Compose のチュートリアルを一通りやってみましょう。

📌 チュートリアルではサンプルが Python で書かれていますが、Pythonの理解や環境は必須ではありません。これまでGoで開発していた人もこのチュートリアルに則って進めてください。

🔰 Point

以下の質問に答えられるか確認しましょう。

チュートリアルのdocker-composeファイルにはいくつのサービスが定義されていますか？それらはどのようなサービスですか？
webサービスとredisサービスは異なる方法で image を取得しています。docker-compose upを実行した際に、各imageはどこから取得されているか確認しましょう。
docker-composeでは、サービスから他のサービスのコンテナに接続することができます。webサービスは、redisサービスとどのように名前解決をし、接続していますか？

チュートリアルを参考にしながら、今回作成したサービスのフロントエンドとバックエンドのAPIをDocker Composeで動かせるようにしましょう

docker-compose.yml は mercari-build-training/ 以下に作成することにします。

以下の点を参考にしながら docker-compose.yml を作成しましょう。

使用する docker image
- (Option 1: 難易度 ☆) STEP4 と STEP6-1 でそれぞれ build した build2024/app:latest と build2024/web:latest を使う
- (Option 2: 難易度 ☆☆☆) {go|python}/Dockerfile と typescript/simple-mercari-web/Dockerfile から build するようにする
使用する port
- API : 9000
- フロントエンド : 3000
サービス間の接続
- フロントエンドはREACT_APP_API_URLという環境変数で設定されたURLのAPIにリクエストを送ります
- APIはフロントエンドにリクエストは送りませんがCORSという仕組みのために、どこからリクエストが来るのか知っておく必要があります FRONT_URLという環境変数でフロントエンドのURLを指定しています

docker-compose up でサービスを起動して以下のことができれば成功です。