BFT名古屋 TECH BLOG

日々の業務で得た知識を所属するエンジニアたちがアウトプットしていきます。

トップ > Docker > 【GCP・VSCode・WSL2・docker・Sourcetree】Windows PC上で快適に開発する環境を作る！（２／２）

【GCP・VSCode・WSL2・docker・Sourcetree】Windows PC上で快適に開発する環境を作る！（２／２）

Docker GCP Ansible 自動化

はじめに

こんにちは！
株式会社ＢＦＴ名古屋支店・インフラ女子（？）のやまぐちです。

さて前回から引き続き、Windows PC上で開発環境を作っていきます。

今回の構成のゴールを再度確認しましょう。パッケージやソフトウェアはインストールしたので、今回は連携させるための設定や作業を中心に説明します。

この構成の何が楽かって、dockerコマンドを意識することなくVSCodeでコンテナの起動・接続ができる部分です。こんなバックエンドの仕組みなど理解しなくても開発だけに集中できるのがよいです。全部の手順は以下の通りです。

必要なパッケージ・ソフトウェアを導入する 　←前回の説明
（１）「Sourcetree」
　　　開発ソースをpullしたりpushしたりするのに使います。VSCodeでもできますが、競合の解決などに便利なのでSourcetree推しです。
（２）「WSL2」
　　　Windows上でLinuxカーネルを使うために利用します。
（３）「VSCode」
　　　コードの編集をGUIで行う、コンテナに接続するのに使います。
（４）「Docker Desktop for WSL2 backend」
　　　Windows上でWSL2を利用してdockerを扱うために使います。
（５）「gcloud CLI」
　　　GCP上のコンテナイメージを持ってくるために使います。
ローカルのWindows PC上に開発環境を作る ← ★今回の説明
（１）コンテナのイメージをGCPのContainer Registryからpullする
（２）開発のソースコードをGCPのCloud Source Repositoriesからcloneする
（３）VSCodeからコンテナを起動・接続する

Windows PC上で快適に開発する環境を作る！（２／２）

（１）コンテナのイメージをGCPのContainer Registryからpullする

すでにGCPのContainer Registryにはコンテナイメージを格納しています。gcloudで認証をしてからpullコマンドを実行します。

C:\Users\a-yam>gcloud auth login

ブラウザが起動するので、自分のアカウントを選択します。

アクセスを許可します。

「 gcloud auth configure-docker」コマンドでdockerの接続設定をします。

C:\Users\a-yam> gcloud auth configure-docker
WARNING: Your config file at [C:\Users\a-yam\.docker\config.json] contains these credential helper entries:

{
  "credHelpers": {
    "gcr.io": "gcloud",
    "us.gcr.io": "gcloud",
    "eu.gcr.io": "gcloud",
    "asia.gcr.io": "gcloud",
    "staging-k8s.gcr.io": "gcloud",
    "marketplace.gcr.io": "gcloud"
  }
}
Adding credentials for all GCR repositories.
WARNING: A long list of credential helpers may cause delays running 'docker build'. We recommend passing the registry name to configure only the registry you are using.
gcloud credential helpers already registered correctly.

以下のコマンドを実行し、コンテナイメージをpullします。

docker pull gcr.io/<プロジェクトID>/<イメージ名>:<タグ>

なお、「gcr.io」はホストの場所で、gcr.ioとus.gcr.ioは米国、eu.gcr.ioは欧州、asia.gcr.ioはアジアです。プロジェクトIDやイメージ名、タグ名を含む実行コマンドはContainer Registryの該当コンテナから確認できます。

pullが完了したら「docker images」コマンドでコンテナがあることを確認します。

C:\Users\a-yam>docker images
REPOSITORY                                     TAG       IMAGE ID       CREATED          SIZE
gcr.io/<プロジェクトID>/ansible_control            0.4       7050895af9b6   48 minutes ago   921MB

（２）開発のソースコードをGCPのCloud Source Repositoriesからcloneする

