Cloud9で作成したWEBサイトをHerokuで公開する手順

<img width="955" alt="cloud9-heroku-logo.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/4728a68f-a0ed-5909-6cf6-7d2ca5c75ce5.png">

# はじめに
Cloud9のHTML5テンプレートを利用して、WEBサイトをHerokuで公開する手順について解説します。

![cloud9-heroku-01.png](https://qiita-image-store.s3.amazonaws.com/0/141934/86f680a9-d993-1afb-a5ba-2d37a23fe517.png)
　
Herokuへのデプロイには`Heroku Git`を利用します。

![cloud9-heroku-04.png](https://qiita-image-store.s3.amazonaws.com/0/141934/91e518ae-f69d-bfeb-7339-28abc451f416.png)

# 参考サイト
[How to deploy a static website to Heroku](https://gist.github.com/wh1tney/2ad13aa5fbdd83f6a489)

# 準備
- Herokuのアカウントを作成しておく
- Cloud9でHTMLテンプレートを選択してワークスペースを作成しておく
- Cloud9のターミナルを表示しておく

![cloud9-heroku-02.png](https://qiita-image-store.s3.amazonaws.com/0/141934/0ed8553b-f0b4-0d14-284c-288c2f77bd84.png)

> 補足：
> 操作できるターミナルがない場合は＋ > New Terminalで新しいターミナルタブを用意できます。
> ![cloud9-heroku-03.png](https://qiita-image-store.s3.amazonaws.com/0/141934/c04578d2-e0ae-d8ea-7a65-47166f23d434.png)

# ローカルリポジトリの準備

Heroku Gitを利用したデプロイが実行できるようにGitコマンドでローカルリポジトリ　を作成して、デプロイするファイル一式をコミットしておきます。

```
# 初期化
$ git init

# ディレクトリ配下のファイルをコミット対象にする
$ git add *

# コミット
$ git commit -m "Herokuにリリースするファイル一式をコミット"
```

# Heroku

## ログイン

`heroku login`コマンドを実行して、事前に用意しておいたherokuアカウントを利用した操作が実施できるようにします。

```shell-session
$ heroku login

Enter your Heroku credentials:
Email: xxxxx@gmail.com
Password: ********
Logged in as xxxxx@gmail.com
```

## アプリ作成

`heroku create <アプリ名>`コマンドを実行して、Herokuアプリを作成します。

<アプリ名>は省略可能です。省略するとアプリ名が自動で割り当てられます。
アプリが作成されるとHerokuアプリのWeb URL,Git URLが出力されます。

```shell-session
$ heroku create <アプリ名>
Creating ⬢ xxxxx-xxxxx-xxxxx... done
https://xxxxx-xxxxx-xxxxx.herokuapp.com/ | https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
```

> 補足：
> `https://xxxxx-xxxxx-xxxxx.herokuapp.com/`はWeb URLです。
> ブラウザなどでこのURLにアクセスすることでデプロイしたアプリを表示することができるようになります。
>
> `https://git.heroku.com/xxxxx-xxxxx-xxxxx.git`はGIt URLです。
> Gitコマンドを利用してこのURLへソースコードをPushすることでデプロイを実行することができるようになります。

作成したHerokuアプリの情報は`heroku info`コマンドでも参照可能です。

```shell-session
$ heroku info
=== cloud9-heroku
Auto Cert Mgmt: false
Dynos:          
Git URL:        https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
Owner:          xxxxx@gmail.com
Region:         us
Repo Size:      0 B
Slug Size:      0 B
Stack:          heroku-xx
Web URL:        https://xxxxx-xxxxx-xxxxx.herokuapp.com/
```

## リモートリポジトリの確認

Git初期化(`git init`)済みのローカルリポジトリで`heroku create`コマンドを実行すると、リモートリポジトリ`heroku`としてGit URLが自動で登録されます。

```shell-session
$ git remote -v
heroku  https://git.heroku.com/xxxxx-xxxxx-xxxxx.git (fetch)
heroku  https://git.heroku.com/xxxxx-xxxxx-xxxxx.git (push)
```

Git初期化(`git init`)が未実施だった場合は`git remote add`コマンドを実行してGit URLをリモートリポジトリherokuとして登録する必要があります。


```shell-session
# Git初期化
$ git init

# ディレクトリ配下のファイルをすべてコミット
$ git add *
$ git commit -m "first commit"

# Git URLをリモートリポジトリherokuとして登録
$ git remote add heroku https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
```

# デプロイ

Git URLにPush(`git push heroku master`コマンド)を実行することでデプロイを実行することができます。

## 失敗するケース

Cloud9のHTMLテンプレートにはデフォルトでhtmlファイルとmdファイルが含まれてます。

![cloud9-heroku-05.png](https://qiita-image-store.s3.amazonaws.com/0/141934/302ad084-5c86-03b6-334e-2d31cfd75475.png)

この状態でGit URLにPushを実施しても「このアプリで使われてるデフォルトの言語が検出できなかったよ」と言われてデプロイに失敗します。

```shell-session
$ git push heroku master
Counting objects: 4, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 1.34 KiB | 1.34 MiB/s, done.
Total 4 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote:  !     No default language could be detected for this app.
remote:                         HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote:                         See https://devcenter.heroku.com/articles/buildpacks
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to cloud9-heroku.
remote: 
To https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/xxxxx-xxxxx-xxxxx.git'
```

# index.phpを追加してデプロイ

htmlファイルとmdファイルだけではHerokuが言語を検出できないため、`index.php`を追加します。
こうすることでHerokuがPHP環境として検出してくれるようになります。

```shell-session
$ touch index.php

$ git add index.php
$ git commit -m 'index.phpを追加'
[master 18af38e] Add index.php
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 index.php
```

![cloud9-heroku-06.png](https://qiita-image-store.s3.amazonaws.com/0/141934/9e2150de-1a65-36de-144e-24a44d4886b1.png)

この状態でGit URLにPushを実施するとPHPの環境が構築されてデプロイに成功します。

```shell-session
$ git push heroku master
Counting objects: 7, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (7/7), 1.56 KiB | 1.56 MiB/s, done.
Total 7 (delta 1), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> PHP app detected
remote: 
remote:  !     WARNING: No 'composer.json' found.
remote:        Using 'index.php' to declare app type as PHP is considered legacy
remote:        functionality and may lead to unexpected behavior.
remote: 
remote: -----> Bootstrapping...
remote: -----> Installing platform packages...
remote:        NOTICE: No runtime required in composer.lock; using PHP ^5.5.17
remote:        - nginx (1.8.1)
remote:        - php (5.6.32)
remote:        - apache (2.4.29)
remote: -----> Installing dependencies...
remote:        Composer version 1.5.2 2017-09-11 16:59:25
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: 13.8M
remote: -----> Launching...
remote:        Released v3
remote:        https://xxxxx-xxxxx-xxxxx.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
 * [new branch]      master -> master
```

デプロイ成功後にブラウザで`Web URL/hello-world.html`
例：https://xxxxx-xxxxx-xxxxx.herokuapp.com/hello-world.html
にアクセスすることでHTMLが表示されるようになります。

![cloud9-heroku-11.png](https://qiita-image-store.s3.amazonaws.com/0/141934/abefed36-f9a1-d31c-223b-a24e72109828.png)

この時点で`Web URL`
例：https://xxxxx-xxxxx-xxxxx.herokuapp.com/
にアクセスしてもHTMLは表示されず、白い画面が表示されます。

![cloud9-heroku-10.png](https://qiita-image-store.s3.amazonaws.com/0/141934/48d763a8-07fc-0b3c-2545-5644b7bb3b49.png)

> 補足：
> ローカル環境などブラウザが利用できる環境では`heroku open`コマンドを実行することで自動でブラウザが起動してWeb URLにアクセスしてくれます。

## `index.php`を修正してデプロイ

`Web URL`へアクセスした時に`hello-world.html`が表示されるようにするためには`index.php`を以下のように修正します。

```php:index.php
<?php include_once("hello-world.html"); ?>
```

![cloud9-heroku-09.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d6ee154a-55e5-60cb-742b-d9bf5e85b198.png)

index.phpを修正した後にGit URLへPushすると`Web URL`へアクセスした時に`hello-world.html`が表示されるようになります。

```shell-session
$ git commit -am 'index.phpを修正'
$ git push heroku master
```

例：https://xxxxx-xxxxx-xxxxx.herokuapp.com/

![cloud9-heroku-11.png](https://qiita-image-store.s3.amazonaws.com/0/141934/abefed36-f9a1-d31c-223b-a24e72109828.png)