Help us understand the problem. What is going on with this article?

【Hello Heroku】HerokuでWebアプリ(HTML)を紹介しよう

0.この記事を書いた経緯

 会社の勉強会でWebアプリを作って紹介しよう!となりました。
 しかし会社のセキュリティの都合上、
 自宅で作成したアプリを紹介する手段が乏しいことに気づきました。
 そこで公開方法を調べていくうちにHerokuにたどり着きました。

1.Herokuって何?

 作成したWebアプリを簡単に公開できるサイトです。
 Herokuを理解する上でこの記事がすごく役立ちました!
 ありがとうございます!
 ※Herokuは無料版と有料版があります。今回はHerokuの無料版を利用しています。

2.環境

  • OS windows10 64bit
  • PHP 7.4.9
  • Composer version 1.10.10
  • Heroku

3.前提

 ※以下既に用意されている場合は手順を飛ばしてください。

4.Heroku側でappを作成する

 herokuのアカウントを作成できたらログインします。
 ログインしたら以下の画面が出るので赤枠で囲まれた「Create new app」を押します。
heroku_new_app_paint.png

 「App name」には任意の名前を入力します。ただし英数字小文字でないと怒られます。
 今回は「rensyuwebclc」という名前にします。
 名前を入力したら赤枠で囲まれた「Create app」を押します。
1.PNG

 ここで設定したアプリ名が「 https://<アプリ名>.herokuapp.com 」になるので注意です。
 ダッシュボードに戻ると入力した名前のAppができています。
0.PNG

5.公開するファイルをローカルフォルダに置く

 任意の名前のフォルダを用意します。
 そのフォルダ内に以下4つのファイルを置きます。

  • composer.json
  • index.html
  • index.php
  • Procfile

 以下各ファイルの説明をします。

composer.json

The Heroku PHP Support will be applied to applications only when the application has >a file named in the root directory. Even if an application has no Composer >dependencies, it must include at least an empty () in order to be recognized as a PHP >application.composer.json{}composer.json』

(Heroku Dev Centerから引用)

 要するに「composer.json」がないとHeroku PHPにサポートされないということです。
 実際このファイル無しでアプリをアップロードすると警告が出ます。
 指示に従い「composer.json」という名前でファイルを作成し、中身には「{}」と記述します。

composer.json
{}

index.html
 今回アプリとして公開するhtmlファイルです。

index.php
 今回の肝となるファイルです。
 中身は以下にしてください。

index.php
<?php include_once("htmlファイル名"); ?>

Procfile
 Procfileは起動時にアプリによって実行されるコマンドを指定するファイルです。
 詳しくはこのサイトこのサイトを参考してください。       
 名前は「Procfile」にして下さい。Pは大文字で「.txt」等、拡張子はつけてはいけません。
 中身は以下にしてください。

Procfile
web: vendor/bin/heroku-php-apache2

6.ファイルをHerokuにアップする

 Herokuを再度開き作成したappを開きます。
heroku_new_app9.PNG

 タブの「Deploy」を押します。
3.PNG

 「Deployment method」の「Heroku Git」を押します。
 オレンジ枠で囲った手順に従ってお使いのPCのコマンドプロンプトにコマンドを入力します。
 緑枠の部分は作成したappの名前によってHerokuが自動的に表示します。
 青枠の部分は””で囲って入力してしてください。
2.PNG

コマンドプロンプト
   heroku login
  cd 作成したファイルまでのPath
  git init
   heroku git:remote -a 作成した任意のapp名(今回はrensyuwebclc)
   git add .
   git commit -am “何かしらのコメント”
  git push heroku master

 これは初めてアプリを作成する場合です。

 アプリ作成後は更新した内容を反映させる用にherokuの記述が変わります。
4.PNG

コマンドプロンプト
   heroku login
  heroku git:clone -a 作成した任意のapp名(今回はrensyuwebclc)
   git add .
   git commit -am “何かしらのコメント”
  git push heroku master

 「git add .」の「.」はよく忘れるので忘れないようにします。

 URLが作られるのでコピーしてブラウザで開きます。

5.PNG

7.アプリが表示されない場合

 サイトを開き以下の画面が出たら、phpファイル、htmlファイル名が
 両方とも上記で述べた名前以外になっている可能性があります。
9.PNG

 その場合URLに「/htmlファイルの名前」を付け足します。
7.PNG
これはherokuのデフォルトドキュメントの設定が以下のようになっているためです。

default_include.conf
DirectoryIndex index.php index.html index.htm

phpファイルやhtmlの名前を変えてしまうとデフォルトドキュメントとして呼ばれなくなるので、ファイルが見つからないとして403エラーが出たのです。

8.まとめ

 herokuを使って無事に会社でWebアプリを紹介することができました。
 アップした手順をまとめることで同じような悩みを持つ方の参考になればと思い
 記事を作成しました。
 ご意見ご感想があれば教えていただけたら幸いです。

引用・参考サイト

wiskerpaddy
組込みエンジニアをしています! WEBとかアプリ開発にも興味があります!
https://rensyupython.herokuapp.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away