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で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 […]
  • カイ二乗検定 – 適合度検定カイ二乗検定 – 適合度検定 適合度検定とは、観測度数分布が期待度数分布と同じかどうかを統計的に確かめる方法である。 適合度検定を行う手順は次の通りである。 仮説を立てる。 帰無仮説 H0:観測度数分布と期待度数分布が同じ。 対立仮説 […]
  • R言語 CRAN Task View:グラフィックディスプレイ&動的なグラフィックス&グラフィックデバイス&可視化R言語 CRAN Task View:グラフィックディスプレイ&動的なグラフィックス&グラフィックデバイス&可視化 CRAN Task View: Graphic Displays & Dynamic Graphics & Graphic Devices & Visualizationの英語での説明文をGoogle翻訳を使用させていただき機械的に翻訳したものを掲載した。 Maintainer: Nicholas […]
  • R言語 CRAN Task View:再現性のある研究R言語 CRAN Task View:再現性のある研究 CRAN Task View: Reproducible Researchの英語での説明文をGoogle翻訳を使用させていただき機械的に翻訳したものを掲載しました。 Maintainer: John Blischak, Alison Hill Contact: jdblischak at […]
  • R スティール(Steel)法R スティール(Steel)法 スティール(Steel)法とは、ダネット(Dunnett)法の多重比較に対応するノンパラメトリックな多重比較である。 スティール法を簡単に言うと、正規分布を仮定しない1つの対照群と2つ以上の処理群間を順位を用いて多重比較で調べる方法である。 Rで、スティール法を使う場合は、「スティール(Steel)の方法による多重比較」のページにソースコードが紹介されている。 […]
DockerとVS Code Remote ContainersでAngularの開発環境を構築する方法