VisualStudioCode用のDockerプラグインの使用方法

投稿日: 2022-04-20 2022-04-20
タグ: Development, Docker, VS Code

序章

この記事では、VisualStudioCode用のDockerプラグインを使用します。 Dockerを使用すると、アプリケーションをイメージにパッケージ化し、Dockerがインストールされている任意のプラットフォームでコンテナーとして実行できます。このプラグインは、Node.jsとGoの2つの開発者スタックで使用します。

インストール

ワークステーションにDockerをインストールする必要があります。 Dockerのインストールと実行方法の説明は、ここで入手でき、実行している特定のオペレーティングシステムに固有である必要があります。

また、 Visual StudioCodeがインストールされている必要があります。

Visual Studio Codeをインストールしたら、それを開いて、左端のペインの拡張機能セクションをクリックし、Dockerを検索します。 VS Code with left panel open showing Docker plugin

インストールすると、VisualStudioCodeインスタンスにいくつかの新しいことがわかります。左端のペインには、Dockerロゴが付いた新しいDockerセクションがあり、クリックすると3つのセクションがあるDockerExplorerが開きます。画像、コンテナ、レジストリ The Docker Explorer panel

コマンドパレットにはいくつかのコマンドが追加されており、コマンドパレットを開いて、docker Docker typed into the command palette showing the commands available と入力すると表示できます。

Node.js

Node.jsアプリケーションを使用して、DockerプラグインがVSCodeに追加する機能を示します。

Expressサーバーを作成しましょう。

mkdir docker-node
cd docker-node
npm init -y
npm install --save express
touch index.js

次のようなディレクトリツリーが必要です。

.
├── index.js
├── node_modules
├── package-lock.json
└── package.json

1 directory, 3 files

index.jsの内容です

index.js

const express = require('express')
const app = express()

app.listen(3000)

app.get('/', (req, res) => {
  res.send('hello world')
})

package.jsonを更新して、開始スクリプトを作成します。

package.json

"scripts": {
    "start": "node index.js"
  },

これで、このアプリをnpm startで実行し、ポート3000に移動して、アプリが機能することを確認できます。

従来、Dockerを追加するには、次の手順に従います。

Dockerfile（またはdocker-compose.yaml）を作成します
Docker命令をファイルに追加します（FROM、WORKDIR、ADD、EXPOSE、CMD）
ターミナルでdocker build...を実行して、イメージをビルドします
ターミナルでdocker run...を実行して、コンテナを実行します

ただし、プラグインを使用する場合は、次のことを行う必要があります。コマンドパレットを開き、dockerと入力して、Docker: Add Docker files to Workspaceを選択します。それは最初のオプションでなければなりません。 Enter Selecting を押します。プラットフォーム/スタックを選択し、Node.jsを選択して、Enterを押すように求められます。 Selecting Node.js 次に、ポートを選択するように求められます。 3000と書くと、アプリがリッスンするポートになります。 Adding in the port number, 3000 次のファイルがワークスペースに追加されます：.dockerignore、docker-compose.debug.yml、docker-compose.yml、およびDockerfile。 Files listed in your workspace

.dockerignoreは、ビルドイメージにファイルを追加するときに、リストされているファイルを無視するようにDockerに指示します。

docker-compose.debug.ymlを使用すると、docker-composeを検査して実行し、デバッガーを接続できます。

version: '2.1'

services:
  docker-node:
    image: docker-node
    build: .
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
      - 9229:9229
    command: node --inspect=0.0.0.0:9229 index.js

ただし、開発中にデバッグしている場合は、ローカルマシンで行った変更がコンテナに保持されるように、ボリュームをアタッチする必要がある場合があります。

docker-compose.ymlファイルは、docker-servicesの実行に使用される標準のdocker-composeファイルです。データベース接続やロードバランサーなどの他のリソース/サービスを追加するときは、このファイルを編集します。

version: '2.1'

services:
  docker-node:
    image: docker-node
    build: .
    environment:
      NODE_ENV: production
    ports:
      - 3000:3000

ここで最も重要なDockerfileは、ビルドする必要があるため、プラグインがインストールされていない場合に手動で作成する必要がある命令が含まれています。

