Herokuを使って簡単にウェブページをインターネットで公開する方法

無料でテスト用のサイトをインターネットで公開する方法を紹介します。今回はHerokuというサイトを使って公開します。

herokuとは、「高機能なレンタルサーバ」です。詳しい説明は技術的に難しくなってしまうため本記事では割愛します。

Herokuに静的サイトをデプロイする手順を説明します。テスト用のサイトなので、Herokuの無料枠だけで使えます。

## 準備

* Herokuにアカウントを作る
* heroku toolbelt（herokuを操作するコマンド）をインストールする

## heroku toolbeltのインストール

前提: homebrewを事前にインストールしておく

```sh
brew install heroku
```

正常にインストールが完了していれば、 `heroku` コマンドが使えるようになっているはずです、 コンソールから `heroku` コマンドを実行してみましょう。

## herokuにログインする

```sh
heroku login
```

## ローカルにコンテンツを作る

```sh
mkdir mysite
cd mysite
```

## index.phpを作る

```sh
touch index.php
```

```php
<?php

header('Location: /index.html');

?>
```

## index.htmlを作る


```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>私のサイト</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    私のサイト
  </body>
</html>
```


## herokuに登録する

まずは`git`コマンドを使って最初のコンテンツをコミットしておきます。

```sh
git init
git add .
git commit -m "最初のコミット"
```

`init` は、`イニット` と読みます。これは初期化という意味である、`initialization` を省略したものです。まだgitで管理されていないディレクトリをgitの管理化に置くために初期化するという意味です。

次にherokuにアプリを作成します。`my-site` の部分は、自分の好きな名称に変えておきましょう。他人がもう使っている名前を指定するとエラーになるので重複しないように注意してください。エラーになったら、別の名前を試してみましょう。

```sh
heroku apps:create my-site
```

これでherokuにアプリが作られました、`git remote -v` コマンドを実行してURLがふたつ表示されていれば成功です。

そうしたらherokuにデプロイします。herokuへのデプロイは`git push`で行います。デプロイは、`deployment` といって `配置`や、`配備`という意味です。

```sh
git push heroku master
```

成功したら、下記の様なURLでアクセスできます。

https://my-site2.herokuapp.com/

どうでしょう? ウェブブラウザで表示できたら成功です!

## コンテンツの更新

デプロイができたら、コンテンツをもっと良くしたいですね。index.htmlを編集したらその変更をherokuに配置する必要があります。

```sh
git add index.html
git commit -m "良い変更"
git push heroku master
```

これを実行すると変更した内容が反映されているはずです。


## サイトに認証を追加する

テスト用のサイトでは、他人に見られたくないと思います。こういうときはPHPでBASIC認証を要求するようにします。BASIC認証はセキュリティ的に安全ではありませんが、簡単に見られるということはないのでテスト用サイトに使うには十分です。

`index.php`を下記の様に修正します。

```php
<?php

function require_auth() {
	$AUTH_USER = 'admin';
	$AUTH_PASS = 'admin';
    
	header('Cache-Control: no-cache, must-revalidate, max-age=0');
	$has_supplied_credentials = !(empty($_SERVER['PHP_AUTH_USER']) && empty($_SERVER['PHP_AUTH_PW']));
	$is_not_authenticated = (
		!$has_supplied_credentials ||
		$_SERVER['PHP_AUTH_USER'] != $AUTH_USER ||
		$_SERVER['PHP_AUTH_PW']   != $AUTH_PASS
	);
	if ($is_not_authenticated) {
		header('HTTP/1.1 401 Authorization Required');
		header('WWW-Authenticate: Basic realm="Access denied"');
		exit;
	}
}

require_auth();

header('Location: /index.html');
```

このスクリプトの中身はちょっと複雑なことをやっているので、今の時点では気にしないでくださいね。

```php
$AUTH_USER = 'admin';
$AUTH_PASS = 'admin';
```

この二行は自分の好きなユーザ名とパスワードに変更してみましょう。もちろん変更しないこともできます😌

修正したらいつもの様にgitでコミットしてherokuにデプロイします。

```sh
git add index.php
git commit -m "認証を追加したよ"
git push heroku master
```

そしてURLにアクセスすると認証ダイアログが表示されますので、ここに上記PHPに書いたユーザ名とパスワードを入力します。どうでしょう? 認証ダイアログが表示されたら成功です!

## CSSの追加

サンプルの`index.html`には、

```html
<link rel="stylesheet" href="style.css">
```

という外部スタイルシートを読み込む指定がありました。

この指定は、`style.css` を読み込んでいます。が、まだそのファイルがありません。`style.css` を追加してデプロイしてみましょう。


```css:style.css
* {
  color: red;
}
```

いつもの手順でデプロイしてみましょう。

## JavaScriptの追加

CSSと同様に、`script.js` も読み込んでいますが、そのファイルはありません。追加してみましょう。

```javascript
alert('ようこそ');
```

この内容でデプロイして表示してみましょう。

html,css,javascriptはサーバに繋がなくてもブラウザだけで確認することができます。ローカルで見るときは、

```sh
open index.html
```

このコマンドを実行します。もちろんfinderから直接ファイルを開いても同じことができます。