たったの10分！Basic認証つきの静的サイトを「Heroku」にアップしよう！ ｜ SiTest (サイテスト) ブログ

Webエンジニアをしていると、検証用環境を立てて、仕事をすることが増えてきますよね。

特に静的サイトだと検証用環境をたてるのがめんどくさくてそのまま本番にアップしてしまうかたもいらっしゃるのではないでしょうか？

それで、本番でバグを見つけたりするのは怖いですよね。

そんなときに役立つのが、簡単かつ無料に使える「Heroku(ヘロク)」です。
Herokuに静的サイトをアップし、Basic認証をかけて、自分専用の検証用環境を作っていきましょう。

※こちらの記事はMacOS向けの記事です。
※gitを扱えることを前提としております。

米Salesforceが提供しているPaaS環境です。

PaaS環境とは、アプリケーションを実行するためのプラットフォームです。

OSやデータベース、サーバにアプリケーションフレームワークなど、アプリケーションを実行するための環境が提供されています。

そのPaaS環境である、「Heroku」を使用すれば、簡単にアプリケーションを公開することが出来ます。

また、Herokuの特長とすれば、使用言語が豊富、拡張機能が豊富、スケールアウトが簡単といったところでしょう。

では、実際に登録していくところから始めてみましょう。

まず、公式サイトに遷移してください。

https://www.heroku.com/

「SIGN UP FOR FREE」をクリックして、アカウント登録を行っていきましょう。

登録画面がでてくるので、各フォームを埋めて、「CREATE FREE ACCOUNT」をクリックしましょう。

登録したメールアドレスにURLが届きますので、そこからパスワードを設定します。

これでアカウントは出来ましたので、トップ画面に戻り、「Log in」をクリックしましょう。

ログインすると、下記のようなページがでてきますので、「Create New App」からアプリケーションを作りましょう。

Create New App をクリック後のページは特に記入せずに、「Create App」を押してください。

それでは、Heroku CLI を使ってアップしていきましょう。

下記のような画面になっていると思いますので、Heroku CLIの説明にそって環境を作っていきましょう。

それでは、ターミナルを開いて下さい。
brew install が使用できるらしいので、そちらを使いましょう

$ brew install heroku 

これで、herokuコマンドを使用できるようになりましたね。

早速、SSH鍵を設定しましょう。

$ heroku login

Email: (Herokuアカウントののメールアドレス)
Password (Heokuアカウントのパスワード): 

「Authentication successful.」と出てくると認証完了です。
herokuプロジェクト用のディレクトリを作成して、その中でアップの準備をしましょう。

$ mkdir my-project
$ cd my-project

プロジェクトディレクトリができたので、Herokuで静的サイトを公開するための「heroku-static-provider」がGitHubにありますので、cloneしてきます。

$ git clone https://github.com/nulltask/heroku-static-provider.git static-site
$ cd static-site 

pullしてくると、static-siteディレクトリの中にpublicディレクトリがあると思いますので、こちらにお好みの静的サイトを移動させてください。

それでは、Herokuにアップしていきます。

$ git add .
$ git commit -ma 'Add static site'

$ heroku create
$ git push heroku master

これでHerokuにアップ完了です。確認してみましょう。

$ heroku open

静的サイトが静的サイトがheroku createによって作られたURLで公開されてますね。
それでは、Basic認証をかけていきましょう。

$ heroku config:set USER=username
$ heroku config:set PASS=password

これでBasic認証も完了です。確認してみましょう。

$ heroku open

Basic認証がかかっていますね。
およそ10分で完了しました。

いかがでしたでしょうか？

およそ10分で静的サイトをHerokuにアップしました。
これなら検証用環境をすぐに用意できます。
Basic認証をかけているので、検証中の静的サイトを見られることもありません。

WordPressをのせて、プラグインでBasic認証をかけたりもできるので、いろいろ試してみてください。