Yarn ワークスペース、TypeScript、esbuild、React、Express を使用して K8S クラウド ネイティブ アプリケーションを構築する (パート 1)

この記事では、K8S、Docker、Yarn ワークスペース、TypeScript、esbuild、Express、React を使用して基本的なクラウドネイティブ Web アプリケーションをセットアップおよび構築する方法について説明します。このチュートリアルの最後には、K8S 上に完全に構​​築されデプロイされた Web アプリケーションが完成します。

プロジェクトの設定

プロジェクトはモノレポとして構成されます。モノレポの目的は、モジュール間で共有されるコードの量を増やし、それらのモジュールがどのように通信するかをより正確に予測することです (マイクロサービス アーキテクチャなど)。この演習では、構造をシンプルに保ちます。

• これは、React Web サイトを表すアプリです。
• Express を使用してアプリを提供するサーバーです。
• 一般的に、一部のコードはアプリとサーバー間で共有されます。

プロジェクトをセットアップする前の唯一の要件は、マシンに yarn がインストールされていることです。 Yarn は npm のようなパッケージ マネージャーですが、パフォーマンスが優れており、機能が少しだけ豊富です。インストール方法の詳細については、公式ドキュメントをご覧ください。

ワークスペース

プロジェクトを初期化するフォルダーに移動し、お気に入りのターミナルから次の手順を実行します。

1. mkdir my-app を使用してプロジェクト用のフォルダーを作成します (名前は自由に選択できます)。
2. cd my-app を使用してフォルダーに入ります。
3. yarn init を使用して初期化します。これにより、最初の package.json ファイルの作成に関する質問が表示されます (心配しないでください。ファイルは作成後いつでも変更できます)。 yarn init コマンドを使用しない場合は、いつでも手動でファイルを作成し、次の内容をコピーすることができます。

 {
 「名前」 : 「my-app」 、
 「バージョン」 : 「1.0.0」 、
 「ライセンス」 : 「無許可」 、
 "private" : true // yarnワークスペースに必要 仕事 
 }

package.json ファイルが作成されたので、モジュール app、common、server 用のフォルダーを作成する必要があります。 yarn ワークスペースによるモジュールの検出を容易にし、プロジェクトの読みやすさを向上させるために、モジュールをパッケージ フォルダーにネストします。

私のアプリ/
 ├─ packages/ // 現在および将来のすべてのモジュールが格納される場所
│ ├─ アプリ/
 │ ├─ 共通/
 │ ├─ サーバー/
 ├─ package.json

各モジュールは小規模で独立したプロジェクトとして機能し、依存関係を管理するために独自の package.json が必要になります。それぞれを設定するには、yarn init (各フォルダー内) を使用するか、手動でファイルを作成します (たとえば、IDE 経由)。

