本サイトは「GitHub Pages」というGitHubのサービスを利用して作成しております。

リポジトリ名を「[アカウント名].github.io」とすることで作れるのですが、詳しくはこちらの公式サイトをご覧ください。
今回のメインはこの先の話なので。

いちいち Push しないとページが確認できない問題

「[アカウント名].github.io」のリポジトリに作成したデータを Push してサイトを作っていくのですが、これがめちゃくちゃ面倒で。
特に初めて自分でサイトを作ったものだから、どこを触ってどうなるかが分からない場合が多かったんですよね。
その度に Push までしないと画面の状態が確認できないのがとにかく煩わしかった。

Push せずにローカルで逐一画面の状態を確認したいよう！

ということで、以下のやり方でやってみることにしました。

1. 「[アカウント名].github.io」のリポジトリと同一の内容のリポジトリを作成
   →作業用リポジトリとする
2. Docker を利用して Web サーバを立て、作業用リポジトリのデータをブラウザに表示できるようにする

※前提として OS は Windows です。

今回初めて使う Docker について、以下に簡単に説明していきます。

Docker とは？

Docker はコンテナ型の仮想化を実現するプラットフォームの一種です。
コンテナを積んだクジラちゃんのマークがかわいいですね🐳

仮想化というと私はホスト OS の上でゲスト OS を動かすイメージだったのですが（ VirtualBox や VMware Player など）、コンテナ型はこれらのやり方とは違い、ゲストOS を使用せずに"コンテナ"内にアプリケーションを実行する環境を構築するようです。
OS が要らないので負荷が少なく動作が軽い点が大きなメリットです。

コンテナ型の仮想化には Docker が最も多く利用されているので、今回はこちらを使っていきます。

Docker についてお勉強！

今回 Docker を取り入れるにあたって、勉強した用語を以下にご紹介。

• Docker Container
  「Docker Image」「実行環境」「命令の標準セット」の 3つで構成された Image を実行するインスタンス。

• Docker Image
  Dockerfile をもとに作成された、レイヤー状に重なったイメージにより構成されている。 Dockerfile 内の 1つ 1つの命令により、読み込み専用の Image layer が 1層ずつ作成され積み上げられる。（それぞれのレイヤーは直前のレイヤーとの差分） コンテナ内で実行するコマンドのみ、読み書き可能な Container layer に書き込まれ、複数の Image layer の上に最後のレイヤーとして加わる。

• Dockerfile
  Docker Image を作成するためのコマンドが記載されたテキストファイル。 このファイルを置くことで Docker が自動的にファイルを読み込み、イメージを構築する。 （＝コンテナ構築作業を自動化できる）

• Docker Compose
  docker-compose.yml ファイルで定義した複数コンテナを管理・実行するツール。“docker-compose up"または"docker compose up"というコマンド 1つでコンテナを起動させることができる。

Docker インストールで引っかかったこと

私の環境は Windows なので、以下の「Docker Desktop」の「Download for Windows」から Docker をインストールしました。
Get Started with Docker

インストール後に気になったポップアップがあったので記録します。

Docker をインストールして直ぐに『WSL 2 installation is incomplete.』とポップアップが表示されました。

この WSL (Windows Subsystem for Linux)というのは Windows 上で linux を動かす仕組みのことです。
Docker 自体が linux で動作するため、私のような Windows 信者は WSL2 をインストールする必要があります。
ポップアップのリンクよりインストールして再起動しましょう。

Docker で開発環境を作ってみる

ブログのリポジトリを clone して、以下のファイルを追加しました。

• docker-compose.yml
• Dockerfile

コンテナの設定を書いて、

$ docker-compose up

でコンテナ起動！
ブラウザにて “http://localhost:[指定したポート]” で画面確認！

・・・思ったようにできませんでした🙃🙂🙃🙂🙃🙂 ﾅﾝﾃﾞﾀﾞﾖｰ

というのも、Windowsだとこのやり方では commit までしないと画面に反映されなかったんですよね。
「commit したら確認できるくらいで OK！」な方にはこの方法で問題ないと思いますが、私がやりたかったのは『ファイル保存の度に変更が反映される』なのです。

そのためやり方を以下のように変更しました。

1. 仮想マシンを使用し、Windows 上で Linux (Ubuntu) を起動
2. Windows と Ubuntu を SSH 接続
3. 「[アカウント名].github.io」のリポジトリと同一の内容のリポジトリ（作業用）を作成 → Ubuntu に clone
4. git や gh コマンド、Docker を Ubuntu にインストール
5. Docker を利用して Web サーバを立て、作業用リポジトリ（ローカル）のデータをブラウザに表示できるようにする

Windows では動作に不具合があったので、仮想マシンを利用して OS を Linux に変更しております。
この結果無事に希望の環境となったので紹介したいのですが、ページが長くなってしまったので次回のブログに記録します。

ではまた 🚲💨