Dockerデプロイメントを試してみましょう

[[416152]]

この記事はWeChatの公開アカウント「Sea Monster Who Writes Code」から転載したもので、著者はSea Monster Who Writes Codeです。この記事を転載する場合は、コードを書いているSea Monsterの公式アカウントまでご連絡ください。

序文

多くの人が Docker のデプロイメントについて頭を悩ませていると思います。私も同じです。

最近、私は非常に興味深い現象を発見しました。ある技術を習得したいと思って習得した後、別の技術を習得しなければならない問題が発生すると、その人がそれまでどれだけ熱心に熱心に学習していたとしても、この時点で諦めてしまう可能性が 99% あります。私はこの現象を「学習の窓」と呼びたいと思います。

多くの人にとって、Web サイトの作成と Vue.js の学習は「学習の窓口」となります。この「学習期間」を過ぎると、彼らはもう学習したくなくなります。「たくさん学んだのに、なぜ最後にデプロイメントを学習しなければならないのか?」

したがって、この記事では Docker のデプロイメントに関するいくつかの点について説明します。

必要

国際的な慣行によれば、私たちはいくつかのことだけを完了する非常に単純な要件から始めます。

ToDo リストを表示 + ToDo を追加

ウェブサイト訪問を記録する

上記は、これ以上ないほど古典的な Todo リスト アプリケーションです。

要件を分析します。ToDo リストはデータベースを使用して完了する必要があり、Web サイト訪問の記録は高速読み取りキャッシュを使用して完了する必要があります。

技術の選択

現在、私のフロントエンドテクノロジースタックは React.js なので、フロントエンドでは React.js を使用しています。

Express には独自のスキャフォールディングがあるため、バックエンドでは Express が使用されます。

データベースに関しては、M1 Mac を使用しているため、MySQL イメージをプルすることができず、代わりに一時的に MariaDB を使用しています。

キャッシュは誰もがよく知っているので、redis を使用してキャッシュを実行します。

フロントエンド実装

フロントエンドの実装は非常にシンプルで、リクエストの送信には axios が使用されます。

インターフェースTodo {
  id: 番号;
  タイトル: 文字列;
  ステータス: 'todo' | '終わり' ;
 } 
 
定数http = axios.create ({
  ベースURL: 'http://localhost:4200' 、
 }) 
 
定数App = () => {
  const [newTodoTitle, setNewTodoTitle] = useState<string>( '' );
  定数[ count ,setCount] = useState(0);
  const [todoList, setTodoList] = useState<Todo[]>([]); 
 
  // ToDo を追加
  const addTodo = 非同期() => {
    http.post( '/todo' , {を待つ
      タイトル: newTodoTitle、
      ステータス: 'todo' 、
    })
    fetchTodoList() を待機します。
  } 
 
  // 訪問回数を取得し、訪問を追加する
  const fetchCount = 非同期() => {
    http.post( '/count' ) を待ちます。
    const { データ } = http.get( '/count' ) を待機します。
    データにカウントを設定します。
  } 
 
  // ToDoリストを取得する
  const fetchTodoList = 非同期() => {
    const { data } = http.get( '/todo' ) を待機します。
    todoList を設定します。
  } 
 
  使用効果(() => {
    fetchCount() を実行します。それから（）;
    TodoList() を取得します。それから（）;
  }, []); 
 
戻る（
    <div className= "アプリ" >
      <header>ウェブサイト訪問数: { count }</header> 
 
      <ul>
        {todoList.map(todo => (
          <li key ={todo.id}>{todo.title} - {todo.status}</li>
        ))}
      </ul> 
 
      <div>
        <input value={newTodoTitle} onChange={e => setNewTodoTitle(e.target.value)} type= "text" />
        <button onClick={addTodo}>送信</button>
      </div>
    </div>
  );
 }

バックエンド実装

バックエンドは少し面倒で、解決すべき問題は次のとおりです。

• クロスドメイン
• データベース接続
• Redis 接続

まず main.ts でルーティングを構成します。

 var cors = require( 'cors' )が必要です
 
 var indexRouter = require( './routes/index' );
 var usersRouter = require( './routes/count' );
 var todosRouter = require( './routes/todo' ); 
 
 var app = express(); 
 
 // クロスドメインを解決する
