Angular on Docker環境を、GitHubで管理したい。

0. Introduction

AngularもDockerも触った事がなかったので、触ってみる事にした。
ついでに、GitHubで管理するようにした。

1. Docker Engineのインストール

以下の公式サイトの通り、DockerEngineをインストールする。

• 以下のリンクはUbuntuの手順。環境によって手順は異なるので、自身の環境に応じて変更。
  • https://docs.docker.com/engine/install/ubuntu/

以下、公式からコマンドのみコピペしたもの。(Ubuntu)

sh

# Uninstall old versions
$ sudo apt-get remove docker docker-engine docker.io containerd runc


# Installation methods

## Set up the repository
$ sudo apt-get update
$ sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
$ sudo mkdir -p /etc/apt/keyrings
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
$ echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

## Install Docker Engine
$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin
$ sudo docker run hello-world

2. Docker Desktopのインストール

Docker Composeを使用したいため、以下の公式サイトの通り、DockerDesktopをインストールする。

• Docker Composeは、Docker Desktopに内包されているので、Docker DesktopをインストールすればOK
• 以下のリンクはUbuntu。環境によって手順は異なる。
  • https://docs.docker.com/desktop/install/ubuntu/

以下、公式からコマンドのみコピペしたもの。(Ubuntu)

• コマンドを実行する前に、最新のPackageを取得しておく。（Ubuntuの場合はDEB Package）
  • https://docs.docker.com/desktop/release-notes/

sh

# Prerequisites
$ sudo apt install gnome-terminal
$ sudo apt remove docker-desktop


# Install Docker Desktop
$ sudo apt-get update
$ sudo apt-get install ./docker-desktop-<version>-<arch>.deb    # ダウンロードしたDEB Packageはここで使う

3. Docker+Angularの構成ファイルを作成

適当なディレクトリに構成ファイル群を作成。

sh

# 作業ディレクトリの確認（どこでもいいです）
$ pwd
/home/your-account-name/

# アプリのルートディレクトリの作成
$ mkdir sample-angular-on-docker
$ cd sample-angular-on-docker

# 構成ファイル群を作成
$ touch README.md            # Git管理したいので、とりあえず作成
$ touch docker-compose.yml   # Docker Composeで環境構築していく（3.2章参照）
$ mkdir app/                 # Angularのファイル群が格納される（5章参照）
$ mkdir doc/                 # Markdown（Mermaid記法）の設計書を入れていきたい（今回は不使用）
$ mkdir env/                 # Dockerfile群を格納
$ mkdir env/node             # Angularを稼働させるため、nodeのDockerfileを管理
$ touch env/node/Dockerfile  # Angularを稼働させるため、nodeのDockerfile（3.1章参照）

3.1. Dockerfileの作成

vimなどを使って、./env/node/Dockerfileを作成。

./env/node/Dockerfile

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

3.2. docker-compose.ymlの作成

vimなどを使って、./docker-compose.ymlを作成。

./docker-compose.yml

version: "3"
services:
  node:
    build: ./env/node
    ports:
      - "4200:4200"
    volumes:
      - ".:/projects"
    tty: true

4. Dockerコンテナの起動

3章の時点で構成ファイルは完成したので、以下のコマンドでDockerコンテナを起動。

sh

# `-d`を付ける事で、バックグラウンドで実行
$ sudo docker compose up -d

4.1 コンテナ一覧、イメージ一覧の確認

起動しているコンテナ一覧と、作成済みのイメージ一覧を確認したい場合は、以下のコマンドを実行。

sh

# 起動しているコンテナ一覧を表示
$ sudo docker ps
CONTAINER ID   IMAGE                           COMMAND                  CREATED          STATUS          PORTS                                       NAMES
60ff460a2f75   sample-angular-on-docker-node   "docker-entrypoint.s…"   49 minutes ago   Up 33 minutes   0.0.0.0:4200->4200/tcp, :::4200->4200/tcp   sample-angular-on-docker-node-1

