GNU/Linux >> Linux の 問題 >  >> Panels >> Docker

このMERNスタックチュートリアルソリューションでDockerを利用する

アプリケーションの開発中に、MERNアプリケーションをすべてのコンピューターと互換性のあるものにする方法を探していますか？あなたは正しい場所に来ました！アプリケーションをDockerizeすると、このMERNスタックチュートリアルがまさに必要なものになります。

このチュートリアルでは、MERNスタックのDocker化の基本、その仕組み、さまざまなアプリケーションでの実装方法を学習します。

アプリケーションをDocker化して互換性の問題を読み、解決してください！

前提条件

このチュートリアルは、実践的なデモンストレーションになります。フォローする場合は、次のことを確認してください。

  • DockerDesktop4.5.0以降がインストールされています。
  • ノード16.0以降がインストールされています。
  • Dockerでサポートされているオペレーティングシステム–このチュートリアルではWindows10を使用しています。
  • 仮想化が有効で、Linuxカーネルがインストールされている（Windows用）。
  • APIテストサービス（Postman）。

Dockerのセットアップ

Dockerは、アプリケーションの構築、テスト、デプロイ、および管理を高速化するソフトウェアプラットフォームです。 Dockerはコンテナーを使用して、アプリケーションを任意の環境で実行するために必要なすべての依存関係とオペレーティングシステム構成を格納します。

MERNスタックをDocker化する前に、まずDockerファイルを使用してカスタムノードイメージを作成する必要があります。

1. Dockerアプリケーションを開いて、Dockerが正常に起動したかどうかを確認します。以下では、ステータスバー（左下）が緑色であるため、Dockerエンジンが実行されていることがわかります。

2.次に、 MERN-Dockerという名前のプロジェクトフォルダを作成します 。このフォルダには、このチュートリアルのすべてのリソースが含まれます。

3. .jsを作成します プロジェクトフォルダ（ MERN-Docker ）にある好みのコードエディタでファイルを作成します ）。ファイルには好きな名前を付けることができますが、ファイルの名前は server.js です。 このチュートリアルでは。 server.js ファイルには、ノードアプリケーションのすべてのコードが含まれます。

4.ターミナルを開き、次のnpmコマンドを実行してアプリケーションを初期化し（init –y）、 package.json を作成します ファイル。

npm init --y

5.最後に、以下のコマンドを実行してexpressをインストールします 依存関係。ノードアプリケーションのAPIを作成できます。 

npm i express

Expressサーバーのセットアップ

MERNアプリケーションを初期化し、エクスプレス依存関係をインストールした後、単純なエクスプレスサーバーをセットアップします。このチュートリアルでは、単純なExpressサーバーを使用して、ExpressアプリケーションとNodeアプリケーションをドッキングする方法を示します。

1. server.jsを開きます ファイルを作成し、エクスプレスGETを作成します /へのルート 。

以下のコードは、GETリクエストが http：// localhost：5000 に送信されると、ウェルカムメッセージを送信します。 。

//Importing and creating an instance of express
const express = require("express");
const app = express();

//Setting PORT to 5000 if PORT is not listed in environmental variables.
const PORT = process.env.PORT || 5000;

// Creating the `GET` route
app.get("/", (req, res) => {
  res.send("<h2>Welcome Friends</h2>");
});

//Starting the express server
app.listen(PORT, () =>
  console.log(`Server running at http://localhost:${PORT}`)
);

2.次に、以下のnodeコマンドを実行して、エクスプレスアプリケーションを起動します。

node server.js

アプリケーションが正しく実行されている場合は、以下の出力が表示されます。

3.最後に、 http：// localhost：5000にGETリクエストを送信します PostmanなどのAPIテストサービスを使用して、エクスプレスルートをテストします。

このMernStackチュートリアルでのカスタムイメージの作成と構築

ルートを設定したら、次のステップは、ベースイメージを使用してExpressアプリケーションをDockerコンテナに統合することです。このチュートリアルでは、ノードの公式ベースイメージを使用してコンテナを設定します。

1. Dockerfileという名前のファイルを作成します 次のコードを入力します。これにより、アプリケーションのカスタムノードイメージが作成されます。カスタマイズされた画像を使用すると、画像にソースコードを追加したり、画像の構成を追加したりできます。

# Sets the base image of the application to the node’s official image.
FROM node:17

