チュートリアル: Visual Studio Code を使用して Docker アプリを作成する

  • [アーティクル]

このチュートリアルは、Visual Studio Code (VS Code) で Docker を使う方法の概要を示す 4 部構成シリーズの最初のものです。 Docker コンテナーを作成して実行し、データを保持し、Docker Compose を使って複数のコンテナーを管理する方法について説明します。

VS Code には、ローカルの Docker Desktop サービスを使用できるようにする Docker 拡張機能が用意されています。 Docker Desktop はコンピューター上で実行され、ローカル コンテナーを管理します。これは、アプリを構築して実行するためのプラットフォームを提供するコンパクトな仮想化環境です。 コンテナーには、完全なオペレーティング システムのサイズとオーバーヘッドは必要ありません。

このチュートリアルでは、次の方法について説明します。

  • Docker コンテナーを作成する。
  • コンテナー イメージをビルドします。
  • アプリ コンテナーを起動する。

前提条件

このチュートリアルは、Windows 10 以降と、Linux コンテナーを使用するように構成された Docker Desktop 用です。

コンテナーを作成する

コンテナーは、コンピューター上のプロセスです。 ホスト コンピューター上の他のすべてのプロセスから分離されます。 その分離では、カーネル名前空間とコントロール グループが使用されます。

コンテナーでは分離されたファイル システムが使用されます。 このカスタム ファイル システムは、コンテナー イメージによって提供されます。 イメージには、すべての依存関係、構成、スクリプト、バイナリなど、アプリケーションの実行に必要なすべての情報が含まれます。 イメージには、環境変数、既定で実行されるコマンド、その他のメタデータなど、コンテナー用のその他の構成も含まれます。

VS Code 用の Docker 拡張機能をインストールした後、VS Code でコンテナーを操作できます。 Docker ペインのコンテキスト メニューに加え、 [ターミナル]>[新しいターミナル] を選択してコマンド ライン ウィンドウを開くことができます。 Bash ウィンドウでコマンドを実行することもできます。 指定のない限り、Bash としてラベル付けされたコマンドは、Bash ウィンドウまたは VS Code ターミナルで実行できます。

  1. Docker を Linux コンテナー モードに設定します。 現在 Windows コンテナーに設定されている場合に Linux コンテナーに切り替えるには、Docker Desktop の実行中にシステム トレイの Docker アイコンを右クリックし、[Linux コンテナーに切り替える] を選択します。

  2. VS Code で、 [ターミナル]>[新しいターミナル] を選択します。

  3. ターミナル ウィンドウまたは Bash ウィンドウで、このコマンドを実行します。

    docker run -d -p 80:80 docker/getting-started

    このコマンドには次のパラメーターが含まれます。

    • -d バックグラウンドで、コンテナーをデタッチ モードで実行します。
    • -p 80:80 ホストのポート 80 をコンテナー内のポート 80 にマップします。
    • docker/getting-started 使用するイメージを指定します。

    ヒント

    1 文字のフラグ同士を結合することで、完全なコマンドを短縮することができます。 例として、上記のコマンドは次のように記述できます。

    docker run -dp 80:80 docker/getting-started

  4. VS Code で、左側の Docker アイコンを選択して Docker 拡張機能を表示します。

    Screenshot shows the Docker extension with the docker/getting-started tutorial running.

    Docker VS Code 拡張機能では、コンピューターで実行されているコンテナーが表示されます。 コンテナー ログにアクセスし、停止や削除などのコンテナーのライフサイクルを管理できます。

    この例の modest_shockley というコンテナー名は、ランダムに作成されたものです。 実際は別の名前になります。

  5. docker/getting-started を右クリックして、コンテキスト メニューを開きます。 [ブラウザーで開く] を選択します。

    代わりに、ブラウザーを開き、「http://localhost/tutorial/」と入力します。

    DockerLabs について、ローカルでホストされているページが表示されます。

  6. docker/getting-started を右クリックして、コンテキスト メニューを開きます。 [削除] を選択して、このコンテナーを削除します。

    コマンド ラインを使用してコンテナーを削除するには、このコマンドを実行して、そのコンテナー ID を取得します。

    docker ps

    その後、コンテナーを停止して削除します。

    docker stop <container-id>
