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」を選択すれば作業開始となります。

関連する記事

  • Ubuntu 日本語構文・格・照応解析システムKNPをpythonから使えるようにするUbuntu 日本語構文・格・照応解析システムKNPをpythonから使えるようにする Ubuntu14.04で日本語構文・格・照応解析システムKNPをpythonから使えるようにする方法をお伝えする。 Python2系 まずはKNP - KUROHASHI-KAWAHARA […]
  • R スミルノフ・グラブス検定を繰り返し用いて外れ値を除去する方法 スミルノフ・グラブス検定は、正規分布を仮定した標本において、最大値または最小値が外れ値かどうか判定する検定の一つである。 外れ値を除去する際、外れ値を一つずつ検証することよりも、外れ値がすべて除去されたデータだけがほしいときもあるのではないだろうか。 ここでは、正規分布を仮定したデータからスミルノフ・グラブス検定を繰り返し用いて外れ値を除去するソースコードをご紹介する […]
  • 平均的に分類する方法の考察(3)平均的に分類する方法の考察(3) 前回は、定量データをスコア順に並び替えたのち、この順番でグループに割り振っていく方法を見た。今回は、定量データをスコア順に並び替えるところは同じだが、割り振り方を変更することにより、より平均的に分類できないかを見ていく。 前回と同じく、100人の学生を3つのクラスA、B、Cに分ける方法を考えてみる。 まず、学生をスコア順にA、B、Cに一人ずつ割り振る。 次に […]
  • UbuntuでGENEONTOLOGYのgo.oboをjson形式に変換する方法UbuntuでGENEONTOLOGYのgo.oboをjson形式に変換する方法 title: UbuntuでGENEONTOLOGYのgo.oboをjson形式に変換する方法 url: how-to-convert-geneontology-obo-to-json-on-ubuntu GENEONTOLOGYのgo.oboをjson形式に変換する方法をお伝えします。 環境 今回の環境を確認しておきます。 $ cat […]
  • これだけは抑えておきたい収益性分析の基本これだけは抑えておきたい収益性分析の基本 収益性分析とは、主に損益起算書上の数値から収益獲得力や投資効率性を測定する分析である。企業が継続的発展を遂げるためには利益確保が欠かせないが、企業経営は好調のときもあれば不調のときもあるため、様々な観点から収益または利益の状況を把握する必要がある。 ここでは、収益性分析の代表的な指標をいくつか紹介する。 これらの代表的な指標を活用するに当たっては、業種によってかなり異 […]
DockerとVS Code Remote ContainersでAngularの開発環境を構築する方法