# Sets the Working Directory as "/server"
WORKDIR /server
# Copies the package.json file into "/server" and runs npm i
COPY package.json /server
RUN npm i
# Copies the entire source code into "/server"
COPY . /server

# Specifies the port the node app will be running on
EXPOSE 5000

# Runs "node server.js" after the above step is completed
CMD ["node", "server.js"]

2.以下のdockerbuildコマンドを実行して、作業ディレクトリ（。）に（-t）node-imageというカスタマイズされたイメージを作成します。

docker build -t node-image .

以下の出力は、Dockerが Dockerfileをどのように使用するかを示しています。 イメージを作成します。

3.最後に、以下のdocker imageコマンドを実行して、ビルドされたすべてのイメージを一覧表示します（ls）。

docker image ls

以下に、作成したノードイメージを含む、使用可能なすべてのイメージを示します。

nodemonの設定

カスタムノードイメージの構築に成功しました。これはすばらしいことです。ただし、変更があった場合は、アプリケーションの開発に支援が必要になります。そこで、nodemonを追加する必要があります。

nodemonは、ファイルの変更が検出されると、アプリケーションを自動的に再起動します。ただし、最初にインストールする必要があります。

1. npmを実行します 以下のコマンドでnodemonをインストールします 開発依存関係として（--save-dev ）。 

npm i nodemon --save-dev

2.次に、 package.jsonを開きます 以下の構成を追加するには、お好みのコードエディタでファイルを作成してください。 

"scripts": {
    "start": "node server.js",
    "dev": "nodemon -L server.js"
},

3. Dockerfileを開きます CMDを変更します 以下のものへのコマンド。 

CMD ["npm", "run", "dev"]

4.最後に、以下のdocker buildを実行します イメージを再構築するコマンド（node-image ）。 

docker build -t node-image .

以下では、Dockerが2番目のステップでキャッシュされたデータのみをロードし、3番目から最後のステップまでコマンドを実行したことがわかります。この動作は、 package.jsonに加えた変更に起因します。 ファイル（Dockerキャッシング）。

ファイルとフォルダーを除外することでDockerの作成を高速化

おそらく、Dockerの作成を高速化し、機密コンテンツを保護したいと思うでしょう。その場合は、。 dockerignoreを作成します Dockerコンテナにコピーされないように無視するファイルとフォルダを指定するファイル。

1. .dockerignoreという名前のファイルを作成します 以下に示すように、テキストエディタを使用してファイルを一覧表示し、Dockerコンテナへのコピーから除外します。

node_modules
Dockerfile
.dockerignore

2.次に、次のdocker buildを実行します イメージを再構築するコマンド（node-image ）。 

docker build -t node-image .

3.イメージをビルドした後、以下のdocker runコマンドを実行して、ポート5000（-p 5000：5000）のnode-imageを使用してnode-appコンテナーを開始します。このコマンドは、 http：// localhost：5000を介してコンテナにアクセスできるようにします。 。

デフォルトでは、Dockerには他のマシンがDockerコンテナにアクセスできないようにするセキュリティメカニズムがあります。 Dockerコンテナにアクセスする唯一の方法は、アクセスポートを指定することです。 

docker run --name node-app -d -p 5000:5000 node-image

コンテナを停止するには、docker rmnode-app-fを実行します。

4.次に、以下のdocker psコマンドを実行して、アクティブなすべてのコンテナー（-a）を表示します。

 docker ps -a

以下に、Dockerコンテナ（node-app）がアクティブになっていることを確認できます。

5.以下のdockerexecコマンドを実行して、node-appコンテナー内でインタラクティブ（-it）シェル（bash）を開始します。

docker exec -it node-app bash

6.最後に、以下のdirを実行します .dockerignore内のファイルかどうかを確認するコマンド ファイルがコンテナに追加されました（node-app 。

dir

以下の出力で、 .dockerignoreにリストしたファイルを確認できます。 ファイルはnote-appDockerコンテナに含まれていません。

コンテナ内のnode_modulesフォルダは、Dockerfileからのnpmiコマンドによって生成されました。

Docker-composeを使用したノードイメージの作成

コンテナの基本的なライフサイクルである、コンテナの構築、開始、停止について学習しました。しかし、ライフサイクルはまだ改善できますか？ Docker-composeを使用すると、1つだけでなく多数のコンテナのライフサイクルを簡素化できます。

