docker-composeとGitを利用したWebシステム開発の効率化

## はじめに
[【コンテナとGitを利用したWebシステム開発の効率化】](https://qiita.com/smiler5617/items/f34382145ec426820710)というタイトルで記事を投稿したが、その後`docker-compose` も試しに使ってみたので、その時の内容をメモとして残しておく。


## 実行環境
【Docker導入環境】
　　・Ubuntu 20.04 LTS（GCP上）
　　・docker 19.03.13
　　・docker-compose 1.25.0

【コンテナ環境】
　　・Image Ubuntu:20.04
　　・Apache 2.4.41 　※バージョン指定をしていないのでインストール時の最新


## 試してみる事
以下の流れで、`docker-compose` を使ってWebサービスの立ち上げ・停止などを試してみる。

１．環境準備
２．Github上にリポジトリを作成
３．ホスト側で用意するファイル
４．`docker-compose` を使った操作確認


## １．環境の準備

**GCP上にVMインスタンスを作成**
　※イメージはUbuntu20.4 LTS

**パッケージ管理ツールのアップデート**

```
$ sudo apt update
```

**gitのインストール**

```shell:
$ sudo apt install -y git
```

**dockerのインストール**
　[【Dockerコンテナ内のUbuntuではsystemctlは使えない】](https://qiita.com/smiler5617/items/2a33d1aba0174480e9d3)の手順１を参考に。

**docker-composeのインストール**

```shell:
$ sudo apt install -y docker-compose 
```

問題なくインストールできているか確認

```shell:
$ docker-compose --version
docker-compose version 1.25.0, build unknown
```

## ２．Github上にリポジトリを作成

Github上で以下を実施する。

**■Public用のリポジトリを作成**　
　※手順３では、Github上のPublicリポジトリからクローンすることを前提としている。

**■作成したリポジトリ内の直下に『App』フォルダを作成**

**■『App』フォルダ内にindex.htmlを作成**
　※中身は適当に記載

**■開発用のブランチを切る**
　※手順３ではブランチ名は `main（本番用）` と `dev（開発用）` を前提としている。

## ３．ホスト側で用意するファイル
**以下のディレクトリ構成でファイルを用意**

./docker-compose.yml
./Dockerfile
./site_config/
　　- demo_site.conf  
./mount/
　　- main/
　　　- Github上の`main`ブランチをクローンする

　　- dev/
　　　- Github上の`dev`ブランチをクローンする




```shell:ディレクトリ作成
#################################################
# サイトコンフィグの設定ファイルを入れるディレクトリ #
#################################################
$ sudo mkdir ./site_config


################################
# マウント用のディレクトリを作成  #
################################
$ sudo mkdir ./mount

# ソースコード格納場所
$ sudo mkdir ./mount/main
$ sudo mkdir ./mount/dev
```

```shell:Github上のソースをクローン
$ sudo git clone --depth 1 -b main https://github.com/Smiler5617/test_websys.git ./mount/main
$ sudo git clone --depth 1 -b dev https://github.com/Smiler5617/test_websys.git ./mount/dev
```

**以下の様に、各ファイルを作成**


```apache:demo_site.conf
<VirtualHost *:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html/App/
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
```


``` dockerfile:Dockerfile
# ベースイメージの取得
FROM ubuntu:20.04

# 必要パッケージのインストール
RUN apt update
RUN apt install -y tzdata
RUN apt install -y apache2

# サイト設定の読み込み
COPY ./site_config/demo_site.conf /etc/apache2/sites-available/
RUN a2dissite 000-default
RUN a2ensite demo_site

# マウント用のディレクトリを作成
RUN mkdir /var/www/html/App

# ポート開放
EXPOSE 80

CMD ["apachectl", "-D", "FOREGROUND"]
```


```yml:docker-compose.yml
version: '3.7'

services:
  web_main:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./mount/main/App:/var/www/html/App
    ports:
      - 8080:80

  web_dev:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./mount/dev/App:/var/www/html/App
    ports:
      - 8081:80
```


## ４．`docker-compose` を使った操作確認

**全サービスの起動**

```shell:
$ docker-compose up
```
　※初回起動時は、ビルドやイメージのダウンロードが自動で開始される。

以下の環境にアクセスできれば、ひとまず起動はできている。
　　`http://[VMの外部IP(グローバルIPアドレス)]:8080/`
　　`http://[VMの外部IP(グローバルIPアドレス)]:8081/`
　

**起動停止**
`Ctrl + C`


**バックグラウンドで実行**

```shell:
$ docker-compose start
Starting web_main ... done
Starting web_dev  ... done
```
　※`$ docker-compose up -d` でもOKだが、ログの確認したいなら`start`がよい。


**停止**

```shell:
$ docker-compose stop
Stopping 【Googleアカウント名】_web_dev_1  ... 
Stopping 【Googleアカウント名】_web_main_1 ... 
```

**指定してサービスの起動や停止も可能**

```shell:
$ docker-compose start web_main
Starting web_main ... done

$ docker-compose stop web_main
Stopping 【Googleアカウント名】_web_main_1 ... 
```


**サービスの停止＆削除**

```shell:
$ docker-compose down
```
　※サービスが削除されると、`start` や `restart`で起動できなくなる。