Vite dApp プロジェクトを Docker 化する初心者向けガイド

DOCKERIZEとは何なのか疑問に思うかもしれません。これは、 Docker を使用して dApp プロジェクトをコンテナ化することを意味します。

Docker は、アプリケーションの開発、出荷、実行のためのオープン プラットフォームです。Docker を使用すると、アプリケーションをインフラストラクチャから分離して、ソフトウェアを迅速に提供できるようになります。

• アプリケーションには、 Web アプリ、API、モバイル アプリ、バックエンド サービスが含まれます。記述したコード、使用するライブラリ、実行に必要な構成が含まれます。
• インフラストラクチャには、オペレーティング システム (OS)、ネットワーク設定、Web サーバー、データベース、アプリケーションがやり取りするその他のサービスなどがあります。また、アプリケーションが実行されるハードウェアまたは仮想マシンも含まれます。

Docker を使用すると、 CONTAINER と呼ばれる緩く分離された環境内でアプリケーションを単一のエンティティとしてパッケージ化して実行できます。

容器

コンテナーは軽量で、アプリケーションの実行に必要なものがすべて含まれているため、ホストにインストールされているものに依存する必要はありません。作業中にコンテナーを共有でき、共有するすべてのユーザーが同じ方法で動作する同じコンテナーを取得できます。

たとえば、あなたと同僚が Node.js と Hardhat を使用する dApp プロジェクトに取り組んでいるとします。最初に、同僚がアプリケーションをローカルで実行する前に、同僚のシステムに Node.js と Hardhat をインストールする必要があることを承知の上で、ローカル マシンにプロジェクトをセットアップしました。ここで、同僚の 1 人が Node.js および Hardhat と互換性のないマシンを使用していると仮定します。この問題をどのように解決しますか?

Docker を使用すると、アプリケーションとそのすべての依存関係を、任意のオペレーティング システムで実行できる単一のコンテナーにパッケージ化できます。これにより、ソフトウェアや依存関係を異なるマシンに個別にインストールするという問題が解決されます。

画像

アプリケーションをコンテナ化した後、どうやって実行しますか?

フロントエンド開発者として、新しい React アプリを開始するときは、通常、 npx create-react-appまたはnpm init vite@latestを実行します。既存のプロジェクトの場合は、通常、 git pullに続いてnpm install実行してローカルで実行します。同様に、コンテナを実行するには、コンテナ イメージと呼ばれるものが必要です。

コンテナ イメージは、コンテナ内でアプリケーションを実行するために必要なすべてのファイル、バイナリ、ライブラリ、構成を含む標準化されたパッケージです。すべてがバンドルされているため、どの環境でも一貫して実行できます。

コンテナイメージについては以下を参照してください。

実習

このセクションでは、アプリをコンテナ化して共有する方法を学習します。

前提条件

1. Docker Desktopの最新バージョンをインストールしました。
2. Git クライアントをインストールしました。
3. ファイルを編集するための IDE またはテキスト エディターがあります。Docker ではVisual Studio Codeの使用を推奨しています。

アプリケーションをコンテナ化する

1. ルート ディレクトリで、次のコマンド プロンプトを使用して docker を初期化します。

    docker init

2. プロンプトに答えてください

   ? What application platform does your project use? Node ? What version of Node do you want to use? 20.16.0 ? Which package manager do you want to use? npm ? Do you want to run "npm run build" before starting your server? No ? What command do you want to use to start the app? ["npm", "run", "dev"] ? What port does your server listen on? 5173

3. ディレクトリ内に.dockerignore 、 compose.yaml 、 DockerFileという3つの追加ファイルが表示されます。

   

• Dockerfil : Dockerfile は、イメージを組み立てるためにユーザーがコマンド ラインで呼び出すことができるすべてのコマンドを含むテキスト ドキュメントです。
• compose.yaml : Compose ファイル、またはcompose.yamlファイルは、マルチコンテナ アプリケーションを定義する方法について、Compose 仕様で規定されているルールに従います。
• .dockerignore : このファイルは、ビルド コンテキストからファイルとディレクトリを除外します。