docker rm <container-id>

  7. ブラウザーを更新します。 先ほどの [はじめに] ページが表示されなくなりました。

アプリのコンテナー イメージをビルドする

このチュートリアルでは、シンプルな Todo アプリケーションを使用します。

Screenshot shows the sample application with several items added and a text box and button to add new items.

アプリを使用すると、作業項目を作成し、完了としてマークしたり、削除したりすることができます。

アプリケーションをビルドするには、Dockerfile を作成します。 Dockerfile は、コンテナー イメージの作成に使用される命令のテキストベースのスクリプトです。

  1. Docker の入門チュートリアル リポジトリに移動してから、 [コード]>[ZIP のダウンロード] を選択します。 ローカル フォルダーに内容を抽出します。

    Screenshot shows part of the Github site, with the green Code button and Download ZIP option highlighted.

  2. VS Code で、 [ファイル]>[フォルダーを開く] を選択します。 抽出されたプロジェクト内の app フォルダーに移動し、そのフォルダーを開きます。 package.json というファイルと、src および spec という 2 つのフォルダーがあるはずです。

    Screenshot of Visual Studio Code showing the package.json file open with the app loaded.

  3. Dockerfile という名前のファイルを、次の内容で、package.json ファイルと同じフォルダーに作成します。

    FROM node:20-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]

    注意

    ファイルに、.txt のようなファイル拡張子が含まれていないようにしてください。

  4. VS Code の左側にあるエクスプローラーで、Dockerfile を右クリックしてから、 [イメージのビルド] を選択します。 テキスト入力ボックスに、イメージのタグとして「getting-started」と入力します。

    タグはイメージのフレンドリ名です。

    コマンド ラインからコンテナー イメージを作成するには、次のコマンドを使用します。

    docker build -t getting-started .

    注意

    外部の Bash ウィンドウで、Dockerfile がある app フォルダーに移動して、このコマンドを実行します。

Dockerfile を使用して、新しいコンテナー イメージをビルドしました。 多くの "レイヤー" がダウンロードされているのに気付いたかもしれません。 Dockerfile は node:20-alpine イメージから始まります。 そのイメージが既にコンピューター上に存在していない限り、そのイメージをダウンロードする必要がありました。

イメージがダウンロードされた後、Dockerfile ではアプリケーションがコピーされ、yarn を使用してアプリケーションの依存関係がインストールされます。 Dockerfile の CMD 値では、このイメージからコンテナーを起動するときに実行する既定のコマンドが指定されます。

docker build コマンドの最後にある . は、現在のディレクトリ内の Dockerfile を検索するように Docker に指示するものです。

アプリ コンテナーを起動する

これでイメージが作成されたので、アプリケーションを実行できます。

  1. コンテナーを起動するには、次のコマンドを使用します。

    docker run -dp 3000:3000 getting-started

    -d パラメーターは、バックグラウンドで、コンテナーをデタッチ モードで実行することを示します。 -p 値の場合、ホスト ポート 3000 とコンテナー ポート 3000 の間のマッピングが作成されます。 ポート マッピングがなければ、アプリケーションにアクセスすることはできません。

  2. 数秒後、VS Code の Docker 領域にある [コンテナー] で [getting-started] を右クリックし、 [ブラウザーで開く] を選択します。 代わりに、Web ブラウザーを開いて http://localhost:3000 にアクセスすることもできます。

    アプリが実行されているのがわかるはずです。

    Screenshot shows the sample app with no items and the text No items yet Add one above.

  3. 期待どおりに動作するかどうかをテストする項目を 1 つまたは 2 つ追加します。 項目に完了のマークを付け、項目を削除することができます。 フロントエンドでは、バックエンドに項目が正常に格納されます。

次の手順

これでこのチュートリアルは終了であり、いくつかの項目を含む ToDo リスト マネージャーが動くようになっています。 コンテナー イメージを作成し、コンテナー化されたアプリを実行する方法を学習しました。

この一連のチュートリアルを続行するには、これまでに行ったすべてのことを保持します。 次に、このシリーズのパート II を試します。

Docker アプリを更新して共有する

役立つ可能性があるリソースをいくつか以下に示します。