無料でテスト用のサイトをインターネットで公開する方法を紹介します。今回はHerokuというサイトを使って公開します。
herokuとは、「高機能なレンタルサーバ」です。詳しい説明は技術的に難しくなってしまうため本記事では割愛します。
Herokuに静的サイトをデプロイする手順を説明します。テスト用のサイトなので、Herokuの無料枠だけで使えます。
準備
- Herokuにアカウントを作る
- heroku toolbelt（herokuを操作するコマンド）をインストールする
heroku toolbeltのインストール
前提: homebrewを事前にインストールしておく
brew install heroku
正常にインストールが完了していれば、 heroku コマンドが使えるようになっているはずです、 コンソールから heroku コマンドを実行してみましょう。
herokuにログインする
heroku login
ローカルにコンテンツを作る
mkdir mysite
cd mysite
index.phpを作る
touch index.php
<?php
header('Location: /index.html');
?>
index.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コマンドを使って最初のコンテンツをコミットしておきます。
git init
git add .
git commit -m "最初のコミット"
init は、イニット と読みます。これは初期化という意味である、initialization を省略したものです。まだgitで管理されていないディレクトリをgitの管理化に置くために初期化するという意味です。
次にherokuにアプリを作成します。my-site の部分は、自分の好きな名称に変えておきましょう。他人がもう使っている名前を指定するとエラーになるので重複しないように注意してください。エラーになったら、別の名前を試してみましょう。
heroku apps:create my-site
これでherokuにアプリが作られました、git remote -v コマンドを実行してURLがふたつ表示されていれば成功です。
そうしたらherokuにデプロイします。herokuへのデプロイはgit pushで行います。デプロイは、deployment といって 配置や、配備という意味です。
git push heroku master
成功したら、下記の様なURLでアクセスできます。
どうでしょう? ウェブブラウザで表示できたら成功です!
コンテンツの更新
デプロイができたら、コンテンツをもっと良くしたいですね。index.htmlを編集したらその変更をherokuに配置する必要があります。
git add index.html
git commit -m "良い変更"
git push heroku master
これを実行すると変更した内容が反映されているはずです。
サイトに認証を追加する
テスト用のサイトでは、他人に見られたくないと思います。こういうときはPHPでBASIC認証を要求するようにします。BASIC認証はセキュリティ的に安全ではありませんが、簡単に見られるということはないのでテスト用サイトに使うには十分です。
index.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');
このスクリプトの中身はちょっと複雑なことをやっているので、今の時点では気にしないでくださいね。
$AUTH_USER = 'admin';
$AUTH_PASS = 'admin';
この二行は自分の好きなユーザ名とパスワードに変更してみましょう。もちろん変更しないこともできます😌
修正したらいつもの様にgitでコミットしてherokuにデプロイします。
git add index.php
git commit -m "認証を追加したよ"
git push heroku master
そしてURLにアクセスすると認証ダイアログが表示されますので、ここに上記PHPに書いたユーザ名とパスワードを入力します。どうでしょう? 認証ダイアログが表示されたら成功です!
CSSの追加
サンプルのindex.htmlには、
<link rel="stylesheet" href="style.css">
という外部スタイルシートを読み込む指定がありました。
この指定は、style.css を読み込んでいます。が、まだそのファイルがありません。style.css を追加してデプロイしてみましょう。
* {
color: red;
}
いつもの手順でデプロイしてみましょう。
JavaScriptの追加
CSSと同様に、script.js も読み込んでいますが、そのファイルはありません。追加してみましょう。
alert('ようこそ');
この内容でデプロイして表示してみましょう。
html,css,javascriptはサーバに繋がなくてもブラウザだけで確認することができます。ローカルで見るときは、
open index.html
このコマンドを実行します。もちろんfinderから直接ファイルを開いても同じことができます。