[Docker] Hugo を利用するための環境構築

## 概要
本記事では、[Hugo](https://gohugo.io/)（静的サイトジェネレーター）  を Docker で動かすための仮想環境を作る手順についてまとめる

## 環境
VSCodeのインストール
参考：[VSCodeでDocker入門](https://qiita.com/Teach/items/ca09b8882f519dca600c)


## 全体像
Docker で仮想環境を作成するためには、`docker-compose.yml` の作成が必須。このファイルに、利用するイメージ（仮想環境を作る素材）や詳細な設定を記載する必要がある。Docker Hub は Docker のイメージ置き場のこと。
![スクリーンショット 2020-10-06 17.11.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/f80e7ec6-66ca-949e-f55a-8817fd3a7713.png)




## 手順
### 利用可能な image を探す（仮想環境（コンテナ）つくる材料）
Docker で環境構築する際に、すでに利用することができる image がないか調べる

[Hugo の公式サイト](https://gohugo.io/getting-started/installing/) で、Docker と調べると、公式が推奨する image があったので、以下を利用する。
![スクリーンショット 2020-09-15 15.24.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/b8872acd-3984-25bc-8337-5831464d9848.png)
https://hub.docker.com/r/klakegg/hugo/


### `docker-compose.yml` を作成
[klakegg/hugo](https://hub.docker.com/r/klakegg/hugo/) に記載されている以下のサンプルを元に `docker-compose.yml` を作成する 
![スクリーンショット 2020-09-15 15.31.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/5b02941d-8156-8e19-86dc-b6bbb1b9cd5e.png)

本記事では、仮想環境の中で「hugo」のコマンドをたたくことを目標とするので、以下のように記述した
image の選定理由については下部に示す

```docker-compose.yml
version: '3'
services: 
    hugo:
        image: klakegg/hugo:0.74.3-ubuntu
        volumes:
            - ".:/src"
        entrypoint: bash
        ports:
            - "1313:1313"
        tty: true
        working_dir: /src
```
それぞれのタグについて

```.yml:docker-compose.yml
version: '3' # 最新版は'3'　
services: # 固定
    servicename: # 任意のサービスの名前をつける
        image: イメージ名: タグ名　 # Docker Hub から利用する image を指定
        volumes:
            - ローカルのフォルダのパス:コンテナのフォルダのパス #ローカルと仮想マシンのフォルダの紐付け
        entrypoint: 処理　 # entrypoint: デフォルトの entrypoint の上書きしたいときに記載
        ports: # 「hugo server」を実行したいため
            - "ホスト側：コンテナ側"
        tty: true　　　　  # Attach Shell でコンテナに入る時は必須
        working_dir: コンテナのフォルダパス  #コンテナ内のワーキングディレクトリ
```
#### port について補足
「hugo server」 を使うことで、hugo で作成した画面を確認することができる
そこで、デフォルトでは port 1313 を利用するが、コンテナ側で起動した server をローカルから利用するために は、ローカルとコンテナのポートを繋げる必要がある
![スクリーンショット 2020-09-16 11.00.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/95e46c08-289f-05d9-238e-3a07eb52df98.png)




### 仮想環境の構築コマンドを実行
Docker が起動していることを確認して、以下のコマンドを実行

```
docker-compose up -d
```

![スクリーンショット 2020-09-15 16.52.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/d5004000-e3bd-30ea-ae3f-bd22eeade86c.png)
コンテナの作成完了！ [Attach Shell] をクリックし、作成したコンテナに入る
![スクリーンショット 2020-09-15 17.33.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/99c7005d-36b6-a8a9-c2bb-9d52ddf9655b.png)
「hugo version」 と入力し、hugo のバージョンが返って来れば OK 
![スクリーンショット 2020-09-15 17.34.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/457eb7f0-48ab-5019-c6dc-bb5287eb6a0e.png)


## (備考) image を`klakegg/hugo:0.74.3-ubuntu`にした理由
当初は、[Default minimal image based upon **Busybox**:] にある [Hugo 0.74.3: 0.74.3] の利用を検討していたが、「bash」コマンドが使えなかった。そのため、このコマンドが利用できる [hugo:0.74.3-ubuntu]を採用した。以下に変更までの経緯を示す

### Docker hub でタグの確認
![スクリーンショット_2020-09-15_16_32_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/cf9d22c5-7e10-f60d-bb23-bd1ae129c82e.png)

### image の中身について [Tags] で検索し、確認
![スクリーンショット 2020-09-15 16.35.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/b309b08f-d84c-5c8c-adc5-2a030cae4640.png)

Hugo 0.74.3 では、ENTRYPOINT で hugo が呼び出されている。
![スクリーンショット_2020-09-15_16_35_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/dfabc739-2f9a-4c25-9a52-0d64e36827b1.png)
「hugo」コマンドの実行は起動時ではなく、任意のタイミングで行いたい

### docker-compose.yml の修正
`entrypoint: bash`と書くことで image の entrypoint を上書きし、起動時に何もしないようにする。

```docker-compose.yml
version: '3'
services: 
    hugo:
        image: klakegg/hugo:0.74.3
        volumes:
            - ".:/src"
        entrypoint: bash
        ports:
            - "1313:1313"
        tty: true
        working_dir: /src
```

### 仮想環境の構築
仮想環境の構築コマンドを実行する。docker-compose.yml のフォルダで以下のコマンドを実行
```
docker-compose up -d
```

エラーが発生し、コンテナが作成できない。

![スクリーンショット 2020-09-15 16.51.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/be265f60-267c-2f95-f20f-e1aaf4c419dc.png)
デフォルトの`BusyBox`タグ では `bash` コマンドが使えない
そのため、`bash`コマンドが利用できる`klakegg/hugo:0.74.3-ubuntu`を採用


# 参考
[docker-compose.ymlの書き方について解説してみた](https://qiita.com/yuta-ushijima/items/d3d98177e1b28f736f04)
[Docker Hub の概要](https://docs.docker.jp/docker-hub/overview.html)
[Compose ファイル リファレンス](https://docs.docker.jp/compose/compose-file.html)