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

関連する記事

  • R ggplotに回帰直線の式を表示する方法R ggplotに回帰直線の式を表示する方法 R言語のggplotにおいて、グラフに回帰直線の式を表示する方法をお伝えします。 ggplotのグラフに回帰直線の式を表示する方法はいくつかあります。 ここでは最も簡単と思われるggpmiscパッケージを用いて回帰直線の式を表示する方法をお伝えします。 環境 今回の作業環境をsessionInfo()関数で確認しておきます。 > […]
  • 基本統計量基本統計量 [latexpage] 基本統計量とは、データの基本的な特徴を表す値のことで、代表値と散布度に区分できる。代表値とは、データを代表するような値のことで、例えば、平均値、最大値、最小値などがある。散布度とは、データの散らばり度合いを表すような値のことで、例えば、分散、標準偏差などがある。 平均値 […]
  • 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: Analysis of Spatial Dataの英語での説明文をGoogle翻訳を使用させていただき機械的に翻訳したものを掲載しました。 Maintainer: Roger Bivand Contact: Roger.Bivand at […]
  • 決定木 – 回帰木決定木 – 回帰木 ここでは、決定木の目的変数が連続値である場合の回帰木について、R言語の「rpart」パッケージを用いて簡単に見ていく。 まずは必要となるパッケージのインストールとロードを行う。「rpart」パッケージは決定木を行うためのものだが、「rpart.plot」と「partykit」パッケージは結果を視覚的に表示するために使うので、あらかじめインストールとロードをしておく。 […]
DockerとVS Code Remote ContainersでAngularの開発環境を構築する方法