Herokuのデプロイで「ERROR: Application not supported by this buildpack!」が出た時に読む記事

はじめに

HTML、CSSを使用してポートフォリオを作成し、herokuにデプロイする時に詰まりました。
かなり時間を取られてしまったので、同じエラーが出た人の助けになればと思います。

対象

• Herokuにpushしたが、エラーが出た人
• ポートフォリオサイトをHerokuに初めてデプロイする人
  （今回は、HTML、CSSで構成）
• railsではHerokuにデプロイ経験がある（私もそうでした）

結論

以下のファイルを追加することで、解決しました！
①「composer.json」を追加する
②「index.php」を追加する

//ディレクトリ構造

//当初のファイル
├── index.html
├── style.css

// + 追加ファイル
├── index.php       
└── composer.json   

記事の内容

1.エラーの確認
2.エラーの分析
3.追加するファイル(index.php / composer.json)

1.エラーの確認

①エラーに遭遇した手順

# HTML,CSSでサイトを作成

# 作成したサイトをGithubにプッシュ
git add .
git commit -m
git push origin master    

# herokuにプッシュ
git push heroku master     　　　　# エラー発生！!

②エラー内容

【ERROR: Application not supported by this buildpack!】

>> git push heroku master

# 略

remote: -----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/php.tgz
remote:
remote:  !     ERROR: Application not supported by this buildpack!
remote:  !
remote:  !     The 'heroku/php' buildpack is set on this application, but was
remote:  !     unable to detect a PHP codebase.
remote:  !
remote:  !     A PHP app on Heroku requires a 'composer.json' at the root of
remote:  !     the directory structure, or an 'index.php' for legacy behavior.
remote:  !
remote:  !     If you are trying to deploy a PHP application, ensure that one
remote:  !     of these files is present at the top level directory.
remote:  !
remote:  !     If you are trying to deploy an application written in another
remote:  !     language, you need to change the list of buildpacks set on your
remote:  !     Heroku app using the 'heroku buildpacks' command.
remote:  !
remote:  !     For more information, refer to the following documentation:
remote:  !     https://devcenter.heroku.com/articles/buildpacks
remote:  !     https://devcenter.heroku.com/articles/php-support#activation
remote:
remote:
remote:        More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !	Push rejected to heroku-app.
remote:
To https://git.heroku.com/heroku-app.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/heroku-app.git'

# 　略

！がたくさん出てきてrejectされてしまいます・・。
まずはエラーを分析してみました。

2.エラーの分析

とりあえずdeepLで翻訳をかけると、犯人らしきファイルが見つかりました！

remote:  !     A PHP app on Heroku requires a 'composer.json' at the root of
           #=>  Heroku上のPHPアプリでは、'composer.json'を

remote:  !     the directory structure, or an 'index.php' for legacy behavior.
           #=> ディレクトリ構造、またはレガシーな動作のための 'index.php' を指定します。

"composer.json"　"index.php"という聞いたことがないファイル名が！
ググった結果、以下のファイルを追加する必要があることが判明しました！

① 「composer.json」の追加
② 「index.php」の追加

3.ファイルを追加する

①「composer.json」の追加

composer.json

{}  #=> 中身はこれだけでよい

②「index.php」の追加

index.php

<?php include_once("index.html"); ?>

③再度Herokuにpushする

>> git push heroku master

Enumerating objects: 11, done.
Counting objects: 100% (11/11), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 785 bytes | 785.00 KiB/s, done.
Total 7 (delta 5), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> PHP app detected
remote: -----> Bootstrapping...
remote: -----> Installing platform packages...
remote:        NOTICE: No runtime required in composer.lock; using PHP ^7.0.0
remote:        - php (7.4.11)
remote:        - apache (2.4.46)
remote:        - nginx (1.18.0)
remote: -----> Installing dependencies...
remote:        Composer version 1.10.13 2020-09-09 11:46:34
remote: -----> Preparing runtime environment...
remote:        NOTICE: No Procfile, using 'web: heroku-php-apache2'.
remote: -----> Checking for additional extensions to install...
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote:
remote: -----> Compressing...
remote:        Done: 14.2M
remote: -----> Launching...
remote:        Released v5
remote:        https://heroku-app.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/heroku-app.git
   a535e8c..114a9fc  master -> master

無事デプロイすることができました！

まとめ

railsからHerokuへデプロイしたことがある方だと、
今回の追加ファイルを作成する記載はないので、
もしかしたらつまづいてしまうのではないでしょうか

エラー文を調べ、キーワードを元に調べるとすぐに参考サイトにたどり着き、
「エラー文を読む事の重要性」を改めて感じました。
同じエラーに当たった方の参考になれば幸いです。

参考サイト

この記事は以下のサイトの情報を参考にしました。

• [Herokuを使ってHTMLのwebサイトを公開する方法を現役エンジニアが解説【初心者向け】]
  (https://techacademy.jp/magazine/33817)
• [静的サイト（HTML/CSSのみ）をherokuでデプロイする方法]
  (https://qiita.com/kodaii/items/ef2b04dd69a3ec7873d4)