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

関連する記事

  • これだけは抑えておきたい安全性分析の基本これだけは抑えておきたい安全性分析の基本 安全性分析とは、主に貸借対照表上の数値から支払能力を測定する分析である。企業が倒産する主な原因は資金不足によって起こるため、様々な観点から資金の状況を把握する必要がある。 ここでは、安全性分析の代表的な指標をいくつか紹介する。 流動比率 流動比率とは、1年以内に資金化できる流動資産と1年以内に返済しなければならない流動負債との比率から支払能力をみる指標である。 […]
  • Ubuntu TensorFlowのGPU版をpipでインスールする手順Ubuntu TensorFlowのGPU版をpipでインスールする手順 Ubuntu上で、TensorFlowのGPU版をpipでインストールする手順をお伝えする。 TensorFlowのバージョン0.6.0からPython3が使えるようになったので、Python3を用いることにする。 ここに記載されていることの大部分は、TensorFlowのDownload and […]
  • RStudioのGlobal Optionsの各種設定RStudioのGlobal Optionsの各種設定 RStudioのGlobal Optionsにどのような内容が記載されているかをお伝えいたします。 RStudioのGlobal Optionsは、メニューバーからToolsを選択して、表示されたポップアップ内にあります。 目次 General: 一般 Code: コード Editing: 編集 Display: 表示 […]
  • TensorFlow チュートリアルDeep MNIST for Expertsを試してみるTensorFlow チュートリアルDeep MNIST for Expertsを試してみる TensorFlowのチュートリアルDeep MNIST for Expertsを試してみる。 import tensorflow as tf import input_data # MNISTデータを取得 mnist = input_data.read_data_sets("MNIST_data/", one_hot=True) # […]
  • R言語 CRAN Task View:機械学習&統計学習R言語 CRAN Task View:機械学習&統計学習 CRAN Task View: Machine Learning & Statistical Learningの英語での説明文をGoogle翻訳を使用させていただき機械的に翻訳したものを掲載しました。 Maintainer: Torsten Hothorn Contact: Torsten.Hothorn at […]
DockerとVS Code Remote ContainersでAngularの開発環境を構築する方法