141
147

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-03-17

無料でテスト用のサイトをインターネットで公開する方法を紹介します。今回は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 を追加してデプロイしてみましょう。

style.css
* {
  color: red;
}

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

JavaScriptの追加

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

alert('ようこそ');

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

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

open index.html

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

141
147
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
141
147

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?