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

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


# 1. Docker Engineのインストール

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

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


<details><summary>以下、公式からコマンドのみコピペしたもの。(Ubuntu)</summary><div>

```sh: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
```

</div></details>


# 2. Docker Desktopのインストール

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

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


<details><summary>以下、公式からコマンドのみコピペしたもの。(Ubuntu)</summary><div>

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

```sh: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はここで使う
```

</div></details>


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

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

```sh: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`を作成。

```docker:./env/node/Dockerfile
FROM    node
WORKDIR /projects
RUN     npm install -g @angular/cli
EXPOSE  4200
```


## 3.2. docker-compose.ymlの作成

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

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


# 4. Dockerコンテナの起動

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

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

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

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

```sh: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:sh
# 起動しているコンテナの停止（60ff460a2f75 = `docker ps`で得たコンテナID）
$ sudo docker stop 60ff460a2f75

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


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

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

```sh: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/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142821/8f313444-8d53-d8e5-14a4-8423ef8bacdf.png)

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

```sh: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: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 git@github.com: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