Docker-composeを使用すると、一連のコマンドを実行する代わりに、1つのDockerコマンドを実行してすべてのコンテナーを起動し、1つのコマンドを実行してすべてのコンテナーをシャットダウンするだけで済みます。これらのDockerコマンドは、 docker-composeにリストされている手順に従います。 ファイル。

Docker-composeの使用を開始するには、すべてのサービスとこれらのサービスの構成を含むYAMLファイルが必要です。これらの構成には、次のものが含まれます。

  • ビルド構成：これには、サービスおよびその他のビルドオプションのビルドに使用するDockerfileの場所が含まれます。
  • 画像：カスタム画像を作成する代わりに、hub.docker.comの画像を使用できます。
  • 環境変数：コード内の変数に構成を保存します。
  • ポート：このオプションは、アプリケーションが実行されるポートを指定します。
  • ネットワーク：このオプションを使用すると、あるコンテナが別のコンテナと通信できるようになります。

docker-compose.ymlという名前のYAMLファイルを作成します ファイルを作成し、以下の構成にデータを入力します。これにより、カスタムノードイメージが作成されます。

YAMLはインデントに敏感なので、適切なインデックスを使用してください。 

# Version of Docker-compose
version: '3.8'
services:
  # Service name
  node:
    # Creating a custom image
    build:
      # Location to the Dockerfile
      context: .
      # Name of the Dockerfile
      dockerfile: Dockerfile
    ports:
        # External port:Internal port
      - 5000:5000

以下のコマンドを実行して、ノードサービスを構築して開始します。

docker-compose up --build

Dockerコンテナにデータを永続化するためのボリュームの構成

ノードイメージを作成したら、静的データを保存し、ソースコードをコンテナ内のソースコードに同期する必要があります。どのように？ Dockerコンテナのボリュームとバインドマウントを構成する。

このチュートリアルでは、最初にボリュームの構成を開始します。 Dockerのボリュームは、Dockerコンテナの外部にあるディレクトリであり、そのコンテナのデータが含まれています。ボリュームは主に、ソースコード、ログファイルなどの永続データを保存するために使用されます。

1. docker-composeを開きます コードエディタでファイルを作成します。

2.nodeの下に以下のボリューム構成を追加します docker-composeのサービス ファイル。

以下の構成では、nodeVolumeという名前のボリュームを作成し、serverという名前のフォルダーにボリュームを格納します。ただし、ボリュームとフォルダの名前は自由に変更してください。

---
  node:
		---
		# ADD THE CONFIGURATION FROM THIS POINT to create a volume named nodeVolume
    volumes:
      # Syntax <nameOfVolume>:<directorInDocker>
      - nodeVolume:/server
# Making the node service volume accessible to other services.
volumes:
  # Declaring the node service volume.
  nodeVolume:

3.最後に、以下のコマンドを実行してイメージ（node-image）を再構築します。 

docker-compose up -d --build

ローカルディレクトリをDockerコンテナに同期するためのバインドマウントの構成

バインドマウントは、ローカルマシンのフォルダーをDockerコンテナーのフォルダーに同期するメカニズムです。バインドマウントはデータをコンテナに保存しますが、コンテナが削除されるとデータも保存されます。

バインドマウントは、主にデータが動的である（情報が頻繁に変更される）開発段階で使用されます。バインドマウントを使用すると、アプリケーションのソースコードに変更を加えるたびにアプリケーションを再構築する必要がありません。

バインドマウントを構成するには：

1. docker-composeを開きます ファイルを作成し、以下のコードをnodeに追加します volumesでのサービス 。

以下のコードは、アプリケーションの作業ディレクトリをコンテナ内の/appディレクトリに同期します。同時に、このコードは、ソースコードがappディレクトリのnode_modulesファイルに変更を加えることを防ぎます。

---
	node:
		volumes:
			---	 
			# ADD THE CONFIGURATION FROM THIS POINT to sync the working directory
			# for the application to the /app directory in the container
			- .:/server
			- /server/node_modules

2.以下のコマンドを実行して、ノードイメージを再構築します。 

docker-compose up -d --build

Dockerでアプリケーションの/appディレクトリからファイルを変更すると、フォルダが同期されるため、ローカルマシンのファイルに影響します。 Dockerがアプリケーションのソースコードに変更を加えることを制限するには、以下に示すように、読み取り専用オプション（：ro）をバインドマウント構成に追加します。 

 node:
   volumes:
     - ./:./server:ro # Adding the read-only option
     - - /server/node_modules

