この記事では、無料でBasic認証付きのWebサイトをホスティングする方法を紹介します :key: :desktop:

はじめに

モックアップやサイトのプレビュー版をチーム内やクライアントと共有したいときってありますよね。
そんなとき、自前サーバやFTPソフトがなくてもターミナルだけで、しかもタダで実現する方法です。

最近では NetlifySurge など、無料で静的コンテンツをクラウドにホスティングできるサービスが出てきていますが、問題は認証です。モックアップやプレビューはとりあえずBasic認証くらいかけとこうかって感じだと思いますが、上記のサービスでは認証機能は有料プランです。

そこで、Node.jsでBasic認証付きのWebサーバを書いて、Herokuの無料プランにデプロイする方法を紹介します。無料プランだと一定期間アクセスがないとスリープ状態になって初動が遅くなるとか制約はありますが、モックアップやプレビューという目的では特に問題にはならないかと思います :innocent:

前提

以下のツールをインストール :inbox_tray: されていること。

また、Herokuアカウントを取得する必要があります :closed_lock_with_key:

最終的なディレクトリ構成

:open_file_folder: プロジェクトルート
:dividers: public:サイトのコンテンツ(HTML/CSS/JS/Image etc...)
:dividers: .git:Gitで管理する履歴情報などが格納される(自動生成、編集 :no_entry_sign:
:dividers: node_modules:サーバサイドコードで必要な依存パッケージ(自動生成、編集 :no_entry_sign:
:page_facing_up: .gitignore:Gitのための設定ファイル
:page_facing_up: server.js:/public下のコンテンツを配信するサーバサイドコード
:page_facing_up: package.json:依存パッケージ管理のための設定ファイル
:page_facing_up: package-lock.json:依存パッケージ管理のためのファイル(自動生成、編集 :no_entry_sign:
:page_facing_up: Procfile:Herokuのための設定ファイル

:point_up: "public" のディレクトリ名は任意の名前で構いません。

:one: JavaScriptファイルの追加

パッケージのインストール

プロジェクトのルートディレクトリでパッケージ管理のための初期化コマンドを実行します。

$ npm init -y

次にパッケージ管理用の設定ファイルを記述します。初期化コマンドですでに package.json というファイルを自動作成されているので、以下の内容を記載してください。

package.json
{
  "name": "sample-project",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node ./server.js"
  },
  "dependencies": {
    "basic-auth-connect": "^1.0.0",
    "express": "^4.16.3"
  }
}

:point_up: "name" の値(例では"sample-project")はお好きな名前でOKです。

以下のコマンドでインストールを実行します。

$ npm install

インストールが完了したら、node_modules というディレクトリが作成されます。
ここにインストールした依存パッケージ :package: のファイルが格納されています。

Webサーバコード

コンテンツを配信するためのWebサーバをNode.jsで書いていきます :globe_with_meridians:

server.js
const express = require('express')
const basicAuth = require('basic-auth-connect')
const app = express()

const USERNAME = 'Basic認証のユーザー名'
const PASSWORD = 'Basic認証のパスワード'

app.use(basicAuth(USERNAME, PASSWORD))

// コンテンツはpublicディレクトリに存在するものと仮定します。
app.use(express.static('public'))

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`App listening on port ${port}.`)
})

:warning: Basic認証のユーザー名とパスワードが記述されるので、Githubなどの外部リポジトリには公開NGです。
(余談ですがGitlabは無料で非公開リポジトリを作成できるのでオススメです。)

nodeコマンドで実行してみましょう。

$ node server.js
App listening on port 3000

特にエラーがなければWebサーバが立ち上がっていますので、ブラウザで 127.0.0.1:3000 にアクセスしてください。Basic認証を要求されたでしょうか。server.js に記述したユーザー名とパスワードを入力してトップ画面が表示されたら :ok: :ok_hand: です。

Webサーバーを停止する場合はターミナルで Ctrl + C を入力してください。

:two: Gitでソースコード管理

HerokuにはGitを使ってコードをアップロード(git push)します。

そこでまずはローカルリポジトリにコードをコミットする必要があります :card_box:

Gitによるコード管理を始めるために、初期化コマンドを実行します。

$ git init

次に .gitignore という名前のファイルを作成し、以下の内容を記載してください。

.gitignore
node_modules

ローカルのリポジトリにコミットします。

$ git add .
$ git commit -m "My first commit"

「My first commit」の部分には任意のコミットメッセージを書いてください。

:three: Herokuにデプロイ

まず Procfile という名前のファイルを作成し、以下の内容を記載してください。
これはHerokuでアプリケーションを起動する際に必要な設定ファイルです。

Procfile
web: node ./server.js

Procfileの追加をGitの履歴に追加します。

$ git add .
$ git commit -m "Add Procfile"

ここまでくればあとはデプロイ :outbox_tray: するだけです。

まずはコマンドラインからログインします。

$ heroku login
Enter your Heroku credentials.
Email: adam@example.com
Password (typing will be hidden):
Authentication successful.

Herokuアカウントを取得した際のEmailとPasswordを入力しましょう。

次にHerokuにアプリケーションを作成します。

$ heroku create my-sample-website # heroku create アプリケーション名

アプリケーション名の部分はお好きなお名前を指定してください。ただし、Herokuにアップロードされているすべてのアプリケーションの中で重複のない一意の名前である必要があります。もしすでに使われている名前だった場合は、Name is already taken というメッセージが表示されます。

アプリケーションが作成されると、URLも自動的に生成されます。
URLは https://アプリケーション名.herokuapp.com です。

この時点では入れ物だけができている状態で、中身にサイトのコンテンツは入っていません。
Gitコマンドを用いてコンテンツ(+サーバコード&設定ファイル諸々)をHerokuにアップロードします。

$ git push heroku master

これで完了です :raised_hands: :tada:

上記のアプリケーションURLにアクセスしてみましょう。

コンテンツに変更を加え再度デプロイしたいときは git push heroku master を実行してください。


以上、無料でBasic認証付きのWebサイトをホスティングする方法を紹介しました。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.