app.use(cors()); 
 
 //ビジネスルーティング
app.use( '/' 、インデックスルーター);
 app.use( '/count' 、 usersRouter);
 app.use( '/todo' , todosRouter); 
 
 ... 
 
モジュールをエクスポートします。

トラフィック ルーティングでは、高速な読み取りと書き込みを実現するために Redis が必要です。

定数 express は require( 'express' ) を必要とします。
 const Redis = require( "ioredis" ); 
 
定数ルーター = express.Router(); 
 
 // Redisに接続
const redis = 新しい Redis({
  ポート: 6379、
  ホスト: "127.0.0.1" 、
 }); 
 
 router.get( '/' , async (req, res, next ) => {
  const count = Number(redis.get( 'myCount' ) を待機) || 0; 
 
  res.json({ myCount: count })
 }); 
 
 router.post( '/' , 非同期(req, res) => {
  const count = Number(redis.get( 'myCount' ) を待機します);
  redis.set ( 'myCount' , count + 1);を待ちます。
  res.json({ myCount: count + 1 })
 }) 
 
モジュール.exports = ルーター;

todo ルートは、sequelize ライブラリを使用してデータベースに接続し、初期化します。

 const { Sequelize, DataTypes} = require( 'sequelize' );
定数 express = require( "express" ); 
 
定数ルーター = express.Router(); 
 
 // データベースに接続する
const sequelize = 新しい Sequelize({
  ホスト: 'localhost' 、
データベース: 'docker_todo' 、
  ユーザー名: 'root' 、
パスワード: '123456' 、
  方言: 'mariadb' 、
 }); 
 
 // todoモデルを定義する
const Todo = sequelize.define( 'Todo' , {
  id: {
    タイプ: Sequelize.INTEGER 、
    自動増分: true 、
    プライマリキー: true  
  },
  タイトル: { タイプ: DataTypes.STRING },
  ステータス: { タイプ: DataTypes.STRING }
 }, {}); 
 
 // データベース構造を同期する
sequelize.sync({ force : true })を実行します。すると(() => {
  console.log( '同期されました' );
 }); 
 
 router.get( '/' , 非同期(req, res) => {
  // ToDoリストを取得する
  todoList を待機します。
  res.json({todoList});
 }) 
 
 router.post( '/' , async (req, res, next ) => {
  const { タイトル、ステータス } = req.body; 
 
  // ToDoを作成する
  const newTodo = Todo を待機します。作成する（{
    タイトル、
    ステータス: ステータス || 「todo」 、
  }); 
 
  res.json({todo: newTodo }) は、
 }); 
 
モジュール.exports = ルーター;

ローカルで実行

本来、次のコマンドを使用してローカル アプリケーションを実行できます。

 ＃ フロントエンド
cd クライアント && npm run 開始
 
 ＃ 後部
cd サーバー && npm 実行開始

しかし、ローカルに mariadb と redis がないので、少し困難です。

コンテナを起動する

以前は、通常、次のコマンドを使用して、Mac に mariadb と redis をインストールしていました。

 brew インストール mariadb 
 
 brew redis をインストール

その後、プロジェクトをローカルで実行する前に、コンピューター上で設定 (ユーザー名、パスワードなど) を行う必要があり、非常に面倒です。そして、設定が間違っていたら、再インストールしなければなりません。 。 。

Docker の機能の 1 つは、mariadb と redis を異なるイメージにパッケージ化し、DockerHub を使用して統合管理することです。 Docker を使用すると、サービスをすばやく構成できます。

以前は、コンピューターにインストールできる MySQL は 1 つだけでした。これで、8 つの MySQL コンテナ (異なるポートを使用) を同時に実行できるようになりました。必要なものを削除したりインストールしたりできます。疑わしい場合は、まずコンテナを再起動してください。再起動しても問題が解決しない場合は、イメージを使用してコンテナを構築します。ビルドが機能しない場合は、最新のイメージをプルして再度ビルドしてください。とてもかっこいいですね。

では、早速Redisを起動してみましょう。

 docker run --name docker-todo-redis -p 6379:6379 -d redis  

次に、mariadb を起動します。

 docker run -p 127.0.0.1:3306:3306 --name docker-todo-mariadb -e MARIADB_ROOT_PASSWORD=123456 MARIADB_DATABASE=docker_todo -d mariadb  

