@@ -1,172 +1,171 @@
**0.この記事を書いた経緯**
------------------------------
会社の勉強会でWebアプリを作って紹介しよう！となりました。
しかし会社のセキュリティの都合上、
自宅で作成したアプリを紹介する手段が乏しいことに気づきました。
そこで公開方法を調べていくうちにHerokuにたどり着きました。
**1.Herokuって何？**
------------------------
作成したWebアプリを簡単に公開できるサイトです。
Herokuを理解する上で[この記事](https://qiita.com/opengl-8080/items/9dc9243c4e68cd0674f8)がすごく役立ちました！
ありがとうございます！
※Herokuは無料版と有料版があります。今回はHerokuの無料版を利用しています。
**2.環境**
----------
* OS windows10 64bit
* PHP 7.4.9
* Composer version 1.10.10
* Heroku
**3.前提**
----------
※以下既に用意されている場合は手順を飛ばしてください。
* 公開したいhtmlファイルの作成
* [Herokuアカウントの作成](https://jp.heroku.com)
* [Heroku CLI ツールのインストール](https://devcenter.heroku.com/articles/heroku-cli)
* [PHPのインストール]( https://www.javadrive.jp/php/install/index1.html)
* [Composerのインストール]( https://weblabo.oscasierra.net/php-composer-windows-install/)
**4.Heroku側でappを作成する**
-------------------------------------
herokuのアカウントを作成できたらログインします。
ログインしたら以下の画面が出るので赤枠で囲まれた「Create new app」を押します。
「App name」には任意の名前を入力します。ただし英数字小文字でないと怒られます。
今回は「rensyuwebclc」という名前にします。
名前を入力したら赤枠で囲まれた「Create app」を押します。
ここで設定したアプリ名が「 https://<アプリ名>.herokuapp.com 」になるので注意です。
ダッシュボードに戻ると入力した名前のAppができています。
**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]( https://devcenter.heroku.com/articles/php-support)から引用)
要するに「composer.json」がないとHeroku PHPにサポートされないということです。
実際このファイル無しでアプリをアップロードすると警告が出ます。
指示に従い「composer.json」という名前でファイルを作成し、中身には「{}」と記述します。
~~~:composer.json
{}
~~~
***index.html***
今回アプリとして公開するhtmlファイルです。
***index.php***
今回の肝となるファイルです。
中身は以下にしてください。
~~~PHP:index.php
<?php include_once("htmlファイル名"); ?>
~~~
***Procfile***
Procfileは起動時にアプリによって実行されるコマンドを指定するファイルです。
- あくまで「Procfile」です。いかなる拡張子もつけてはいけません。
詳しくは[このサイト]( https://devcenter.heroku.com/articles/procfile)と[このサイト]( https://devcenter.heroku.com/articles/custom-php-settings
)を参考してください。
名前は「Procfile」にして下さい。Pは大文字で「.txt」等、拡張子はつけてはいけません。
中身は以下にしてください。
~~~:Procfile
web: vendor/bin/heroku-php-apache2
~~~
**6.ファイルをHerokuにアップする**
--------------------------------------------------
Herokuを再度開き作成したappを開きます。
タブの「Deploy」を押します。
「Deployment method」の「Heroku Git」を押します。
オレンジ枠で囲った手順に従ってお使いのPCのコマンドプロンプトにコマンドを入力します。
緑枠の部分は作成したappの名前によってHerokuが自動的に表示します。
青枠の部分は””で囲って入力してしてください。
~~~:コマンドプロンプト
heroku login
cd 作成したファイルまでのPath
git init
heroku git:remote -a 作成した任意のapp名(今回はrensyuwebclc)
git add .
git commit -am “何かしらのコメント”
git push heroku master
~~~
これは初めてアプリを作成する場合です。
アプリ作成後は更新した内容を反映させる用にherokuの記述が変わります。
~~~:コマンドプロンプト
heroku login
heroku git:clone -a 作成した任意のapp名(今回はrensyuwebclc)
git add .
git commit -am “何かしらのコメント”
git push heroku master
~~~
「git add .」の「.」はよく忘れるので忘れないようにします。
URLが作られるのでコピーしてブラウザで開きます。
以下はこの記事の著者がherokuを使って公開したアプリのURLです。
https://rensyuwebclc.herokuapp.com/
人によって作成したURLは異なるので注意して下さい。あくまで例です。
**7.アプリが表示されない場合**
--------------------------------------------------
サイトを開き以下の画面が出たら、phpファイル、htmlファイル名が
両方とも上記で述べた名前以外になっている可能性があります。
その場合URLに「/htmlファイルの名前」を付け足します。
これはherokuのデフォルトドキュメントの設定が以下のようになっているためです。
~~~:default_include.conf
DirectoryIndex index.php index.html index.htm
~~~
phpファイルやhtmlの名前を変えてしまうとデフォルトドキュメントとして呼ばれなくなるので、ファイルが見つからないとして403エラーが出たのです。
**8.まとめ**
-----------
herokuを使って無事に会社でWebアプリを紹介することができました。
アップした手順をまとめることで同じような悩みを持つ方の参考になればと思い
記事を作成しました。
ご意見ご感想があれば教えていただけたら幸いです。
***引用・参考サイト***
---------------
* [Heroku使い方メモ（Java）]( https://qiita.com/opengl-8080/items/9dc9243c4e68cd0674f8)
* [Heroku Dev Center ](https://devcenter.heroku.com/articles/)
* [Let’sプログラミング 初心者の方でも分かりやすいサイト](https://www.javadrive.jp/php/install/index1.html)
* [WEB ARCH LABO](https://weblabo.oscasierra.net/php-composer-windows-install/)
* [heroku-buildpack-php](https://github.com/heroku/heroku-buildpack-php/blob/master/conf/apache2/default_include.conf)