タスク2 - Dockerfile の追加

タスク 2

正常動作が確認できた各プロジェクトに Visual Studio Code の Docker 拡張を使用して、コンテナーの構成情報を含む Dockerfile を追加します。

この手順では Visual Studio Code の Docker 拡張を使用しますので、インストールされていない場合はインストールを行ってください。

以下の手順をプロジェクト containerapps-albumapi-javascript、containerapps-albumui それぞれに行います。

手順

1. Visual Studio Code でプロジェクトをオープンします。
   下記のように containerapps-albumapi-javascript (または containerapps-albumui) のフォルダーがルートになるようにプロジェクトをオープンしてください。
   操作画面イメージ

   

2. キーボードの F1 キーを押下して、Visual Studio Code のコマンドバーを表示します

3. コマンドバーから “Docker: Add Docker Files to Workspace…” を選択します
   操作画面イメージ

   

4. Select Application Platform でドロップダウン リストボックスから “Node.js” を選択します

5. Choose a pakage.json file でドロップダウン リストボックスから “package.json” を選択します

6. What port(s) does your listen on? (略) でポート番号を指定します
   以下のように、作業しているプロジェクトにより指定する値が異なりますので注意してください

   • containerapps-albumapi-javascript : 3500 を指定

   • containerapps-albumui : 3000 を指定

7. Include optional Docker Compose files? で “No” を選択します ここまでの手順で Dockerfile が生成されます

   プロジェクト内に Dockerfile という名前のファイルが追加されていることを確認してください

   操作画面イメージ

   

8. 生成された Dockerfile を GitHub 上のリポジトリにも反映します
   キーボードの Ctrl + Shift + G を押下してソース管理をアクティブにし、Dockerfile の右に表示される + をクリックします。
   操作画面イメージ

   

9. Add Dockerfile 等のコミット用のコメントを入力した後、✓ Commit ボタン右側のプルダウンから Commit & Push を選択します
   操作画面イメージ

   

10. 「事前準備」の「3. 演習で使用するプロジェクトの入手」で作成した GitHub 上のリポジトリを開き、コミットした Dockerfile がリポジトリ上にも存在することを確認します
    操作画面イメージ

    

プロジェクト containerapps-albumui に対しても上記手順と同様の作業を行なってください。