パッケージ名に使用される命名規則では、各パッケージの前に @my-app/* を付けます。これは NPM の世界ではスコープと呼ばれます。このようにプレフィックスを付ける必要はありませんが、後で役に立ちます。

3 つのパッケージがすべて作成され初期化されると、以下に示すようなものになります。

アプリパッケージ:

 {
 「名前」 : 「@my-app/app」 、
 「バージョン」 : 「0.1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true  
 }

共通パッケージ:

 {
 「名前」 : 「@my-app/common」 、
 「バージョン」 : 「0.1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true  
 }

サーバーパッケージ:

 {
 「名前」 : 「@my-app/server」 、
 「バージョン」 : 「0.1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true  
 }

最後に、Yarn にモジュールを探す場所を伝える必要があるため、プロジェクトの package.json ファイルに戻って編集し、次のワークスペース プロパティを追加します (詳細については、Yarn のワークスペースのドキュメントを参照してください)。

 {
 「名前」 : 「my-app」 、
 「バージョン」 : 「1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 "workspaces" : [ "packages/*" ] // ここに追加
}

最終的なフォルダー構造は次のようになります。

私のアプリ/
 ├─ パッケージ/
 │ ├─ アプリ/
 │ │ ├─ package.json
 │ ├─ 共通/
 │ │ ├─ package.json
 │ ├─ サーバー/
 │ │ ├─ package.json
 ├─ package.json

これで、プロジェクトの基本的な設定が完了しました。

タイプスクリプト

ここで、プロジェクトに最初の依存関係である TypeScript を追加します。 TypeScript は、ビルド時に型チェックを可能にする JavaScript のスーパーセットです。

ターミナルからプロジェクトのルート ディレクトリに移動し、yarn add -D -W typescript を実行します。

• -D パラメータは、開発とビルド時にのみ使用されるため、TypeScript を devDependencies に追加します。
• -W パラメータを使用すると、ワークスペース ルートにパッケージをインストールして、app、common、server でグローバルに利用できるようになります。

package.json は次のようになります。

 {
 「名前」 : 「my-app」 、
 「バージョン」 : 「1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 "ワークスペース" : [ "パッケージ/*" ],
 「devDependencies」 : {
 "typescript" : "^4.2.3"  
  }
 }

これにより、yarn.lock ファイル (プロジェクトの存続期間中、依存関係の予想されるバージョンが一定に保たれることを保証する) と、依存関係のバイナリを保持する node_modules フォルダーも作成されます。

TypeScript がインストールされたので、実行方法を指定するのが良いでしょう。これを行うには、IDE によって取得される構成ファイルを追加します (VSCode を使用する場合は、自動的に取得されます)。

プロジェクトのルート ディレクトリに tsconfig.json ファイルを作成し、次のコンテンツをコピーします。

 {
 "コンパイラオプション" : {
    /* 基本 */
 「ターゲット」 : 「es2017」 、
 「モジュール」 : 「CommonJS」 、
 "lib" : [ "ESNext" , "DOM" ], 
 
    /* モジュールの解決 */
 "モジュール解像度" : "ノード" ,
 "esModuleInterop" : true 、 
 
    /* パスの解決 */
 「ベースURL」 : 「./」 、
 「パス」 : {
 "@flipcards/*" : [ "packages/*" ]
    }, 
 
    /* 高度な */
 "jsx" : "反応" 、
 "実験的デコレータ" : true 、
 "JsonModule を解決" : true  
  },
 "除外" : [ "node_modules" 、 "**/node_modules/*" 、 "dist" ]
 }

各 compileoptions プロパティとそのアクションは簡単に検索できますが、最も便利なのは paths プロパティです。たとえば、これは、@my-app/server または @my-app/app パッケージで @my-app/common インポートを使用するときに、コードと型指定を検索する場所を TypeScript に指示します。

現在のプロジェクト構造は次のようになります。

私のアプリ/
 ├─ node_modules/
 ├─ パッケージ/
 │ ├─ アプリ/
 │ │ ├─ package.json
 │ ├─ 共通/
 │ │ ├─ package.json
 │ ├─ サーバー/
 │ │ ├─ package.json
 ├─ package.json
 ├─ tsconfig.json
 ├─ 糸.ロック

最初のスクリプトを追加する

Yarn ワークスペースを使用すると、yarn ワークスペース @my-app/* コマンド パターンを介して任意のサブパッケージにアクセスできますが、毎回完全なコマンドを入力するのは非常に冗長になります。この目的のために、開発エクスペリエンスを向上させるヘルパー スクリプト メソッドをいくつか作成できます。プロジェクトのルート ディレクトリにある package.json を開き、次のスクリプト プロパティを追加します。

 {
 「名前」 : 「my-app」 、
 「バージョン」 : 「1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 "ワークスペース" : [ "パッケージ/*" ],
 「devDependencies」 : {
 "typescript" : "^4.2.3"  
  },
 「スクリプト」 : {
 "app" : "yarn ワークスペース @my-app/app" 、
 "common" : "yarn ワークスペース @my-app/common" 、
 "server" : "yarn ワークスペース @my-app/server"  
  }
 }

これで、サブパッケージ内にいるかのように任意のコマンドを実行できるようになります。たとえば、yarn server add express と入力して、いくつかの新しい依存関係を追加できます。これにより、サーバー パッケージに新しい依存関係が直接追加されます。

以降のセクションでは、フロントエンドおよびバックエンド アプリケーションの構築を開始します。

Gitの準備

Git をバージョン管理ツールとして使用する予定の場合は、バイナリやログなどの生成されたファイルを無視することを強くお勧めします。

これを行うには、プロジェクトのルート ディレクトリに .gitignore という新しいファイルを作成し、次の内容をそのファイルにコピーします。これにより、チュートリアルの後半で生成されるファイルの一部が無視され、大量の不要なデータが送信されることが回避されます。

 # ログ
糸デバッグ.log*
糸エラー.log* 
 
 # バイナリ
ノードモジュール/ 
 
 # ビルド
ディストリビューション/
 **/パブリック/script.js

