Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8660

WebサイトをHerokuでデプロイしようとしたら、エラーで躓いた話。

$
0
0

はじめに

制作したWebサイトを取り敢えずHerokuにあげて確認してみたかったのでデプロイしようとしたのですが、
エラーにかなり悩まされたので、同じところで詰まっている方の手助けになれば幸いです。

WebサイトをHerokuでデプロイ

GitHubでコード管理を行っていたので
HerokuとGitHubを連携してHerokuサイトからデプロイしようとしていたところ、

スクリーンショット 2020-03-26 9.49.33.png

上記画像のようなエラーが出てしまいました。

エラーの原因

調べてみたところ、
今回エラーが発生したざっくりとした理由としては
HTMLベースのサイトだとHerokuがアプリとして認識してくれない為でした。

〜〜〜〜〜〜〜〜〜〜〜〜
以下少し詳しく解説します。

まずエラーで何を言われているのかというと、

No default language could be detected for this app.
このアプリではデフォルトの言語を検出できませんでした。

HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
ヒント: これは、Herokuがこのアプリケーションで使用するビルドパックを自動的に検出できない場合に発生します。

とのことです。

ビルドパックは使用するプログラミング言語(PHPやRuby等)に応じて、
実行する前にデプロイされたコードを変換する役割を果たします。
これらのビルドパックは、使用言語に基づいてデプロイされたリポジトリ内で検索されます。
しかし、HTML、CSS、JavaScriptでは検出されません。その為このようなエラーが出たということです。

解決策

index.php
<?phpheader('Location: /index.html');?>

上記画像のように
index.phpファイルを作り、中のコードも同じように記述することで解決しました。
スクリーンショット 2020-03-26 12.03.15.png

↑デプロイ完了後のHeroku画面

〜〜〜〜〜〜〜〜
以下解説します。

今回なぜPHPファイルを作成したのかというと、
WebサイトをPHPアプリとして認識させる為です。

index.phpファイル内の
header関数は、
HTTPヘッダを送信する機能を持っています。

header関数では、
Locationの後ろに
飛び先のファイル名やURLを記述することで
その記述した場所へ移動することが出来ます。

今回はindex.htmlのページに飛ばしたかったので
上記のように記述しました。

まとめ

話をまとめると

今回のエラーの原因は、
HTMLベースのサイトの為アプリ認識してくれなかったこと。
解決策は、
phpファイルを作りアプリ認識してもらえるようにすること。

最後に、
参考にさせていただいたサイトのURLを下記に紹介します。

[Herokuを使って簡単にウェブページをインターネットで公開する方法]
https://qiita.com/reoring/items/bca12aaa5f94b190a488

[単純なHTML/CSS/JSをHerokuにデプロイする時つまずいたこと]
https://qiita.com/hozukikancho/items/b8d475e67a147cd54453

[How to Run a Simple HTML/CSS/Javascript Application on Heroku]
https://medium.com/@winnieliang/how-to-run-a-simple-html-css-javascript-application-on-heroku-4e664c541b0b

[PHPのheader関数でリダイレクト処理を行う方法【初心者向け】]
https://techacademy.jp/magazine/11609

以上です。
最後までご覧くださり、ありがとうございました。


Viewing all articles
Browse latest Browse all 8660

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>