パラメーター -p はポート マッピング: ローカル マシン: コンテナー、-e は環境変数を指定し、-d はバックグラウンド実行を意味することを説明します。

もう一度実行します:

 ＃ フロントエンド
cd クライアント && npm run 開始
 
 ＃ 後部
cd サーバー && npm 実行開始

http://localhost:3000 でページを見ることができます:

大丈夫みたいですよ〜

docker-compose

もし今、マシンが与えられたら、それをどのように展開するか想像してみてください。最初に上記の 2 つの docker コマンドを実行し、次に以下の 2 つの npm コマンドを実行する必要があります。面倒だ。

ワンクリックでmariadbコンテナとredisコンテナを起動できますか？ここで docker-compose.yml が登場します。dev-docker-compose.yml ファイルを作成します。

バージョン: '3'  
サービス:
  マリアdb:
    画像: mariadb
    コンテナ名: 'docker-todo-mariadb'  
    環境：
      MARIADB_ROOT_パスワード: '123456'  
      MARIADB_DATABASE: 'docker_todo'  
    ポート:
      - '3306:3306'  
    再起動: 常に
  レディス:
    画像: redis
    コンテナ名: 'docker-todo-redis'  
    ポート:
      - '6379:6379'  
    再起動: 常に

この yml ファイルに記述されている内容は、実際には上記の 2 つの docker コマンドと同等です。利点は2つあります。

• 耐えられないほど長いコマンドのリストを書く必要はありません。
• docker-compose.yml ファイルにデプロイメント コマンドを書き留めます。 Q: どのように展開しますか? A: docker-compose.ymlを見てください
• ワンクリックで関連サービスを表示

今後は、ローカル サービスを実行するときに、mariadb と redis をワンクリックで起動できます。

 docker-compose -f dev-docker-compose.yml アップ -d

Dockerファイル

しかし、本番環境ではこれら 2 つの npm コマンドを毎回実行するのは依然として面倒です。これら 2 行も docker-compose に統合できますか?

注: 通常の開発プロセスでは、npm run build を使用して本番環境でアプリケーションをビルドし、ビルドされた JS を実行します。プロセスを簡略化するために、npm run start を例として使用します。

docker-compose はイメージを通じてコン​​テナを作成するので、React アプリと Express アプリも 2 つのイメージにパッケージ化して、docker-compose を使用して個別にコンテナを作成してもよいのではないでしょうか。

簡単に言えば、コンテナの構築は「CICD またはビルド パイプライン」と呼ばれることが多いのですが、この「パイプライン」の鍵となるのは npm run start 1 つだけです。 「パイプライン」を記述するファイルは Dockerfile と呼ばれます (キャメルケースで記述されていないことに注意してください)。

注: 通常のイメージ構築と起動は、プロジェクト全体の CICD の一部である必要があります。これは単なる例です。プロジェクトの CICD には、コマンドの実行やアプリケーションの構築に加えて、コード チェック、感度低下チェック、メッセージ プッシュ公開などの、より複雑な一連のプロセスも含まれています。

まず、React Dockerfile を整理します。

 # ノードイメージの使用
ノードから
 
 # 作業ディレクトリを準備する
mkdir -p /app/client を実行します。
ワークディレクトリ /app/client 
 
 # package.json をコピー
package*.json /app/client/ をコピーします。 
 
 # インストールディレクトリ
npmインストールを実行
 
 # ファイルをコピーする
コピー ./app/client/ 
 
 # 開発を有効にする
CMD [ "npm" 、 "run" 、 "start" ]

とても簡単です。コンテナはコンピュータ内のコンピュータとも見なすことができるため、コンピュータ上のファイルを「コンテナ コンピュータ」にコピーすることは非常に必要な手順であることに注意してください。

Express App の Dockerfile は上記のものとほぼ同じです。

 # ノードイメージの使用
ノードから
 
 # 作業ディレクトリを初期化する
mkdir -p /app/server を実行します。
ワークディレクトリ /app/server 
 
 # package.json をコピー
package*.json をコピー /app/server/ 
 
 # 依存関係をインストールする
npmインストールを実行
 
 # ファイルをコピーする
コピー ./app/server/ 
 
 # 開発を有効にする