フォルダ構造は次のようになります。

私のアプリ/
 ├─ パッケージ/
 ├─ .gitignore
 ├─ package.json

コードを追加

このセクションでは、共通パッケージ、アプリ パッケージ、サーバー パッケージにコードを追加することに焦点を当てます。

一般

このパッケージはアプリとサーバーの両方で使用されるため、まず common から始めます。その目的は、共有ロジックと変数を提供することです。

書類

このチュートリアルでは、共通パッケージは非常にシンプルになります。まず、新しいフォルダーを追加します。

src/ フォルダーにはパッケージのコードが含まれています。

このフォルダを作成したら、次のファイルを追加します。

src/index.ts

エクスポート const APP_TITLE = 'my-app' ;

エクスポートするコードができたので、他のパッケージからインポートするときにそのコードを探す場所を TypeScript に指示します。これを行うには、package.json ファイルを更新する必要があります。

パッケージ.json

 {
 「名前」 : 「@my-app/common」 、
 「バージョン」 : 「0.1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 "main" : "./src/index.ts" // TS のエントリ ポイントを提供するためにこの行を追加します
}

これで共通パッケージは完成です!

構造上の注意:

一般/
 ├─ 出典/
 │ ├─インデックス.ts
 ├─ package.json

アプリ

依存関係

アプリ パッケージには次の依存関係が必要です。

• 反応する
• 反応する

プロジェクトのルート ディレクトリから、次のコマンドを実行します。

• 糸アプリに反応を追加 react-dom
• yarn app add -D @types/react @types/react-dom (TypeScript の型指定を追加)

パッケージ.json

 {
 「名前」 : 「@my-app/app」 、
 「バージョン」 : 「0.1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 「依存関係」 : {
 "@my-app/common" : "^0.1.0" , // このインポートを手動で追加したことに注意してください
「反応」 : 「^17.0.1」 、
 "react-dom" : "^17.0.1"  
  },
 「devDependencies」 : {
 "@types/react" : "^17.0.3" 、
 "@types/react-dom" : "^17.0.2"  
  }
 }

書類

React アプリケーションを作成するには、次の 2 つの新しいフォルダーを追加する必要があります。

• ベース HTML ページとアセットを保持する public/ フォルダー。
• アプリケーションのコードが含まれる src/ フォルダー。

これら 2 つのフォルダーが作成されると、アプリケーションをホストする HTML ファイルの追加を開始できます。

公開/index.html

 <!DOCTYPE html>
 <html>
  <ヘッド>
    <title>私のアプリ</title>
    <meta name = "description" content = "私のアプリケーションへようこそ！" />
  </head>
  <本文>
    <noscript>このアプリを実行するには、 JavaScript を有効にする必要があります。</noscript>
    <! -- この div に React アプリケーションを挿入します -->  
    <div id= "ルート" ></div>
    <! -- これはアプリケーションを含むスクリプトへのパスです -->  
    <script src= "script.js" ></script>
  </本文>
 </html> 

src/index.tsx

 *をReactとしてインポート  '反応する' ;
 *をReactDOMとしてインポート  'react-dom' ; 
 
 {App}をインポート  '。/アプリ' ; 
 
 ReactDOM.render(<App />, document.getElementById( 'root' ));

このコードは、HTML ファイルのルート div にフックし、React コンポーネント ツリーを挿入します。

src/App.tsx

 {APP_TITLE}をインポート  '@flipcards/common' ;
 *をReactとしてインポート  '反応する' ; 
 
関数App() をエクスポートします: React.ReactElement {
  const [ count , setCount] = React.useState(0); 
 
戻る（
    <div>
      <h1>{APP_TITLE}へようこそ!</h1>
      <p>
        これは私たちのアプリケーションのメインページです。
は 動的 下のボタンをクリックしてください。
      </p> 
 
      <p>現在の カウント: {カウント}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>増分</button>
    </div>
  );
 }

このシンプルな App コンポーネントは、アプリのタイトルと動的なカウンターをレンダリングします。これが React ツリーのエントリ ポイントになります。必要なコードを自由に追加してください。

それでおしまい！非常に基本的な React アプリケーションが完成しました。現時点ではあまり機能しませんが、後から戻って機能を追加することもできます。