3. server.jsを開きます コードエディタでファイルを作成し、h1を置き換えます h5へのヘッダー 、以下に示すように、変更を保存します。 server.jsでのこれらの変更 ファイルを使用すると、バインドマウント構成が機能するかどうかをテストできます。 

app.get("/", (req, res) => {
  res.send("<h5>Welcome Friends</h5>");
});

4.次に、以下のコマンドを実行して、実行中のすべてのコンテナーを表示します。 

docker ps

5.次に、docker execを実行します インタラクティブシェルを実行するには、以下のコマンド（-it ）実行中のノードコンテナ（mern-docker_node_1 ）。 

docker exec -it mern-docker_node_1 bash

6.最後に、catを実行します server.js内に変更されたコンテンツを表示するには、以下のコマンドを実行します ノードコンテナ内のファイル。 

cat server.js

以下に示すように、ヘッダーがh5に変更されました。

MongoDBをMERNアプリケーションに接続する

MongoDBは、NoSQL、無料、オープンソース、クロスプラットフォームのドキュメント指向データベースプログラムです。このチュートリアルでは、MongoDBをセットアップし、前のセクションのノードサービスがMongoDBとどのように通信できるかを確認します。

docker-composeを開きます コードエディタでファイルを作成し、nodeの下に以下で指定された構成を追加します サービス。

この構成では、Mongoの公式Dockerイメージを使用してMongoDBサービス（コンテナー）を構築します。 

version: '3.8'
services:
  node:
    ...
		# ADD THE CONFIGURATION FROM THIS POINT to build the MongoDB service
    environment:
      - PORT=5000
			# For security, specify a username and password as environmental variables
      # Username for the mongo database
      - MONGO_INITDB_ROOT_USERNAME=mern
      # Password for the mongo database
      - MONGO_INITDB_ROOT_PASSWORD=merndocker
    # Enables the mongo service to start before the node service
    depends_on:
      - mongo
  # Name of mongo service
  mongo:
    # Official mongo image from docker.hub
    image: mongo
    environment:
      # Username for the mongo database
      - MONGO_INITDB_ROOT_USERNAME=mern
      # Password for the mongo database
      - MONGO_INITDB_ROOT_PASSWORD=merndocker
    volumes:
      # <nameOfVolume>:<directorInDocker>
      - mongoDB:/data/db
volumes:
  # Making the volume accessible by other containers
  mongoDB:

次に、docker-composeを実行します 以下のコマンドで--build モンゴサービスを開始します。

docker-compose up -d --build

以下に示すように、Dockerはmongoサービス用のボリュームを作成しています。

NodeJSをMongoDBにリンクする

mongoサービスを構築した後、NodeJSサービスをMongoDBにリンクできるようになりました。 NodejsをMongoDBにリンクすると、MongoDBデータベースにデータを保存できます。

サービスの名前を使用することは、さまざまなコンテナーと通信するための一般的な方法の1つです。また、このチュートリアルでは、mongoose依存関係を使用して、ノードサービスをMongoDBにリンクします。ただし、最初にマングースをインストールする必要があります。

1.以下のコマンドを実行して、mongooseをインストールします 。 

npm i mongoose

2.次に、 server.jsを開きます ファイルを作成し、以下のコードを追加します。このコードは、マングースの依存関係をインポートし、それを使用してNodeJSをMongoDBにリンクします。

以下のコードは、 docker-composeに環境変数として保存したユーザー名とパスワードを使用します ノードサービスをMongoDBに接続するためのファイル。

const mongoose = require('mongoose');

// Gets the Username and Password 
const MONGO_URI = `mongodb://${process.env.MONGO_INITDB_ROOT_USERNAME}:${process.env.MONGO_INITDB_ROOT_PASSWORD}@mongo:27017`;

