11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Docker】データベース・バックエンド・フロントエンドをつなぐ no.21

Last updated at Posted at 2021-06-30

パンプキン カフェ (9).png

こんにちは。まゆみです。

Dockerについての記事をシリーズで書いています。

前回の記事では、Dockerのネットワークの概要について書いてきました。

今回の記事では、Dockerのネットワークのより具体的な内容、および、ネットワークを使う時の注意点について書いていこうと思います

見出しを追加 - 2021-06-30T081946.671.png

Databaseにmongodbを

Backendにはnodeを

FrontendにはReactを

使って、実際に上記の3つのContainerが同じネットワーク内でどのように情報をやり取りする事ができるのか書いていきます。

ではさっそく始めていきますね。

#ネットワークを使うとどう便利になるの?

1.png

Containerは、基本的に同じネットワーク内に存在しないと、コミュニケーションは取れません。(-pオプションを使ってつながない限り)

ですが

①『docker network create』コマンドで新しいネットワークを作り
②その作ったネットワーク内に複数のContainerを入れると
③同じネットワーク内のContainerが『Containerの名前』によってコミュニケーションを取れる

ようになります

IPアドレスなどを探す手間や、-pオプションを使う手間も省け便利ですね。

下記に具体的にするべきことを書いていきますね。

#ネットワークを使う時の準備

まず、

docker network create <あなたの好きなネットワーク名>

によって、ネットワークを作っておいてください。

ちなみに、

docker network ls 

で今あるネットワークのリストを表示することができるので、ネットワークを作った後、ちゃんとできたか確認することができます

#それぞれのContainerを同じネットワーク内に作る

Containerをrunする時に『--network <あなたの付けたネットワーク名>』オプションを付けて実行する事で、別々のContainerを同じネットワーク内に作ることができます

--networkを使うことによって、今まで『-p オプション』を付けてContainerにコミュニケーションを取らせていたプロセスを実行しなくて済むことになります

では、Database, バックエンド、フロントエンドのContainerをどのようにつなぐか、順にみていきます。

##データベースmongodbのContainerをオフィシャルのImageから作る

2021-06-30_9-01-54.png

mongodbにはdocker hubにオフィシャルのImageがありますから、そこから直接引っ張ってきてContainerを作りましょう

docker run --name <あなたの好きなContainer名> --network <先ほど作ったネットワーク名> --rm -d mongo 

『--name <あなたの好きなContainer名>』オプションによって、Containerに名前を付けることができます。

そしてそのContainer名によって同じネットワーク内のContainerがコミュニケーションする事ができるようになるのです。

##バックエンドnodeのContainerを起動させる

次にバックエンドを組み立てていきましょう

必ずしもnodeでなくても良いのですが、何らかの言語やライブラリーでソースコードを書いて、Dockerfileなど作っていることが前提で書いていきますね。

docker run --name <あなたの好きなContaine名> --network <先ほど作ったネットワーク名> --rm -d <Image名>

このコマンドを実行するのを、少し待ってくださいね。

###ソースコードを書き換える

先ほど、「同じネットワーク内にあるContainerはContainer名でコミュニケーションできる」と言いました。

ソースコードの中の、アクセス先のアドレスをContainer名に書き換えましょう

例としてmongodbとnodeのアプリをつなぐために、どう書き換えるか書いています。

mongodbを使った事がない人は、mongoose.connectの使い方だけ調べてみてください。

2021-06-30_9-16-36.png

ソースコードを書き替えたら、必ずImageをrebuildしてからContainerをrunしてください。

##フロントエンドReactのContainerを起動させる

では最後にReactのContainerを実行しましょう

『同じネットワーク内にあるContainerはContainer名で呼び合う』からと下のスクショにあるように、赤で囲まれた部分をContainer名にしてはいけません

2021-06-30_9-31-13.png

もし、Container名に書き換えて実行した場合は

『ERR_NAME_NOT_RESOLEVED』というエラーが出ます。

上記のエラーは、ドメインに関するエラーが発生している時に出るエラーです。

###エラーの原因は?

エラーの原因は、Reactのコードはnodeのコードと違い、サーバー上ではなく、ブラウザー上で動いているからです。

ゆえに、ReactのコードはContainer内ではなく、サーバー上で実行されています

なので、Reactに限らずサーバー上で動くライブラリーを使う時は注意が必要です。

Reactが他のContainerとコミュニケーションを取れるようにしたい時、ReactのソースコードはContainer名に書き換えず、そのままlocalhostと連絡させます。

###ReactのContainerを改めて実行する

では上記のことを踏まえて、改めてReactのContainerを実行してみます。

docker run -p 3000:3000 --rm -d -it <ImageID>

また今回の記事とは関係なく、余談になりますが、ReactのContainerを実行するとき、『-it』オプションを付けて実行しないとうまく行きません。

##バックエンドのnodeのContainerを改めて実行する

先ほど実行したバックエンドのContainerをストップさせてください

そして改めて、run させますが、注意が必要です。

docker run --name backend -p 80:80 --network <ネットワーク名> --rm -d <ImageID> 

今回は『-p 80:80』も『--network <ネットワーク名>』も二つのオプションが必要です。

-p 80:80 はReactとつなげるため

--network は同じネットワーク内にあるmongodbとつなげるため

になります。

#まとめ

今回の記事はここで締めくくらせていただきます。

ネットワークの理解は、頭の中で『どことどこがつながっているのか』想像しながら手を動かして実際にコードを書いた方が理解しやすいと思います

ただ、Container同士のネットワークをつなげようとすると、毎回コマンドが長くなりがちで面倒くさかったと思います(--networkオプションを付けたり、-pを使ったり。。。)

ということで、また別の記事で改めて『docker-compose』の作り方を書いていこうと思います。

docker-composeを上手く利用すれば、あの長いコマンドを毎回打たなければならない面倒くささから解放されます。\(^o^)/

よろしくお願いいたします <(_ _)>

11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?