チュートリアル: Visual Studio Code でコンテナーアプリを共有する

2025-05-14

このチュートリアルは、Visual Studio Code (VS Code) で使用するために Docker を導入する 4 部構成のシリーズのパート 2 です。

このチュートリアルでは、以下の内容を学習します。

コードを更新し、コンテナーを置き換えます。
画像を共有します。
新しいインスタンスでイメージを実行します。

[前提条件]

このチュートリアルでは、前のチュートリアル「 Visual Studio Code を使用してコンテナーアプリを作成する」を続けます。ここで続けるには、パート1で使用する動いているToDoリスト管理ツールが必要です。

コードを更新してコンテナーを置き換える

いくつかの変更を加え、コンテナーの管理について学習しましょう。

src/static/js/app.js ファイルで、次の新しいテキストラベルを使用するように 56 行目を更新します。
```
- <p className="text-center">No items yet! Add one above!</p>
+ <p className="text-center">You have no todo items yet! Add one above!</p>
```
変更を保存します。
コンテナーの現在のバージョンを停止して削除します。複数のコンテナーで同じポートを使用することはできません。

開始コンテナーを右クリックし、[削除] を選択します。

または、コマンドラインから次のコマンドを使用してコンテナー ID を取得します。
```
docker ps
```
次に、コンテナーを停止して削除します。
```
docker stop <container-id>
docker rm <container-id>
```
イメージの更新バージョンをビルドします。エクスプローラーで Dockerfile を右クリックし、[ ビルドイメージ] を選択します。

または、コマンドラインでビルドするには、Dockerfile を含むフォルダーにディレクトリを変更し、前に使用したのと同じコマンドを使用します。
```
docker build -t getting-started .
```
更新されたコードを使用する新しいコンテナーを開始します。
```
docker run -dp 3000:3000 getting-started
```
http://localhost:3000でブラウザーを更新して、更新されたヘルプテキストを表示します。

イメージを作成したので、それを共有できます。コンテナーイメージを共有するには、コンテナーレジストリを使用します。既定のレジストリは Docker Hub です。Docker Hub は、使用したすべてのイメージの元の場所です。

イメージをプッシュするには、まず Docker Hub にリポジトリを作成する必要があります。

Docker Hub に移動し、アカウントにサインインします。
[ リポジトリの作成] を選択します。
リポジトリ名として、「 getting-started」と入力します。 [可視性] が [パブリック] であることを確認します。
を選択してを作成します。

ページの右側に、 Docker コマンドという名前のセクションが表示されます。このセクションでは、このリポジトリにプッシュするために実行するコマンドの例を示します。
VS Code のコンテナーエクスプローラーの REGISTRIES で、プラグアイコンをクリックしてレジストリに接続し、 Docker Hub を選択します。

Docker Hub アカウント名とパスワードを入力します。
VS Code のコンテナーエクスプローラーの [IMAGES] でイメージタグを右クリックし、[ プッシュ] を選択します。名前空間とタグを入力するか、既定値をそのまま使用します。
コマンドラインを使用して Docker Hub にプッシュするには、次の手順を使用します。

Docker Hub にサインインします。
```
docker login -u <username>
```
次のコマンドを使用して、開始イメージに新しい名前を付けます。
```
docker tag getting-started <username>/getting-started
```
コンテナーをプッシュするには、次のコマンドを使用します。
```
docker push <username>/getting-started
```

新しいインスタンスでイメージを実行する

イメージがビルドされ、レジストリにプッシュされたので、このコンテナーイメージを見たことがないまったく新しいインスタンスでアプリを実行してみてください。アプリを実行するには、Docker で Play を使用します。

ブラウザーを開いて Docker で再生します。
Docker Hub アカウントでサインインします。
[開始] を選択し、左側のバーにある [+ 新しいインスタンスの追加] リンクを選択します。数秒後、ブラウザーでターミナルウィンドウが開きます。
ターミナルで、アプリを起動します。
```
docker run -dp 3000:3000 <username>/getting-started
```
Docker で再生すると、イメージがプルダウンされ、起動されます。
OPEN PORT の横にある 3000 バッジを選択 します。変更したアプリが表示されます。

3000 バッジが表示されない場合は、[ポートを開く] を選択し、「3000」と入力します。

リソースをクリーンアップする

この一連のチュートリアルを続けるには、これまでに行ったことをすべて保持してください。

次のステップ

おめでとう。パート 2 を完了し、コードを更新し、新しいインスタンスでイメージを実行する方法を学習しました。

役に立つリソースを次に示します。

次に、このシリーズの次のチュートリアルをお試しください。

データを永続化し、Docker アプリをレイヤー化する

次の方法で共有

チュートリアル: Visual Studio Code でコンテナー アプリを共有する

[前提条件]

コードを更新してコンテナーを置き換える

画像を共有する

新しいインスタンスでイメージを実行する

リソースをクリーンアップする

次のステップ

フィードバック

その他のリソース

チュートリアル: Visual Studio Code でコンテナーアプリを共有する