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

メニューボタン閉じるボタン

たったの10分!Basic認証つきの静的サイトを「Heroku」にアップしよう!

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

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

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

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

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

「Heroku」って何?

Heroku トップページ

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

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

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

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

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

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

「Heroku」に登録しよう!

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

https://www.heroku.com/

Heroku トップページ

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

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

Heroku 登録画面

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

Heroku password 登録画面

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

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

Heroku アプリ作成画面

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

Heroku アプリ登録画面

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

「Heroku CLI」を使って静的サイトをアップしよう!

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

Heroku 管理画面

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

$ brew install heroku 

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 

git clone heroku-static-provider

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

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

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

$ heroku create
$ git push heroku master

git push heroku master

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

$ heroku open

Heroku アップ後

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

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

Heroku Basic認証

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

$ heroku open

Heroku アップ後(Basic認証)

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

まとめ

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

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

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