糸ワークスペースのためのDockerセットアップ

導入

monoreposが現在開発者コミュニティで彼らの瞬間を持っているようであるように、我々はかなりの新しいmonorepoツールが飛び出るのを見ることができます.NPM最近発表npm workspaces バージョン7ではNx 多くの人気を得ているlerna 今しばらくの間、されています.私の使用yarn 私のプロジェクトの大部分で、それは探検するのが楽しいと思いましたyarn workspaces シンプルなmonorepoのセットアップで.
このワークスペースでは、2つの反応アプリケーションを追加する予定です.さらに、我々はまた、展開を容易にするためにDockerのサポートを追加することができます.始めましょう.

ワークスペースの初期化

プロジェクトのフォルダを作成して糸を初期化しましょう

mkdir yarn-docker-setup
cd yarn-docker-setup
yarn init -p

If you do not have yarn installed already, you can install by npm install yarn -g.

基本的な質問を記入した後package.json ファイル.
このプロジェクトをワークスペースに変えるにはworkspaces 我々のオプションpackage.json

"workspaces": ["apps/*"]

apps ディレクトリは、すべてのアプリケーションのライブです.
すごい!我々は、我々のワークスペースを初期化しました、次のステップはアプリケーションを加えることです.

アプリの追加

我々は、このプロジェクトに2つの反応アプリケーションを追加する予定ですadmin and product . 使っているCreate React App 我々のアプリを足場に.

yarn create react-app apps/admin
yarn create react-app apps/product

これは数分かかると終了すると、最後にadmin and product インサイドapps フォルダ.
すごい!我々は我々のワークスペースに2つのアプリを追加しました.次のステップは、それが最適化し、それらをキャッシュすることができますので、各アプリの依存関係について知っている糸を聞かせています.プロジェクトのルートフォルダで

yarn install

これは依存関係を通過し、中央に移動しますnode_modules プロジェクトのルートのフォルダ.
すべてを見るために我々のセットアップをテストしましょう.スクリプトを加えましょうpackage.json 開始し、我々のアプリを構築する

"scripts": {
    "admin": "yarn workspace admin start",
    "product": "yarn workspace product start",
    "build:admin": "yarn workspace admin build",
    "build:product": "yarn workspace product build"
}

また、静的ファイルに我々のアプリをコンパイルするスクリプトを構築しました.
我々が走るならばyarn admin or yarn product , 我々は標準的な作成反応アプリ画面を参照してくださいする必要があります

Dockerサポートの追加

Dockerは、環境やオペレーティングシステムに依存せずに実行することができる画像に我々のアプリをパッケージするために、シンプルで効果的な方法を提供します.Dockerを構成すると、我々は簡単な構成で複数のサービスを(アプリケーション)を調整することができます.ドッカーとDockerにあまりにも多くのこの記事のためのリーチを構成するので、Dockerの設定に飛び込みましょう.
最初のステップはDockerfile . 我々は、各アプリケーションの個々のDockerFilesを追加することができますが、ビルドプロセスは両方のアプリケーションのため、同じですので、両方の両方のための単一のDockerFileを使用することができます.
まず、私たちはnode 我々の反応プロジェクトをコンパイルする環境、そして我々はこのケースでは、ビルドする必要があるフォルダの名前が必要ですadmin or product . 我々はそれを使用して取得BUILD_CONTEXT 引数.

FROM node:14.17.1 as build
ARG BUILD_CONTEXT

次のステップは、ソースコードをイメージにコピーすることです.

WORKDIR /base
COPY package.json .
COPY yarn.lock .
COPY ./apps/$BUILD_CONTEXT/package.json apps/$BUILD_CONTEXT/
RUN yarn install

定義中/base 作業ディレクトリとして.すべてのコードはここに行きます.
次の3行では、コピーしていますpackage.json , yarn.lock とpackage.json 画像に特定のアプリケーションのファイル.
その後、我々は実行yarn install 依存関係をインストールするには

Interesting thing to note here is, we could have copied our entire source code into the container in one go. The reason we don't do that is, every instruction in a Dockerfile is cached in the background. By copying just the package.json and yarn.lock files, we can take advantage of this caching system. These files rarely change in the course of the project, so if we install our dependencies once, and if they don't change the next time we build, Docker will use the existing cache and not run yarn install every-time we build. This will significantly reduce our build times.

次のステップは、アプリケーションのコードをコピーしてビルドすることです.

COPY ./apps/$BUILD_CONTEXT apps/$BUILD_CONTEXT
RUN yarn build:$BUILD_CONTEXT

今のところ偉いDockerfile このように見える

FROM node:14.17.1 as build
ARG BUILD_CONTEXT