FROM node:8.9-alpine
ENV NODE_ENV production
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install --production --silent && mv node_modules ../
COPY . .
EXPOSE 3000
CMD npm start

次に、イメージをビルドするには、VS Codeコマンドパレットを開き、dockerと入力し、Docker: Build Imageを選択して、Enterを押します。 Selecting Docker Build Image Dockerfileを選択するように求められ、それを選択してEnterを押します。 Selecting the Dockerfile 次に、タグを選択するように求められます。デフォルトのdocker-nodeを選択したままにして、Enterを押します。 Leaving docker-node as the selection 統合ターミナルが開き、ビルドログが表示されます。 Build logs showing after the docker-build command

最後に、コンテナを実行する必要があります。もう一度、コマンドパレットを開き、docker runと入力し、Docker: Run docker run typed into the command palette を選択します。システム内のすべてのコンテナーのリストが表示され、docker-node:latestを選択します。、タグを付けたもので、Enterを押します。 selecting docker-node 端末に実行コマンドのログが表示されます。 logs output after the docker run command [X12X]にアクセスしてアプリケーションを実行できるように、ポートをホストマシンに公開する-p 3000:3000が追加されていることに注意してください。

左側のペインに移動してDockerセクションを選択し、 Imagesの下でdocker-node画像を選択し、右クリックして実行をクリックすることで、コンテナーを実行することもできます。。 under the docker-node menu, menu with 同じログが端末で実行されます。

上記の画像セクションには、システム内の画像のリストがあることにも気付くでしょう。 docker-nodeコンテナーが実行されると、同じセクションで実行中のコンテナーを確認し、停止することもできます。 under docker-node registries the 上記では、Attach Shellが選択されています。これは、以下のdockerコマンドに相当します。

docker exec -it <container> sh

これは、以下の端末ログ出力を示しています。

docker exec command executed with file output

コンテナ内にいることがわかり、コンテナ内のファイルを一覧表示できます。

コンテナーを停止し、docker-composeを使用してアプリを実行してみてください。コマンドパレットを開き、docker-composeを見つけて、出力を確認します。

行け

Golangに慣れていない場合は、次のトピックにスキップできます。

DockerもGoで構築されています

Goアプリを作成しましょう。

mkdir docker-go
cd docker-go
touch main.go

ディレクトリツリーには1つのファイルがあります。

.
└── main.go

0 directories, 1 file

main.goファイルの内容は次のとおりです。

main.go

package main

import (
	"log"
	"net/http"
)

func helloHandler(w http.ResponseWriter, r *http.Request) {
	w.Write([]byte("Hello World"))
}

func main() {
	http.HandleFunc("/", helloHandler)

	if err := http.ListenAndServe(":9000", nil); err != nil {
		log.Fatalln("ListenAndServer Error", err)
	}
}

次のコマンドでアプリを実行できます。

go run main.go

ただし、VSCode Dockerプラグインを使用してイメージを構築し、コンテナーを実行してみましょう。

コマンドパレットを開き、Dockerと入力して、Docker: Add Dockerfile to Workspaceを選択して、Dockerfileを作成します。

プラットフォームを選択するように求められたら、Goを選択して、Enterを押します。 Selecting Go from the Application Platform menu

次に、ポートを選択し、ポート9000を書き込むように求められます。これは、アプリで選択したポートであるため、Enterを押します。 Selecting the port by entering

以下の4つのファイルが作成されます。 .dockerignore、docker-compose.debug.yml、docker-compose.yml、およびDockerfile。 The files created under the Docker-Go Application

.dockerignoreファイルは、イメージにファイルを追加するときに一部のファイルを無視するようにDockerに指示します。

docker-compose.debug.ymlとdocker-compose.ymlは、DockerComposeがアプリを実行するために使用します。 Goのデバッグはより複雑であるため、デバッグファイルには追加の入力が必要になるため、これらはそれほど違いはありません。

ただし、ここでのDockerfileは最も興味深いビットです。 build stageの最後の2行がコメント化され、RUN go install -v ./...が追加されます。

# RUN go-wrapper download   # "go get -d -v ./..."
# RUN go-wrapper install    # "go install -v ./..."
RUN go install -v ./...