今回開発しているのはAnsibleです。dokcer上で開発するためにCloud Source Repositoriesで作成したリポジトリのルートディレクトリには「.devcontainer」フォルダ、中にはVSCodeの設定ファイルである「devcontainer.json」とコンテナを起動するための「Dockerfile」が配置してあります。これをCloud Source Repositoriesからcloneし、Windows PC上に持ってきます。

ansible
    |---  .git
    |___  .devcontainer
    |       |--- devcontainer.json
    |       |___ Dockerfile
    |___ src
          |--- site.yml
          |___ roles
        ・・・
Windows上にフォルダ作成

まずは作業フォルダをWindows PC側に作成します。以下の例ではプロジェクトフォルダ配下にansibleフォルダを作成しています。

C:\Users\ドキュメント\<プロジェクト名>
　　　　　　　　　　　　    |___ ansible
Sourcetreeでclone

今回はSourcetreeからSSH認証で接続します。SSH秘密鍵を管理者から連携してもらい、Sourcetreeへ登録します。

  1. Sourcetreeを起動し、[ ツール ]-[ SSHキーを追加 ] 、鍵を追加します。

  2. [ Clone ] を押し、リモートレポジトリのURL、クローン先のローカルフォルダを入力し [ クローン ] を押します。

  3. Cloud Source Repositories上のファイルが先ほど作成したフォルダ以下にコピーされていたらOKです。

（３）VSCodeからコンテナを起動・接続する

さて、これでようやくコンテナを起動する準備ができました。コンテナの起動やコンテナへの接続はVSCodeから行います。

  1. VSCodeを起動し、左下の [ >< ] で開くメニューから [ Open Folder in Container... ] を選択します。

  2. Windows上に作成したフォルダ（先ほどクローンしてきたところ）を選択します。

  3. ターミナルが起動すればOKです。ターミナルではコンテナ内でのコマンドを実行できます。またエクスプローラでファイルを開けば下図のようにGUIで編集できます。

コマンドプロンプトで「docker ps」コマンドを実行するとコンテナの起動を確認できます。

C:\Users\a-yam>docker ps
CONTAINER ID   IMAGE                                          COMMAND                  CREATED         STATUS         PORTS     NAMES
aa9747567cbe   vsc-ansible-e09327816c40f0381b99e0e6e9e6395b   "/bin/sh -c 'echo Co…"   8 minutes ago   Up 8 minutes             wizardly_mayer

C:\Users\a-yam>

イメージはVSCodeから起動・接続するために新たにvsc-XXXXというものが作成されるようです。

ちなみにコンテナは作業内容をイメージに保存しないと次回起動時には消えてしまうのが仕様ですが、今回Windows上に作成したansibleフォルダをコンテナからマウントし編集しているので、コンテナが停止してもファイルの変更内容は残るところがポイントです。

VSCodeが読み込むdevcontainer.json の内容は以下の通りです。

{
  # 設定を一意に識別する任意の名称
  "name": "ansiblecontrol",
 
  # コンテナを作成するためのDockerfileのファイル名を指定
  # Dockerfileの内容については後述します。
  "dockerFile": "Dockerfile",

  # デフォルトで上書きされる# while sleep 1000; do :; doneを防止
  "overrideCommand": false,

  # ワークスペースのsrcディレクトリを、/home/ansibleuser/ansibleにマウント
  "mounts": [
    "source=${localWorkspaceFolder}/src,target=/home/ansibleuser/ansible,type=bind,consistency=cached"
  ]
}

またDockerfileは以下の通り、Container Regisitryから持ってきたイメージで起動し、ワークディレクトリを指定しているのみです。

FROM gcr.io/<プロジェクトID>/ansible_control:0.4

WORKDIR /home/ansibleuser/ansible

こうしてコンテナ本体とソースコードを分離することであまりコンテナを意識することなく開発を進められる環境を構築できました！

終わりに

少し長い旅路でしたが、この環境さえ構築できれば複数人での開発が楽に進められそうですね！

ここまで読んでいただきありがとうございました～ ^ ^