WORKDIR /fe
COPY package.json .
COPY yarn.lock .
COPY ./apps/$BUILD_CONTEXT/package.json apps/$BUILD_CONTEXT/
RUN yarn install
COPY ./apps/$BUILD_CONTEXT apps/$BUILD_CONTEXT
RUN yarn build:$BUILD_CONTEXT

我々の編集ステップは完了です.私たちの反応アプリ静的なファイルにコンパイルされており、彼らは画像の中です.しかし、それらを提供するためには、Webサーバーが必要です.私たちはnode 我々のウェブサーバとして、我々はすでに建物のためにそれを使っています.しかし、ノードイメージはかなりの(ギガバイトに近い)サイズの伝統的なWebサーバに比べて大きいですnginx .
私たちは私たちのビルドステップの一部としてnginxの設定を追加しますDockerfile .

FROM nginx:stable-alpine
ARG BUILD_CONTEXT
COPY --from=build /fe/apps/$BUILD_CONTEXT/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

最初の2行は自己説明です.
番目の行はどこが面白いのです.あなたが我々の最初の線を見るならばDockerfile , と言うas build ノードのバージョンの横にある.これは私たちがビルドステップの後の部分で文脈としてこれを参照できるようにされます.
我々は、我々のコンパイルされた反応アプリをnode イメージ.私たちはそれらのファイルを取って、それを我々の中に入れなければなりませんnginx イメージ.それがこの行の意味です.コピーする/fe/apps/$BUILD_CONTEXT/build フォルダbuild 文脈/usr/share/nginx/html .
最後の行は、我々の始まりですnginx Webサーバ.
次のステップはnginx.conf nginxは、このように見えるアプリケーションを実行するために使用できます.これは任意のフロントエンドのアプリケーションに使用することができますBearbone NGinXのWebサーバーの設定です.

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

全体Dockerfile このように

#build
FROM node:14.17.1 as build
ARG BUILD_CONTEXT

WORKDIR /base
COPY package.json .
COPY yarn.lock .
COPY ./apps/$BUILD_CONTEXT/package.json apps/$BUILD_CONTEXT/
RUN yarn install
COPY ./apps/$BUILD_CONTEXT apps/$BUILD_CONTEXT
RUN yarn build:$BUILD_CONTEXT

#webserver
FROM nginx:stable-alpine
ARG BUILD_CONTEXT
COPY --from=build /base/apps/$BUILD_CONTEXT/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

このセットアップは、我々のアプリケーションのDockerイメージを構築し、実行して実行するのに十分です

docker run <image-name> -e BUILD_CONTEXT=admin/product

我々はさらに少し行きたいし、使用してオーケストレーションステップを追加しますdocker-compose
このためには、docker-compose.yml プロジェクトのルートでファイルします.

version: '3'

services:
  admin:
    container_name: admin
    build:
      context: .
      dockerfile: Dockerfile
      args:
        - BUILD_CONTEXT=admin
    ports:
      - '8080:80'
  product:
    container_name: product
    build:
      context: .
      dockerfile: Dockerfile
      args:
        - BUILD_CONTEXT=product
    ports:
      - '8082:80'

ここで2つのサービスを定義します.admin and product 我々の2つのアプリ.
サービスセクションでは、3つのプロパティを定義します.container_name , build and ports .

container_name コンテナの名前を定義する

context インbuild このビルドを実行するディレクトリを参照してください.dockerfile は、Dockerfile and args ビルド時引数を参照ください.これらは、Dockerfile ARG セクション

ports ホストマシン上のポートをコンテナポートにマップします.値8082:80 ホストマシンのポート8082のどんな要求もコンテナのポート80に発送されることを示します.

すごい!我々は、我々のDocker合成セットアップでします.最終的なことを実行し、自分自身を参照してください残っている.

docker-compose build

コマンドは両方のアプリケーションを構築するために使用されます.これは我々のアプリからの指示を使用してコンパイルされますDockerfile 画像を作成します.
これらのイメージを実行するには

docker-compose up

このコマンドは私たちのイメージを取り、コンテナを作成し、それらを実行します.
今、我々は行くことができますhttp://localhost:8080 and http://localhost:8082 アクションで我々のアプリを参照してください.

結論

我々が今持っているのは、ワークスペースとDockerセットアップの非常に簡単な実装です.これを開始点として使用し、バックエンドサービスやコンポーネントライブラリをこの設定に追加し始めることができます.

If you are interested in setting up a component library from scratch, check out my article on

我々は、新しいプロジェクトを追加することができますapps フォルダと糸は、我々のために依存解決の世話をします.
このセットアップのソースコードを見つけることができますhere
乾杯!