DockerとVS Code、VS Codeに拡張機能Remote Containersを用いてAngularの開発環境を構築する方法をお伝えします。

DockerおよびDocker Compose、VS Code、VS Codeの拡張機能Remote Containersは既に導入済みとさせていただきます。
ホストOSがUbuntuの場合、次の注意点がありますので予め対応しておいてください。

  • dockerグループにローカルユーザーを追加しておく
  • Dockerはsnap以外の方法でインストールしておく

環境

今回、検証した環境は次になります。

ホストOS

ホストOSはUbuntu20.04を用いております。


$ cat /etc/lsb-release 

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04.1 LTS"

Docker

DockerはUbuntu標準リポジトリからaptでインストールしたものを用いております。


$ docker version

Client:
 Version:           19.03.8
 API version:       1.40
 Go version:        go1.13.8
 Git commit:        afacb8b7f0
 Built:             Tue Jun 23 22:26:12 2020
 OS/Arch:           linux/amd64
 Experimental:      false

Server:
 Engine:
  Version:          19.03.8
  API version:      1.40 (minimum version 1.12)
  Go version:       go1.13.8
  Git commit:       afacb8b7f0
  Built:            Thu Jun 18 08:26:54 2020
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.3.3-0ubuntu2
  GitCommit:        
 runc:
  Version:          spec: 1.0.1-dev
  GitCommit:        
 docker-init:
  Version:          0.18.0
  GitCommit:

Docker Compose

Docker ComposeはUbuntu標準リポジトリからaptでインストールしたものを用いております。


$ docker-compose version

docker-compose version 1.25.0, build unknown
docker-py version: 4.1.0
CPython version: 3.8.5
OpenSSL version: OpenSSL 1.1.1f  31 Mar 2020

VS Code

VS Codeはsnapを用いてインストールしたものを用いております。


$ code -v

1.50.1
d2e414d9e4239a252d1ab117bd7067f125afd80a
x64

VS Code: Remote-Containers

VS Codeの拡張機能Remote-Containersはバージョン0.145.0を用いております。

構成

ファイルおよびディレクトリは次のような構成にします。


.
├── projects
│   └── sample
├── Dockerfile
└── docker-compose.yml

構築

作業はすべてVS Code上で行います。

作業用ディレクトリの指定

メニューバー「File」から「Open Folder…」を選択し、作業するディレクトリを指定します。

Dockerfileの作成

メニューバー「File」から「New File」を選択します。

次の内容を記載します。


FROM node

RUN npm install -g @angular/cli

WORKDIR /projects

EXPOSE 4200

メニューバー「File」から「Save As…」を選択し、ファイル名を「Dockerfile」として保存します。

docker-compose.ymlの作成

メニューバー「File」から「New File」を選択します。

次の内容を記載します。


version: '3'

services:
  node:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - "./projects:/projects"
volumes:
	projects:

メニューバー「File」から「Save As…」を選択し、ファイル名を「docker-compose.yml」として保存します。

永続用ディレクトリの作成

次の箇所をクリックしてディレクトリ「projects」を作成します。

Docker Composeの実行

VS Code左下の箇所をクリックします。

「Remonote-Containers: Open Folder in Container…」を選択し、作業を行っているディレクトリを指定します。

今回は、docker-compose.ymlを起点にしたいので、「From ‘docker-compose.yml’」を選択します。

準備ができるまで少し待ちます。

VS Codeの左下の箇所が「Dev Container: Existing Docker Compse …」となっていることを確認します。

Angularの新規導入

VS codeのTERMINALから次のコマンドによりカレントディレクトリを移動します。


$ cd /projects/

次のコマンドによりAngularのサンプルを導入します。


$ ng new sample

projectsディレクトリに新規にファイルが追加されているか確認します。

VS codeのTERMINALから新たに作成したAngularの「sample」ディレクトリに移動し、実行します。


$ cd /projects/sample/
$ ng serve

右下に通知が出てくるので、「Open in Browser」を選択します。

Angularが動いたことが確認できます。

VS Codeでコンテナ内のファイルを操作

「Remote explorer」をクリックします。

今回のDockerfile等から作成されたコンテナを右クリックし、「Attach to Container」をクリックします。
新しいウィンドウで開く場合は「Attach in New Window」を選択してください。

コンテナのディレクトリが表示されます。

メニューバーの「Open Folder」から今回の作業ディレクトリ「/projects/sample」を選択すれば作業開始となります。

DockerとVS Code Remote ContainersでAngularの開発環境を構築する方法