docker-composeのapacheサーバで404が出る

前提・実現したいこと

docker-composeを使ってapacheサーバに繋いだ上で，ローカルのファイルをブラウザに表示させたいです。

発生している問題・エラーメッセージ

Dockerfileでapacheのイメージをビルドして，docker-compose.ymlでそれを立ち上げる構成にしているのですが，ローカルのプロジェクト内のファイルをChromeで表示させるときに404エラーが出ています。パスはlocalhost:80/public-htmlで指定しています。

Error
1Not Found
2The requested URL was not found on this server.

該当のソースコード

Dockerfile
1FROM httpd:2.4
2COPY ./public-html/ /usr/local/apache2/htdocs/
3

以下はdocker-compose.ymlです。

docker
1services:
2  web:
3    container_name: web
4    build: ./
5    ports:
6      - 80:80
7    privileged: true

2021/02/17 15:25追記
以下に表示されるべきindex.htmlのコードを追記致します。

index.html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="UTF-8" />
6    <title>Vue.js のサンプル</title>
7    <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>
8</head>
9
10<body>
11    <div id="app"></div>
12    <script>
13        // コンソール画面に 3.0.0 と表示されればOK
14        console.log(Vue.version)
15    </script>
16</body>
17
18</html>

###試みた内容
2021/02/20追記
docker-compose exec bashした後にディレクトリ内を探索した内容を追記致します。

補足情報（ディレクトリの構成）

yu_1985

2021/02/16 08:53

単に http://localhost で繋ぐとどうなりますか

EbiTT

2021/02/16 09:01

Apacheでデフォルトで設定されていると思われる，"It works!"とだけ表示されたページが表示されます。

yu_1985

2021/02/16 20:18

再現しませんね…。ディレクトリの中にあるindex.htmlが表示されるとどうなれば正しいですか？ Dockerfileでpublic-htmlの中身を/usr/local/apache2/htdocs/にコピーしているので正常であればコピーしたindex.htmlが見られるはずです。ちなみに Dockerfileの WORKDIR /public-html の部分は以後コマンドを何も実行していないので不要です。またdocker-comose.ymlの - ./public-html:/public-html の部分はコンテナ内のpublic-htmlを使用していないので現状意味はないです。もしそれをするならDockerfileでコンテナ内にpublic-htmlをコピーするのではなく/usr/local/apache2/htdocs/にマウントするといいと思います。

EbiTT

2021/02/17 06:23

index.htmlが表示されると,コンソールにvue.jsのバージョンが表示されれば正常です。 Dockerfileやdocker-compose.ymlへのご指摘ありがとうございます！

yu_1985

2021/02/17 06:54

自分は適当なindex.htmlを使って同様の構成でやったら問題なくできたのですが…。 docker-compose buildでイメージ作り直してから立ち上げるとどうなりますか？

EbiTT

2021/02/17 07:15

`docker-compose down&&docker-compose up -d`するということですか？

yu_1985

2021/02/17 09:27

単に立ち上げ直すのではなく、docker-compose downした後ビルドし直して見てほしいです。 docker-compose build の後 docker-compose up -d または docker-compose up --build -d

yu_1985

2021/02/17 09:33

立ち上げた後に docker-compose exec web bash でコンテナの中に入って想定通りのパスでファイルにアクセスできるか確認してみてください。記載のファイルだとbashを実行した直後`/public-html`を参照していて、そこはボリュームマウントしているのでローカルのファイルと同じものが見られるはずですが、ApacheのDocumentRoot配下ではないパスなので前述の通り意味がありません。ルートディレクトリ直下を指定していますしね。コンテナに入った後 cd /usr/local/apache2/htdocs ls -l cat index.html cat app.js あたりでファイルを確認してみてください。

EbiTT

2021/02/17 14:07

ありがとうございます！出先から戻ったらやります！

EbiTT

2021/02/19 02:03

教えて頂いた通りにしたところ，/usr/local/apache2/htdocsでindex.htmlの内容が正常にコマンドプロンプトに表示されました。