構造上の注意:

アプリ/
 ├─公開/
 │ ├─インデックス.html
 ├─ 出典/
 │ ├─ アプリ.tsx
 │ ├─インデックス.tsx
 ├─ package.json

サーバ

依存関係

サーバー パッケージには次の依存関係が必要です。

• コア
• 急行

プロジェクトのルート ディレクトリから、次のコマンドを実行します。

• 糸サーバーにcors expressを追加
• yarn server add -D @types/cors @types/express (TypeScript の型指定を追加)

パッケージ.json

 {
 「名前」 : 「@my-app/server」 、
 「バージョン」 : 「0.1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 「依存関係」 : {
 "@my-app/common" : "^0.1.0" , // このインポートは手動で追加したことに注意してください
"cors" : "^2.8.5" ,
 「エクスプレス」 : 「^4.17.1」  
  },
 「devDependencies」 : {
 "@types/cors" : "^2.8.10" 、
 "@types/express" : "^4.17.11"  
  }
 }

書類

React アプリケーションの準備ができたので、最後に必要なのはそれを提供するサーバーです。まず、次のフォルダを作成します。

• サーバー コードを含む src/ フォルダー。

次に、サーバーのメイン ファイルを追加します。

src/index.ts

 {APP_TITLE}をインポート  '@flipcards/common' ;
 corsをインポートする  'cors' ;
輸入エクスプレス  '急行' ;
インポート { join }から  'パス' ; 
 
ポート = 3000; 
 
 express() は、定数です。
 app.use(cors()); 
 
 // 「public」フォルダから静的リソースを提供する（例：表示する画像がある場合）
 app.use( express.static ( join (__dirname, '../../app/public' ))); 
 
 // HTMLページを提供する
app.get( '*' 、 (必須:任意、解像度:任意) => {
  res.sendFile( __dirname, '../../app/public' 、 'index.html' )に参加します。
 }); 
 
 app.listen(ポート, () => {
  console.log(`${APP_TITLE} のサーバーはhttp://localhost:${PORT}でリッスンしています`);
 });

これは非常に基本的な Express アプリケーションですが、シングル ページ アプリケーション以外のサービスがなければこれで十分です。

構造上の注意:

サーバ/
 ├─ 出典/
 │ ├─インデックス.ts
 ├─ package.json

アプリを構築する

バンドラー

TypeScript コードを解釈可能な JavaScript コードに変換し、すべての外部ライブラリを 1 つのファイルにバンドルするには、バンドラーを使用します。 JS/TS エコシステムには、WebPack、Parcel、Rollup など多くのバンドラーがありますが、ここでは esbuild を選択します。他のバンドラーと比較して、esbuild にはデフォルトでロードされる多くの機能 (TypeScript、React) が付属しており、パフォーマンスが大幅に向上しています (最大 100 倍高速)。さらに詳しく知りたい場合は、著者の FAQ をお読みください。

これらのスクリプトには次の依存関係が必要です。

• esbuildはバンドラーです
• ts-nodeはTypeScript REPLであり、スクリプトを実行するために使用します。

プロジェクトのルート ディレクトリから、次のコマンドを実行します: yarn add -D -W esbuild ts-node。

パッケージ.json

 {
 「名前」 : 「my-app」 、
 「バージョン」 : 「1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 "ワークスペース" : [ "パッケージ/*" ],
 「devDependencies」 : {
 "esbuild" : "^0.9.6" 、
 "ts-node" : "^9.1.1" 、
 "typescript" : "^4.2.3"  
  },
 「スクリプト」 : {
 "app" : "yarn ワークスペース @my-app/app" 、
 "common" : "yarn ワークスペース @my-app/common" 、
 "server" : "yarn ワークスペース @my-app/server"  
  }
 }

建てる

これで、アプリケーションを構築するために必要なツールがすべて揃ったので、最初のスクリプトを作成しましょう。

まず、プロジェクトのルートに scripts/ という新しいフォルダーを作成します。

スクリプトは TypeScript で記述され、ts-node を使用してコマンドラインから実行されます。 esbuild には CLI がありますが、より複雑なパラメータを渡したり、複数のワークフローを組み合わせたりする場合は、JS または TS 経由でライブラリを使用する方が便利です。

