herokuで静的サイトを無料で公開する方法

概要

basic認証付きの静的サイトを無料で作成したかったので色々しらべてみたらherokuの無料枠でやるのが良さそうだったので試してみました

sinatra使うのが一番簡単でお手軽かなと思います（Ruby単体でも大丈夫）

ちなみにGitHubPagesは簡単だけど認証付けれなかった...

手順

herokuのアカウントを作ってログイン

ここは省略

全体の構成

- public
    - hogehoge.html
- config.ru
- Gemfile
- Gemfile.lock

ディレクトリを用意する

herokuは静的ファイル単体でのデプロイはできないためsinatraを使う

とりあえずディレクトリ作ってgit init

$ git init

sinatraではpublic配下に静的ファイルを置けば/hogehoge.htmlでアクセスできる

source "https://rubygems.org"
gem 'sinatra'

bundle installする

$ bundle

require 'rubygems'
require 'sinatra'

run Sinatra::Application

デプロイ

$ git add .
$ git commit -m "first commit"
$ heroku create hogehoge
$ git push heroku master
$ heroku open

Basic認証を設定

- public
    - hogehoge.html
- config.ru
- Gemfile
- Gemfile.lock
- main.rb ←追加

require 'sinatra'

use Rack::Auth::Basic do |username, password|
  username == ENV['BASIC_AUTH_USERNAME'] && password == ENV['BASIC_AUTH_PASSWORD']
end

RackのBasic認証機能を使う

config.ruで読み込まれるファイルに記述すればサイト全体に適用される

require 'rubygems'
require 'sinatra'
require './main'

run Sinatra::Application

環境変数の設定

$ heroku config:set BASIC_AUTH_USERNAME=*****
$ heroku config:set BASIC_AUTH_PASSWORD=*****

デプロイ

$ git add .
$ git commit -m "hogehoge"
$ git push heroku master
$ heroku open

感想

仕事柄、Web環境に自由にいじれる静的サイトがあるとめっちゃ便利なので良かった

特に見せちゃダメな情報とか置くわけじゃないけど、一応野晒しにしたくは無いのでbasic認証でもあったほうが嬉しい

何にも気にしない場合はGitHubPagesが最速＆簡単

参考

Herokuに静的ファイルを置く - komagataのブログ

HerokuのSinatraでBasic認証を使ってアクセス制限をかける - アインシュタインの電話番号