HTMLとJavaScriptで作ったサイトがHerokuにデプロイできねええって時の対処法

#近況報告

エンジニア転職成功しました。YouTubeでエンジニア転職したい方向けに情報発信しています。

HTML/JavaScriptで用いて作ってる勉強用のページを
Herokuにデプロイする時失敗しましたが、簡単に解決できたのでその対処法を書きます。

##git push heroku masterでデプロイ失敗・・・

PS C:\Users\***\Desktop\***> git push heroku master
Enumerating objects: 372, done.
Counting objects: 100% (372/372), done.
Delta compression using up to 8 threads
Compressing objects: 100% (344/344), done.
Writing objects: 100% (372/372), 230.52 KiB | 2.59 MiB/s, done.
Total 372 (delta 111), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/nodejs.tgz
remote:
remote:  !     ERROR: Application not supported by 'heroku/nodejs' buildpack
remote:  !
remote:  !     The 'heroku/nodejs' buildpack is set on this application, but was
remote:  !     unable to detect a Node.js codebase.
remote:  !
remote:  !     A Node.js app on Heroku requires a 'package.json' at the root of
remote:  !     the directory structure.
remote:  !
remote:  !     If you are trying to deploy a Node.js application, ensure that this
remote:  !     file is present at the top level directory. This directory has the
remote:  !     following files:
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/nodejs-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 ***
remote:
To https://git.heroku.com/***.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/***/

めっちゃ長いけど、heroku側でbuildpackをnodejsに設定してる場合、package.jsonファイルが必要なんだとか。

要はアプリとして認識されてないってことね。

で、実際に作って再度デプロイするもapplication Errorに。。。
これはハマりそう・・・。

簡単に解決にできないかなーと思ったら、こんな投稿を発見。

単純なHTML/CSS/JSをHerokuにデプロイする時つまずいたこと

なるほど、ルートディレクトリにpackage.jsonとindex.phpを作って、index.phpでindex.htmlをrequire_onceすればいいのね。
（要はphpアプリとしてデプロイするってこと）

##解決方法

index.htmlと同じ階層に以下の二つのファイルを作成

index.php

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

package.json

{}

commitして、再度git push heroku master

PS /***> git push heroku master
remote:        https://***.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/***.git

デプロイ成功！

##アプリじゃないけどデプロイしちゃう

herokuはサーバー周り設定要らずで簡単にWebページを無料で公開できるのでかなりお勧めです。