CMD [ "npm" 、 "run" 、 "start" ]

次に、prod-docker-compose.yml ファイルを変更します。

バージョン: '3'  
サービス:
  クライアント：
    建てる：
      コンテキスト: ./client
      dockerfile: Dockerファイル
    コンテナ名: 'docker-todo-client'  
    # 公開ポート
    さらす：
      - 3000
    # 公開ポート
    ポート:
      - 「3000:3000」  
    依存:
      - サーバー
    再起動: 常に
  サーバ：
    # ビルドディレクトリ
    建てる：
      コンテキスト: ./server
      dockerfile: Dockerファイル
    # コンテナ名
    コンテナ名: 'docker-todo-server'  
    # 公開ポート
    さらす：
      - 4200
    # ポートマッピング
    ポート:
      - '4200:4200'  
    再起動: 常に
    依存:
      - マリアdb
      - レディス
  マリアdb:
    画像: mariadb
    コンテナ名: 'docker-todo-mariadb'  
    環境：
      MARIADB_ROOT_パスワード: '123456'  
      MARIADB_DATABASE: 'docker_todo'  
    ポート:
      - '3306:3306'  
    再起動: 常に
  レディス:
    画像: redis
    コンテナ名: 'docker-todo-redis'  
    ポート:
      - '6379:6379'  
    再起動: 常に

上記の構成は理解するのが難しくないはずですが、注意すべき詳細がいくつかあります。

• ポートを公開してマッピングする必要があります。そうしないと、ポート 3000 と 4200 にローカルでアクセスできません。
• depends_onの機能は、現在のコンテナを起動する前に、maraidbコンテナとredisコンテナが起動するのを待つことです。

次に、次のコマンドを実行して、ワンクリックで起動します。

 docker-compose -f prod-docker-compose.yml アップ -d --build  

次の --build は、実行するたびにイメージをビルドすることを意味します。

しかし、ブーム：

接続拒否エラー:接続拒否 127.0.0.1:3306
 ...

なぜ接続できないのですか?

接続できない問題を解決する

接続できない理由は、ここでは localhost と 127.0.0.1 を使用しているためです。

各コンテナはホストの 127.0.0.1 ネットワーク内にありますが、コンテナは互いの IP アドレスを介して通信し、相互にアクセスする必要があります。公式サイトの紹介によると、コンテナ名を通じて他のコンテナの IP アドレスを取得できるとのことです。

したがって、Express App のホストは 127.0.0.1 ではなく、docker-todo-redis と docker-todo-mariadb である必要があります。以下では、環境変数 NODE_ENV を使用して、アプリが Docker で起動されたかどうかを区別します。

mariadb 接続を変更します。

 // データベースに接続する
const sequelize = 新しい Sequelize({
  ホスト: process.env.NODE_ENV === 'docker' ? 'docker-todo-mariadb' : "127.0.0.1" ,
データベース: 'docker_todo' 、
  ユーザー名: 'root' 、
パスワード: '123456' 、
  方言: 'mariadb' 、
 });

次に、Redis 接続を変更します。

 const redis = 新しい Redis({
  ポート: 6379、
  ホスト: process.env.NODE_ENV === 'docker' ? 'docker-todo-redis' : "127.0.0.1" ,
 });

次に、/server/Dockerfile に NODE_ENV=docker を追加します。

 # ノードイメージの使用
ノードから
 
 # 作業ディレクトリを初期化する
mkdir -p /app/server を実行します。
ワークディレクトリ /app/server 
 
 # package.json をコピー
package*.json をコピー /app/server/ 
 
環境変数 NODE_ENV=docker 
 
 # 依存関係をインストールする
npmインストールを実行
 
 # ファイルをコピーする
コピー ./app/server/ 
 
 # 開発を有効にする
CMD [ "npm" 、 "run" 、 "start" ]

次に、「ワンクリック スタート」コマンドを実行して、本番環境を起動します。

 docker-compose -f prod-docker-compose.yml アップ -d --build  

要約する

簡単に言えば、Dockerfile は Docker イメージを構築するために使用され、私たちが普段使用する CICD やパイプラインに多少似ています。 docker-compose の機能は、1 回のクリックで N 個のコンテナを「プルアップ」することです。

上記の例全体は Github で公開されており、クローンして自分で試してみることができます。