4. Dockerfile内で、ファイルを消去し、以下を追加します。

    # syntax=docker/dockerfile:1 ARG NODE_VERSION=20.16.0 FROM node:${NODE_VERSION}-alpine # Use development node environment by default. ENV NODE_ENV development WORKDIR /app # Copy package.json and package-lock.json to the working directory COPY package.json package-lock.json ./ # Install dependencies RUN npm install # Copy the rest of the source files into the image COPY . . # Change ownership of the /app directory to the node user RUN chown -R node:node /app # Switch to the node user USER node # Ensure node_modules/.bin is in the PATH ENV PATH /app/node_modules/.bin:$PATH # Expose the port that the application listens on EXPOSE 5173 # Run the application CMD ["npm", "run", "dev"]

5. 以下を使用してコンテナ イメージを構築します。

    docker build -t <your-image-name> .

6. コンテナイメージを確認するには、Dockerデスクトップに移動し、以下に示すようにImagesをクリックします。

   

   またはこのコマンドプロンプトを使用することもできます。

    docker images

7. ターミナルでコンテナイメージを確認するには

   

8. イメージを実行します:

    docker run -p 5173:5173 <your-image-name>

次のような出力が表示されます。

 > [email protected] dev > vite VITE v5.4.2 ready in 222 ms ➜ Local: http://localhost:5173/ ➜ Network: http://172.17.0.2:5173/

アプリケーションの共有

1. Docker Hubにサインアップまたはサインインします。

2. 「リポジトリの作成」ボタンを選択します。

   

3. リポジトリに同じコンテナ イメージ名を付けます。可視性がPublic であることを確認します。

4. [作成]を選択します。

5. コマンドラインを使用してDocker Hubにサインインする

   docker login -u <YOUR USERNAME>

6. パスワードを入力してください

   入力中にパスワードは表示されません

   

7. docker tagコマンドを使用して、 getting-startedイメージに新しい名前を付けます。YOUR YOUR-USER-NAME Docker ID に置き換えます。

   

   プッシュ中に、 denied: requested access to the resource is denied表示される場合があります。

   これを修正するには、

   1. docker login使用して再ログインし、Enter キーを押します。
   2. その後、ブラウザに移動します。
   3. 端末にOTPをコピーして入力します。
   4. 確認を押す
   5. イメージを再プッシュする

   

   次のような出力が表示されます。

   

これは、イメージがビルドされ、レジストリにプッシュされたことを示しています。これで、チームはこのイメージをプルし、ローカル マシンでアプリケーションを実行できます。

docker デスクトップまたはdocker hubの検索バーでコンテナ イメージを検索して確認できます。

トラブルシューティング

• ポート競合:

  • エラー: ポートがすでに使用されていた場合。

  • 解決策: ポートを使用しているプロセスを識別し、次のコマンドを使用して終了しました。

     # Find the process using port 8000 lsof -i :8000 # Kill the process (replace <PID> with the actual process ID found from the previous command) kill -9 <PID> 

    

  • あるいは、別のポートで Docker コンテナを実行することもできます。

     docker run -p 8001:8000 <your-image-name>

• アプリケーションを更新する

  アプリを更新すると、例えば構文や関数が変更されると、

  1. Dockerデスクトップを停止し、 Containersをクリックします

  2. ポートを停止し、削除をクリックします

     

  3. docker buildコマンドを使用してアプリケーションを再構築します。

      docker build -t <your-image-name> .

  4. アプリを再実行する

     docker run -p 5173:5173 <your-image-name>

結論

このガイドに従うことで、アプリケーションとその依存関係をコンテナに簡単にパッケージ化し、チームと共有して、どのマシンでも簡単に実行できるようになります。これにより、コラボレーションが強化されるだけでなく、環境の設定や互換性に関連する問題も軽減されます。