EbiTT

2021/02/19 02:05

1つ気になったのは，docker-compose exec web bashでbashに入った後に，操作するディレクトリがusr/local/apache2になっていたことです。ブラウザ表示する時にはいちいちlocalhost/htdocs(ないしはlocalhost/usr/local/apache2/htdocs)と指定しなければならない？と思いやってみましたが404が出ました

yu_1985

2021/02/19 03:53

> ，docker-compose exec web bashでbashに入った後に，操作するディレクトリがusr/local/apache2になっていたこと記載しているとおりなら/public-htmlになるはずですが、修正したんでしょうか？修正したなら質問に反映してください。それはhttpdの公式dockerイメージのDockerfileでWORKDIRが/usr/local/apache2/になっているだけなので設定とは特に関係ありません。ちなみに、ubuntuのApacheはデフォルトだと/usr/local/apache2/htdocsがDocumentRootなので、単にhttp://localhostと指定すると/usr/local/apache2を参照します。これは設定によって変更ができます。 localhost/htdocsと指定したら、参照されるのは/usr/local/apache2/htdocs/htdocs localhost/usr/local/apache2/htdocsと指定したら、参照されるのは/usr/local/apache2/htdocs/usr/local/apache2/htdocs なので、いずれもそんなディレクトリは存在せず404となるのが正しい挙動です。書いていただいたとおりなら単にlocalhostにアクセスすればそのindex.htmlにアクセスできると思うんですが、結果は変わりないですか？

EbiTT

2021/02/19 15:43

ご回答ありがとうございます！Dockerfileとdocker-compose.yml内の不要なファイルを削除した最新のものを追記致しました。ご指摘ありがとうございます。現在のコードの状態で「docker-compose exec web bashでbashに入った後に，操作するディレクトリがusr/local/apache2になっていた」事象が発生しています。また，localhost,localhost/htdocsのいずれでも404になる事象が継続しております...

yu_1985

2021/02/19 16:17

> 現在のコードの状態で「docker-compose exec web bashでbashに入った後に，操作するディレクトリがusr/local/apache2になっていた」前述の通り「それはhttpdの公式dockerイメージのDockerfileでWORKDIRが/usr/local/apache2/になっているだけなので設定とは特に関係ありません。」 > localhost/htdocs こちらについても記載したとおり、参照するのが/usr/local/apache2/htdocs/htdocsなので、404となるのが正しいです。なのでhttp://localhost にアクセスすればindex.htmlにアクセスはできるはずなのですが…。考えられるとすれば、vue.jsが何かしている可能性ですかね。ざっと調べた感じapacheの設定を追加する必要がありそうです。 https://router.vuejs.org/ja/guide/essentials/history-mode.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B ちなみに http://localhost/index.html とするとどうなりますか？

EbiTT

2021/02/19 16:36

localhost/index.htmlしたら解決しました！apacheへの追加の設定については本質問とは別件となりますのでご回答いただいたyu_1985様に最大限の感謝をここに表明して，本質問をクローズさせて頂きます。数日間にわたり根気強く本当にありがとうございました

行動規範の内容に同意します

回答1件

自己解決

パスをlocalhost/index.htmlとする。
localhostのみでindex.htmlをvueで表示させるにはapache側の設定追加が必要そうである。

2021/02/20追記
Apacheに施した設定変更の内容を追記しました。これでhttp://localhostに単に接続すればindex.htmlが表示されます。

プロジェクトのルートディレクトリに適当なファイル名で(私の場合はmyhtaccessとした)ファイルを作る。
1で作ったファイルに以下の内容をコピペする。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Dockerfileがプロジェクトのルートディレクトリにあることを確認した上で以下の1行を足す
COPY ./myhtaccess /usr/local/apache2/

もしこれでだめな場合はRewriteモジュールが有効になっていない可能性がある。
こちらの記事を参考にしてRewriteモジュールを有効にしておこう。

投稿2021/02/19 16:37

編集2021/02/20 00:59

EbiTT

総合スコア12