はじめに

私は、HTML/CSS/JavaScriptで作成したチェスゲームをDockerで実行することに挑戦いたしました。

本記事では、私が実際に遭遇した問題とその解決過程を記録として残し、同じような状況でお困りの方にとって参考となる情報をお伝えできればと思います。

最終的な構成

まず結論から申し上げますと、以下のファイル構成で正常に動作させることができました。

ディレクトリ構成

C:/dev/chess/
├── index.html       # アプリケーション本体
├── Dockerfile       # コンテナの構成定義
└── docker-compose.yml # 実行時設定

Dockerfile

# 軽量なNginxをベースイメージとして使用
FROM nginx:1.25-alpine

# アプリケーションファイルをNginxの配信ディレクトリにコピー
COPY index.html /usr/share/nginx/html

# ポート80を公開
EXPOSE 80

docker-compose.yml

services:
  web:
    build: .
    ports:
      - "8080:80"

今回使用した技術（Nginx）について

Dockerfileの中で登場する Nginx (エンジンエックス) とは、軽量で高速な「Webサーバー」ソフトウェアです。

今回のプロジェクトでは、**「作成したindex.htmlをブラウザからのリクエストに応じて渡してくれる受付係」**のような役割を担っています。Dockerコンテナの中でこのNginxを動かすことで、私たちのPCがWebサーバーとして機能し、チェスゲームをブラウザに表示できるようになります。

遭遇した問題とその解決過程

課題1：設定ファイルが見つからない

初回実行時にdocker-compose upコマンドを実行した際、以下のエラーメッセージが表示されました。

no configuration file provided: not found

原因：docker-compose.ymlファイルが存在するディレクトリでコマンドを実行していませんでした。

解決方法：設定ファイルが配置されているディレクトリに移動してから、コマンドを実行するようにいたしました。

学んだこと：Docker Composeコマンドは、設定ファイルが存在する場所で実行する必要があります。

課題2：プロジェクト名の認識エラー

設定ファイルを正しく配置した後、次のエラーが発生いたしました。

project name must not be empty

原因：プロジェクトのディレクトリ名を日本語の「チェスゲーム」としていたため、Dockerが適切にプロジェクト名を認識できませんでした。

解決方法：ディレクトリ名を半角英数字のchessに変更いたしました。

学んだこと：Dockerプロジェクトのディレクトリ名やファイル名には、日本語を含むマルチバイト文字を使用せず、半角英数字を使用することが推奨されます。

課題3：ファイルが見つからない（OneDrive同期の問題）

すべてのファイルが同一ディレクトリに存在することを確認したにもかかわらず、このエラーが発生しました。これが最も解決に時間を要した問題でした。

failed to solve: invalid file request index.html

ファイルエクスプローラーで確認すると、確かにファイルは存在しているように見えました。

原因：プロジェクトディレクトリをOneDriveの同期フォルダ内に配置していたことが根本的な原因でした。

WindowsのOneDriveには「Files On-Demand」（ファイルオンデマンド）機能があり、使用頻度の低いファイルはクラウド上にのみ保存され、ローカルPCには参照用のリンクのみが残されます。見た目上はファイルが存在するように表示されますが、実際のファイル実体は存在しないため、Dockerからアクセスできない状態となっていました。

解決方法：プロジェクトディレクトリをOneDriveとは関連のない場所（C:\dev\）に移動いたしました。

学んだこと：Dockerプロジェクトは、OneDriveやDropboxなどのクラウド同期サービスのフォルダ外で管理することが重要です。

成功への道のり

プロジェクトをC:\dev\chessに移動し、改めてコマンドを実行したところ、ついに成功メッセージが表示されました。

[+] Running 2/2
 ✔ Container chess-web-1  Started

ブラウザでhttp://localhost:8080にアクセスすると、作成したチェスゲームが正常に表示され、目標を達成することができました。

まとめ

HTMLファイル一つをDockerで動作させるという作業でしたが、環境設定において多くの学びを得ることができました。

主な学習ポイント

Docker Composeコマンドは設定ファイルが存在するディレクトリで実行する
ディレクトリやファイル名には半角英数字を使用する
最重要：プロジェクトはクラウド同期フォルダの外に配置する

この記録が、同様にDockerの学習過程でお困りの方にとって、少しでもお役に立てれば幸いです。

本記事は個人的な学習記録として作成しており、より良い方法や追加の情報がございましたら、ぜひお教えいただけますと幸いです。