// Creating the connect function
const connectDB = async () => {
  await mongoose
    .connect(MONGO_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    .then(() => console.log("Mongo connected successfully"))// Logs out successful when MongoDB connects.
    .catch((e) => {
      console.log(e.message);// Logs out the error message if it encounters any.
    });
};

// Calling the Connect Function
connectDB();

...

3.次に、以下のdocker-composeコマンドを実行して、ノードイメージを再構築します。

docker-compose up -d --build

4.最後に、次のコマンドを実行してアプリケーションのログを開き、MongoDBが正常に接続されたかどうかを確認します。 

docker-compose logs

以下に、MongoDBが正常に接続されていることを示します。

MERNアプリケーションへのRedisの追加

MERNアプリケーションの2番目のサービスとしてMongoDBを追加しました。次に、3番目のサービスとしてRedisを追加します。 Redisは、キャッシュされたデータとトークンを保存するために一般的に使用されるNoSQLデータベースです。

docker-composeを開きます ファイルを作成し、mongoの下に次の構成を追加します servicesの下のサービス 、以下に示すように。

この構成により、Redisの公式Dockerイメージがセットアップされます

services:
	---
  mongo:
		---
	# ADD THE CONFIGURATION FROM THIS POINT to set up the Redis service
  redis:
    image: redis

MERNアプリケーションのクライアント側のセットアップ

サーバー側でのアプリケーションのセットアップから、MERNアプリケーションのクライアント側としてのReactアプリのセットアップについて詳しく調べます。 Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。

1.以下のコマンドを実行して、単純なReactアプリケーションを作成します。このコマンドは、 clientという名前のディレクトリを自動的に作成します MERNアプリケーションのルートディレクトリにあります。 

npx create-react-app client

create-react-appコマンドは、以下の出力に必要なすべての依存関係のインストールを開始します。

2.インストールが完了したら、クライアントを開きます MERNアプリケーションのルートディレクトリにディレクトリを作成し、その中にDockerfileを作成します。 Dockerfileには別の名前を付けることができますが、Dockerfileの名前は react.dockerfile です。 このチュートリアルでは。

3.以下のコードをDockerfile（ react.dockerfile）に追加します。 、カスタムReactイメージを作成します。 

# Official node image
FROM node:17
# Setting the working directory to "/client"
WORKDIR /client

# Copies the package.json file into "/client" and run npm i
COPY package.json /client
RUN npm install
# Copies the entire react source code into "/client"
COPY . /client

EXPOSE 3000
# Starting the react app
CMD [ "npm", "start"]

4.次に、 docker-composeを開きます。 ファイルを作成し、コンテンツを以下のコードに置き換えます。

次のコードは、Dockerfileの場所とDockerfileの名前を持つサービスの下にreactサービスを追加します。

docker-composeファイルに追加するコードの一部を追加すると、これらの手順の最後の部分にコード全体が表示されます。 

# Version of Docker-compose
version: '3.8'
services:
  # Add the react service
  react:
		# Location to the dockerfile
	  context: ./client
	  # Name of the dockerfile
		dockerfile: react.dockerfile

5.volumesを構成します 、ports 、およびdepends_on 以下に示すように、オプション。 

    volumes:
        # Bind-mounts configuration
      - ./client:/client
        # Ignoring any changes made in "node_modules" folder
      - /client/node_modules
    ports:
        # External port:Internal port
      - 3000:3000
    depends_on:
        # Starts up the node service before starting up the react service
      - node

6.最後に、以下の構成を追加して環境変数を追加し、Dockerコンテナーでホットリロードを有効にします。ホットリロードは反応ページを更新し、そのコンポーネントを再レンダリングします。 

    environment:
      # Enabling hot reload
      - CHOKIDAR_USEPOLLING=true

上記の手順に従うと、以下の構成になります。

version: '3.8'
services:
  react:
    build:
      context: ./client
      dockerfile: react.dockerfile
    volumes:
      - ./client:/client
      - /client/node_modules
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    depends_on:
      - node
  node:
    ---
  mongo:
    ---
  redis:
    ---

結論

このチュートリアルは、Dockerを使用してアプリケーションをセットアップし、他のデバイスと互換性を持たせる方法を説明することを目的としています。そうだと思いますか？この時点で、MERNスタックアプリケーションの開発を強化するための基本を学びました。

次のステップとして、NGINXを使用してアプリケーションのプロキシを設定し、Dockerにデプロイする方法を学びませんか？


Docker

  1. DockerコンテナにApacheを使用してModSecurityをインストールする

  2. Dockerを使用してJenkinsをインストールする方法

  3. Dokkuを使用してFlaskアプリケーションをデプロイする

  1. Dockerガイド：PythonDjangoアプリケーションのDocker化

  2. Dockerガイド：Ubuntu18.04でのNodejsExpressアプリケーションのDocker化

  3. Debian 11 に Nginx を使用して MERN スタックをインストールする方法

  1. Dockerを使用したLEMPスタックのDocker化-Ubuntuで作成

  2. Dockerチュートリアル–LinuxでのDocker入門

  3. Podmanチュートリアル–Podmanを使い始める