scripts/ フォルダーに build.ts ファイルを作成し、次のコードを追加します (コードの動作についてはコメントで説明します)。

スクリプト/build.ts

インポート {ビルド}   'esbuild' ; 
 
 /**
 * ビルド中に渡される共通オプション。
 */
インターフェース BuildOptions {
  環境: 'production' | '発達' ;
 } 
 
 /**
 * アプリ パッケージのビルダー関数。
 */
非同期関数buildApp(options: BuildOptions)をエクスポートします。
  const { env } = オプション; 
 
  ビルドを待つ({
    entryPoints: [ 'packages/app/src/index.tsx' ], // このエントリポイントからReactアプリケーションを読み取ります
    outfile: 'packages/app/public/script.js' , // public / フォルダにファイルを出力します ( HTML ページで"script.js"を使用したことを思い出してください)
    定義する： {
 'process.env.NODE_ENV' : ` "${env}" `, // アプリケーションをビルドするにはNode.js環境を定義する必要があります
    },
    バンドル: true 、
    縮小: env === 'production' 、
    ソースマップ: env === 'development' 、
  });
 } 
 
 /**
 * サーバー パッケージのビルダー関数。
 */
非同期関数buildServer(options: BuildOptions)をエクスポートします。
  const { env } = オプション; 
 
  ビルドを待つ({
    エントリポイント: [ 'packages/server/src/index.ts' ],
    出力ファイル: 'packages/server/dist/index.js' ,
    定義する： {
 'process.env.NODE_ENV' : ` "${env}" `,
    },
    external: [ 'express' ], // 一部のライブラリは外部ライブラリとしてマークする必要があります
    プラットフォーム: 'node' , // Node用にビルドする場合は、そのための環境を設定する必要があります
    ターゲット: 'node14.15.5' 、
    バンドル: true 、
    縮小: env === 'production' 、
    ソースマップ: env === 'development' 、
  });
 } 
 
 /**
 * すべてのパッケージのビルダー関数。
 */