これが最終的なDockerファイルです。

#build stage
FROM golang:alpine AS builder
WORKDIR /go/src/app
COPY . .
RUN apk add --no-cache git
# RUN go-wrapper download   # "go get -d -v ./..."
# RUN go-wrapper install    # "go install -v ./..."
RUN go install -v ./...

#final stage
FROM alpine:latest
RUN apk --no-cache add ca-certificates
COPY --from=builder /go/bin/app /app
ENTRYPOINT ./app
LABEL Name=docker-go Version=0.0.1
EXPOSE 9000

このタイプのDockerfileパターンはマルチステージビルドと呼ばれ、その主な利点はDockerイメージの最適化です。これは、コンパイルされたアプリを実行するためにコンパイルツールを必要としないほとんどの場合、コンパイルされた言語で主に役立ちます。 Goは良い例です。

簡単に言うと、Dockerビルドの一部を使用してアプリをコンパイルし、コンパイルされたバイナリをより軽いDockerイメージにコピーして、そこから実行します。

次に、イメージを作成する必要があります。コマンドパレットを開き、docker-buildと入力し、Docker: Build Imageを選択して、Enterを押します。

Dockerfileを選択するように求められ、デフォルトを選択したままにして、Enterを押します。

最後に、画像タグを選択するように求められます。デフォルトのdocker-go:latestのままにして、Enterを押します。 Selecting the docker-go:latest image 統合ターミナルにビルドログが表示されます。

最後に、コンテナを実行する必要があります。コマンドパレットを開き、docker runと入力します。 Docker: Runを選択し、Enterを押します。 selecting docker Run in the command palette 画像を選択するように求められます。 docker-go:latestを選択します。 selecting docker=go:latest for the image 統合ターミナルにログが表示されます。 logs in the output following the command running 以前と同様に、左側のペインでDockerセクションを選択してコンテナーを実行することもできます。コンテナーの下で、docker-goを選択し、実行をクリックして右クリックします。 Selecting 同じdocker run ログが表示されます。

実行中のDockerコンテナにはバイナリしか含まれていないため、コンテナセクションでシェルをアタッチできます。 In the Containers section of the 統合ターミナルの接続されたシェルでlsと入力すると、Dockerfileに対応するappというバイナリファイルが表示されます。 running in the integrated terminal with the app file listed

その他の機能

最後に、VSCodeDockerプラグインに付属するその他の便利な機能について説明します。

Dockerによるイメージの検査：これにより、ビルドされたイメージを検査し、JSONファイルで詳細を確認できます。

目的の画像を選択してコンテキストメニューを開き、画像の検査を選択します。 Selecting the Go image and inspect image from the dropdown JSONファイルが詳細とともに開かれます。 JSOn file witht he details of the image

コンテナログの表示：これは、実行中のコンテナのコンテキストメニューにもあります。実行中のNode.jsコンテナ Selecting を使用します。ログは統合ターミナルに表示されます。 logs showing in the terminal

レジストリ：Dockerレジストリにログインして、ビルドおよびプッシュしたイメージを確認できます。

システムの整理：このオプションを使用すると、docker system pruneを実行して、システムの未使用のイメージをクリアできます。 Dockerエクスプローラーのウィンドウとクロスのボタンから利用できます。 The System Prune option selected in the Docker Explorer menu

Intellisense：Dockerファイル（Dockerfile、docker-compose.yml）を自分で作成する必要がある場合は、入力時に便利なIntellisenseを使用できます。 User typing with Intellisense providing suggestions 利用可能な画像タグも提供します。これは、画像名、完全なコロン、CMD +Spaceを入力することでトリガーされます。 Image tags listed after typing command + space

Dockerfileのリンティング：Dockerfilesにエラーがあると、VS Codeに波線が表示され、その上にカーソルを合わせると、エラーが何であるかが表示されます。 error typed in with line highlighting the error and suggestions

VSCodeの下のproblemsタブにも表示されます。 Problems tab selected with the issues listed

結論

VS Code用のDockerプラグインを使用すると、コマンドの多くを自分で入力しなくても、Dockerfileをすばやくセットアップして作成し、ビルドして実行できます。

getdocs

8684