8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-16

概要

本記事では、Hugo(静的サイトジェネレーター) を Docker で動かすための仮想環境を作る手順についてまとめる

環境

VSCodeのインストール
参考:VSCodeでDocker入門

全体像

Docker で仮想環境を作成するためには、docker-compose.yml の作成が必須。このファイルに、利用するイメージ(仮想環境を作る素材)や詳細な設定を記載する必要がある。Docker Hub は Docker のイメージ置き場のこと。
スクリーンショット 2020-10-06 17.11.13.png

手順

利用可能な image を探す(仮想環境(コンテナ)つくる材料)

Docker で環境構築する際に、すでに利用することができる image がないか調べる

Hugo の公式サイト で、Docker と調べると、公式が推奨する image があったので、以下を利用する。
スクリーンショット 2020-09-15 15.24.17.png
https://hub.docker.com/r/klakegg/hugo/

docker-compose.yml を作成

klakegg/hugo に記載されている以下のサンプルを元に docker-compose.yml を作成する
スクリーンショット 2020-09-15 15.31.22.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

それぞれのタグについて

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

仮想環境の構築コマンドを実行

Docker が起動していることを確認して、以下のコマンドを実行

docker-compose up -d

スクリーンショット 2020-09-15 16.52.57.png
コンテナの作成完了! [Attach Shell] をクリックし、作成したコンテナに入る
スクリーンショット 2020-09-15 17.33.48.png
「hugo version」 と入力し、hugo のバージョンが返って来れば OK
スクリーンショット 2020-09-15 17.34.10.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

image の中身について [Tags] で検索し、確認

スクリーンショット 2020-09-15 16.35.44.png

Hugo 0.74.3 では、ENTRYPOINT で hugo が呼び出されている。
スクリーンショット_2020-09-15_16_35_27.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
デフォルトのBusyBoxタグ では bash コマンドが使えない
そのため、bashコマンドが利用できるklakegg/hugo:0.74.3-ubuntuを採用

参考

docker-compose.ymlの書き方について解説してみた
Docker Hub の概要
Compose ファイル リファレンス

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?