非同期関数buildAll() {
  Promise.allを待機します（ [
    ビルドアプリ({
      env: 'production' 、
    }）、
    ビルドサーバー({
      env: 'production' 、
    }）、
  ]);
 } 
 
 // このメソッドは、ターミナルからts-nodeを使用してスクリプトを実行するときに実行されます
すべてを構築します。

コードは非常にわかりやすいですが、何かが足りないと感じた場合は、esbuild の API ドキュメントでキーワードの完全なリストを確認してください。

ビルド スクリプトが完成しました。最後に、ビルド アクションを簡単に実行できるように、package.json に新しいコマンドを追加します。

 {
 「名前」 : 「my-app」 、
 「バージョン」 : 「1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 "ワークスペース" : [ "パッケージ/*" ],
 「devDependencies」 : {
 "esbuild" : "^0.9.6" 、
 "ts-node" : "^9.1.1" 、
 "typescript" : "^4.2.3"  
  },
 「スクリプト」 : {
 "app" : "yarn ワークスペース @my-app/app" 、
 "common" : "yarn ワークスペース @my-app/common" 、
 "server" : "yarn ワークスペース @my-app/server" 、
 "build" : "ts-node ./scripts/build.ts" //ここにこの行を追加
  }
 }

これで、プロジェクトのルート フォルダーから yarn build を実行して、プロジェクトに変更を加えるたびにビルド プロセスを開始できるようになりました (ホット リロードを追加する方法については後で説明します)。

構造上の注意:

私のアプリ/
 ├─ パッケージ/
 ├─ スクリプト/
 │ ├─ build.ts
 ├─ package.json
 ├─ tsconfig.json

仕える

アプリケーションが構築され、世界中で使用できる状態になりました。package.json に最後のコマンドを 1 つ追加するだけです。

 {
 「名前」 : 「my-app」 、
 「バージョン」 : 「1.0」 、
 「ライセンス」 : 「無許可」 、
 「プライベート」 : true 、
 "ワークスペース" : [ "パッケージ/*" ],
 「devDependencies」 : {
 "esbuild" : "^0.9.6" 、
 "ts-node" : "^9.1.1" 、
 "typescript" : "^4.2.3"  
  },
 「スクリプト」 : {
 "app" : "yarn ワークスペース @my-app/app" 、
 "common" : "yarn ワークスペース @my-app/common" 、
 "server" : "yarn ワークスペース @my-app/server" 、
 「ビルド」 : 「ts-node ./scripts/build.ts」 、
 "serve" : "node ./packages/server/dist/index.js" //ここにこの行を追加します
  }
 }

現在は純粋な JavaScript を扱っているので、ノード バイナリを使用してサーバーを起動できます。さあ、yarn serve を実行しましょう。

コンソールを見ると、サーバーが正常にリッスンしていることがわかります。ブラウザを開いて http://localhost:3000 に移動し、React アプリを表示することもできます 🎉!

実行時にポートを変更する場合は、環境変数をプレフィックスとして serve コマンドを開始できます: PORT=4000 yarn serve。

ドッカー🐳

このセクションでは、コンテナの概念を理解していることを前提としています。

コードからイメージを作成するには、コンピューターに Docker がインストールされている必要があります。 OS に応じてインストールする方法については、公式ドキュメントを参照してください。

Dockerファイル

Docker イメージを生成するには、まずプロジェクトのルート ディレクトリに Dockerfile を作成します (これらの手順はすべて CLI で実行できますが、ビルド手順を定義するデフォルトの方法は構成ファイルを使用することです)。

ノード:14.15.5-alpineから
 
ワークディレクトリ /usr/src/app 
 
 # 依存関係を早めにインストールして、アプリケーションが
# 一部のファイルが変更されましたが、Docker は依存関係を再度ダウンロードする必要はありません。
 # 代わりに次のステップ ("COPY ..") から開始します。
 ./package.json をコピーします。
 ./yarn.lock をコピーします。
コピー ./packages/app/package.json ./packages/app/
コピー ./packages/common/package.json ./packages/common/
コピー ./packages/server/package.json ./packages/server/
 RUNヤーン
 
 # アプリケーションのすべてのファイルをコピーします（.gitignore で指定されているものを除く）
コピー 。 。 
 
 # アプリをコンパイルする
RUNヤーンビルド
 
 # ポート
エクスポーズ3000 
 
 ＃ 仕える
CMD [ "yarn" 、 "serve" ]

ここで何が起こっているのか、そしてこれらの手順の順序がなぜ重要なのかをできるだけ詳しく説明したいと思います。

1. FROM は、現在のコンテキストに指定されたベースイメージを使用するように Docker に指示します。私たちの場合、Node.js アプリケーションを実行できる環境が必要です。
2. WORKDIR はコンテナ内の現在の作業ディレクトリを設定します。
3. COPY は、現在のローカル ディレクトリ (プロジェクトのルート) からコンテナー内の作業ディレクトリにファイルまたはフォルダーをコピーします。ご覧のとおり、このステップでは依存関係に関連するファイルのみをコピーします。これは、Docker が各ビルド内のコマンドの各結果をレイヤーとしてキャッシュするためです。ビルド時間と帯域幅を最適化するため、依存関係が変更された場合にのみ再インストールする必要があります (通常はファイルの変更よりも頻度は低くなります)。
4. RUN シェル内でコマンドを実行します。
5. EXPOSE はコンテナの内部ポート用です (アプリの PORT env とは関係ありません)。ここでの値はどれでも問題ありませんが、さらに詳しく知りたい場合は公式ドキュメントを確認してください。
6. CMD の目的は、コンテナを実行するためのデフォルト値を提供することです。

これらのキーワードについて詳しく知りたい場合は、Dockerfile リファレンスを参照してください。

.dockerignore を追加する

.dockerignore ファイルの使用は必須ではありませんが、強くお勧めします。

• コンテナにジャンクファイルをコピーしないように注意してください。
• COPY コマンドの使用が簡単になります。

すでに使い慣れている場合は、.gitignore ファイルと同じように機能します。以下の内容を Dockerfile と同じレベルの .dockerignore ファイルにコピーすると、自動的に取得されます。

 README.md 
 
ギット
.gitignore 
 
 # ログ
糸デバッグログ
糸エラー.log 
 
 # バイナリ
ノードモジュール
*/*/ノードモジュール
 
 # ビルド
*/*/建てる
*/*/dist
 */*/script.js

最終的な画像を明るくするために無視したいファイルを自由に追加してください。

Dockerイメージのビルド

アプリケーションが Docker に対応できるようになったので、Docker から実際のイメージを生成する方法が必要になります。これを行うには、ルート package.json に新しいコマンドを追加します。

 {
 「名前」 : 「my-app」 、
 「バージョン」 : 「1.0.0」 、
 「ライセンス」 : 「MIT」 、
 「プライベート」 : true 、
 "ワークスペース" : [ "パッケージ/*" ],
 「devDependencies」 : {
 "esbuild" : "^0.9.6" 、
 "ts-node" : "^9.1.1" 、
 "typescript" : "^4.2.3"  
  },
 「スクリプト」 : {
 "app" : "yarn ワークスペース @my-app/app" 、
 "common" : "yarn ワークスペース @my-app/common" 、
 "server" : "yarn ワークスペース @my-app/server" 、
 「ビルド」 : 「ts-node ./scripts/build.ts」 、
 「サーブ」 : 「ノード ./packages/server/dist/index.js」 、
 "docker" : "docker build . -t my-app" //この行を追加します
  }
 }

dockerビルド。 -t my-app コマンドは、Docker に現在のディレクトリ (.) を使用して Dockerfile を検索し、結果のイメージに (-t) my-app という名前を付けるように指示します。

ターミナルで docker コマンドを使用できるように、Docker デーモンが実行されていることを確認してください。

コマンドがプロジェクトのスクリプトに追加されたので、yarn docker を使用して実行できます。

コマンドを実行すると、次のターミナル出力が表示されます。

ビルド コンテキストをDocker デーモンに送信しています 76.16 MB
ステップ 1/12:ノード:14.15.5-alpineから
---> c1babb15a629  
ステップ 2/12: WORKDIR /usr/src/app
 ---> b593905aaca7  
ステップ 3/12: ./package.json をコピーします。
 ---> e0046408059c  
ステップ 4/12: ./yarn.lock をコピーします。
 ---> a91db028a6f9  
ステップ 5/12: ./packages/app/package.json をコピーします。./packages/app/
 ---> 6430ae95a2f8  
ステップ 6/12: ./packages/common/package.json をコピーします。./packages/common/
 ---> 75edad061864  
ステップ 7/12: ./packages/server/package.json をコピーします。./packages/server/
 ---> e8afa17a7645  
ステップ8/12: 糸を通す
---> 2ca50e44a11a  
ステップ 9/12: コピーします。 。
 ---> 0642049120cf  
ステップ10/12: 糸のビルドを実行する
---> 15b224066078 で実行中 
糸ラン v1.22.5
 $ ts-node ./scripts/build.ts
 3.51秒で完了しました。
中間コンテナ 15b224066078 の削除
---> 9dce2d505c62  
ステップ11/12: EXPOSE 3000
 ---> f363ce55486b で実行中 
中間コンテナ f363ce55486b を削除しています
---> 961cd1512fcf  
ステップ 12/12: CMD [ "yarn" , "serve" ]
 ---> 7debd7a72538 で実行中 
中間コンテナ 7debd7a72538 を削除しています
---> df3884d6b3d6  
 df3884d6b3d6 を正常に構築しました
my-app:latest のタグ付けに成功しました

それでおしまい！これで、Docker で使用するためにイメージが作成され、マシンに登録されました。利用可能な Docker イメージを一覧表示したい場合は、docker image ls コマンドを実行します。

 → dockerイメージls
リポジトリ タグ イメージ ID 作成サイズ 
 my-app 最新 df3884d6b3d6 4分前 360MB

次のようにコマンドを実行します

コマンドラインから動作するDockerイメージを実行するのは、次のように簡単です: docker run -d -p 3000:3000 my-app

• -d はコンテナをデタッチモード（バックグラウンド）で実行します。
• -p はコンテナを公開するポートを設定します (形式は [ホスト ポート]:[コンテナ ポート])。したがって、コンテナ内のポート 3000 (Dockerfile の EXPOSE パラメータに注意してください) をコンテナ外のポート 8000 に公開したい場合は、-p フラグに 8000:3000 を渡します。

コンテナが実行中であることは、 docker ps で確認できます。実行中のコンテナがすべて一覧表示されます。

 → docker ps
コンテナID イメージ コマンド 作成ステータス ポート名
71465a89b58b my-app "docker-entrypoint.s…" 7 秒前 6 秒前にアップ 0.0.0.0:3000->3000/tcp determination_shockley

次に、ブラウザを開いて次の URL http://localhost:3000 に移動し、アプリケーションが実行中であることを確認します 🚀!