# 作成済みのイメージ一覧を表示
$ sudo docker images
REPOSITORY                      TAG       IMAGE ID       CREATED             SIZE
sample-angular-on-docker-node   latest    16e654b2053b   About an hour ago   1.05GB

4.2 コンテナの停止、イメージの削除

起動しているコンテナの停止と、作成済みのイメージの削除をしたい場合は、以下のコマンドを実行。

sh

# 起動しているコンテナの停止（60ff460a2f75 = `docker ps`で得たコンテナID）
$ sudo docker stop 60ff460a2f75

# 作成済みのイメージ一覧を表示（16e654b2053b = `docker images`で得たイメージID）
$ sudo docker rmi -f 16e654b2053b

5. Angularプロジェクトの作成

起動しているコンテナに入って、Angularプロジェクトを作成する。

sh

# 以下のコマンドでDockerコンテナに入る
$ sudo docker compose exec node bash


# ここから先はDockerコンテナ内での操作（Dockerコンテナから出るには`exit`を実行）
root@60ff460a2f75:/projects# pwd
/projects

root@60ff460a2f75:/projects# ls -la
total 28
drwxr-xr-x 6 root root 4096 Oct 31 07:15 .
drwxr-xr-x 1 root root 4096 Oct 31 06:56 ..
-rw-r--r-- 1 root root    0 Oct 31 06:05 README.md
drwxr-xr-x 6 root root 4096 Oct 31 07:14 app
drwxr-xr-x 2 root root 4096 Oct 31 06:05 doc
-rw-r--r-- 1 root root  134 Oct 31 06:55 docker-compose.yml
drwxr-xr-x 3 root root 4096 Oct 31 06:54 env

# Angularアプリの作成（カレントディレクトリのapp配下に作成。Git管理はapp配下ではなくホームディレクトリで行いたいので、ここではスキップ。）
root@60ff460a2f75:/projects# ng new app --skip-git

# Angularアプリの実行確認
root@60ff460a2f75:/projects# cd app
root@60ff460a2f75:/projects/app# ng serve --host 0.0.0.0

以下にアクセスし、以下のページが表示されればOK。

• http://localhost:4200/

Angularアプリの実行確認ができたら、exitでDockerコンテナから出ておく

sh

# Angularアプリの実行確認ができたら、`exit`でDockerコンテナから出ておく
root@60ff460a2f75:/projects/app# exit
exit

# Dockerコンテナから出た事を確認
$ pwd
/home/your-account-name/sample-angular-on-docker

6. Git管理

Angular on Dockerの環境が完成したので、GitHubで管理していく。

6.1. リポジトリの作成

以下の公式に基づいてリポジトリを作成。

• https://docs.github.com/ja/get-started/quickstart/create-a-repo
• リポジトリ名は、以下としている（好きにしていいです）
  • sample-angular-on-docker

6.2. first commit

リポジトリを作成したら「こうやってfirst commitしてね」という手順が出てくるので、その通りにコミットする。

sh

# Git管理対象ディレクトリ
$ pwd
/home/your-account-name/sample-angular-on-docker

# 公式に基づいてfitst commit
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin [e-mail]:your-account-name/sample-angular-on-docker.git  # 6.1章にて自身で付けたリポジトリ名を指定
$ git push -u origin main

7. 終わり :-)

これでDockerEngineとDockerDesktopさえ入ってればどこでも動くようになった。

7.1. 今後やりたい事

• フロントエンドはAngularで、バックエンドはPython(Django)やRuby(Rails)にしてみたい
• MySQLとかNginxとかを共存させるにはどうしたらいいか試したい
• 複数コンテナを立ち上げて、コンテナ間通信をしてみたい

参考サイト

• https://qiita.com/A-Kira/items/8693a78873ca9cab0738
• https://qiita.com/PRONakahira/items/f507d0f912974d1b8c58