Angular開発環境を VS Code Remote Containers でDocker に作成

VS Code の拡張機能の Remote Containers は、Docker の仮想環境上に必要なSDKやツールをインストールし開発が行い、ローカルを汚さないため人気があります。

この記事では、Angular の開発環境を Remote Containers を使って、Docker の仮想環境上に構築する方法を解説します。

スポンサーリンク

前提

前提として VSCode（Visual Studio Code）と Docker はインストールされている前提です。

VSCode のダウンロードはこちら
Visual Studio Code

Docker のインストール方法はこちら
Docker for Macをインストール

この記事では、macOS の画面キャプチャで解説しますが、Windows でも手順は同じ（はず）です。

Remote Containers 拡張機能

VSCode に Remote Containers 拡張機能 をインストールします。

拡張機能のメニューを開き、検索窓に「Remote Containers」と入力し、検索トップに出てきた拡張機能をインストールします。

Dockerfile、docker-compose.yml の準備

新規にディレクトリを作成し、そこに以下のファイルを作成します。

Dockerfile

Dockerfileは、node コンテナをベースに、 angular/cli をインストールします。

以下の内容でファイルを作成し、Dockerfile という名前で保存します。

FROM node
RUN npm install -g @angular/cli
WORKDIR /angular
EXPOSE 4200

docker-compose.yml

docker-compose.yml を作成し、以下の内容を保存します。

Angular がデフォルトで使用するポートの 4200 を開放し、ローカルと仮想コンテナ共有するディレクトリを volumes で定義します。

version: '3'

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

上記に合わせて project フォルダをローカルに作成します。

スポンサーリンク

コンテナの起動

準備ができたら、Remote Containers で仮想コンテナを起動し、コンテナ上の VSCode を開きます。

左下の緑のアイコンをクリックし、コマンドパレットから「Reopen in Container」を選択します。

次に利用する Docker 設定を尋ねられるので、docker-compose.yml を選択します。

初回はイメージのダウンロードで時間がかかります。しばらく待ち、左下の緑のエリアが次のような表示となったら、コンテナ環境で VSCode が開いたことになります。

Angular新規プロジェクトの作成

コンテナ環境で、Angular の新しいプロジェクトを作成します。

ターミナルを開き、次のコマンドを入力して Angular のプロジェクトを作成します。今回は「sample」という名前で新規に Angular のプロジェクトを作成します。

cd /project
ng new sample

sample ディレクトリ内にファイルが作成されます。

実行

プロジェクトを作成した、sample ディレクトリに移動し、npm run startと入力して、開発用のサーバーを起動します。

cd sample
npm run start

起動したらブラウザで http://127.0.0.0:4200 を開き、次のスタート画面が表示されれば成功です。

スポンサーリンク

まとめ

Remote Containers を使って、コンテナ上でAngular 開発環境を作る方法を解説してきました。

NPM で大量にインストールされるツールやライブラリを、すべてコンテナ内の仮想環境にインストールでき、使い終わったらコンテナごと削除すれば、綺麗サッパリ環境を消去できるので非常に便利です。