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

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

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

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

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

前提条件

• Visual Studio Code がインストールされていること。
• Docker VS Code 拡張機能がインストールされています。
• Linux コンテナーを使用するように構成された Docker Desktop。
• Docker Hub アカウント。 アカウントは無料で作成できます。

このチュートリアルは、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 拡張機能を表示します。

   

   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 アプリケーションを使用します。

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

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

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

   

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

   

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 にアクセスすることもできます。

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

   

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

次の手順

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

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

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

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

• Docker Cloud Integration
• 使用例