Docker × Angular環境簡単構築
概要
Dockerを利用して、Angularの実行環境を簡単に作成していきます。
環境
- macOS Catalina 10.15.1
- Docker version 19.03.5
- docker-compose version 1.24.1
構成
今回は以下のような構成になります。
.
├── docker
│ └── node
│ └── Dockerfile
├── docker-compose.yml
└── server
└── angular-app
構築
1. docker-compose.yml作成
今回はシンプルにangularの実行環境を用意することが目的なため、コンテナはnodeのみでOK!
docker-compose.yml
version: '3'
services:
node:
build: ./docker/node
ports:
- "4200:4200"
volumes:
- "./server:/projects"
tty: true
2. Dockerfile作成
nodeイメージの最新を取得し、npmを利用してangularをインストールします。
FROM node
WORKDIR /projects
RUN npm install @angular-devkit/build-angular
RUN npm install -g @angular/cli
EXPOSE 4200
3. dockerの起動&ビルド
// ビルド&バックグラウンドで起動
$ docker-compose up -d
// 確認
$ docker-compose ps
# 以下のようになっていればOK!
Name Command State Ports
---------------------------------------------------------------------------
angular_node_1 docker-entrypoint.sh node Up 0.0.0.0:4200->4200/tcp
4. Angularアプリの作成 or 引き継ぐ場合
ng new {プロジェクト名}をコンテナ内で実行！
// コンテナにインスペクション
$ docker-compose exec node bash
// コンテナ内でAngularアプリ作成
root@8dfd8ec7933f:/projects# ng new angular-app
// 引き継ぐ場合(gitで共有された場合など)
root@8dfd8ec7933f:/projects# npm install
5. Angularアプリを起動
コンテナ内でAngularアプリを起動します。
// 作成したAngularアプリ直下に移動
root@8dfd8ec7933f:/projects# cd /projects/angular-app
// Angularアプリの起動
root@8dfd8ec7933f:/projects/angular-app# ng serve --host 0.0.0.0
※ package.jsonがないディレクトリでアプリ起動コマンドを実行すると以下のエラーが出ます。
The serve command requires to be run in an Angular project, but a project definition could not be found.
確認
下記のURLにアクセスしてみましょう！
http://localhost:4200/
以下の画像のような画面が表示されたら成功です。
