2018.04.05

無料でBasic認証付きのWebサイトホスティング

目次

  1. はじめに
  2. 前提
  3. 最終的なディレクトリ構成
  4. (1) JavaScriptファイルの追加
  5. パッケージのインストール
  6. Webサーバコード
  7. (2) Gitでソースコード管理
  8. (3) Herokuにデプロイ
Open

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

はじめに

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

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

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

前提

以下のツールがインストール 📥 されていること。

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

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

プロジェクトルート
├ public：サイトのコンテンツ（HTML/CSS/JS/Image etc...）
├ .git：Gitで管理する履歴情報などが格納される
├ node_modules：サーバサイドコードで必要な依存パッケージ
├ .gitignore：Gitのための設定ファイル
├ server.js：/public下のコンテンツを配信するサーバサイドコード
├ package.json：依存パッケージ管理のための設定ファイル
├ package-lock.json：依存パッケージ管理のためのファイル
└ Procfile：Herokuのための設定ファイル

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

(1) 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"
  }
}

☝ "name" の値（例では"sample-project"）はお好きな名前でOKです。

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

$ npm install

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

Webサーバコード

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

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}.`)
})

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

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

$ node server.js
App listening on port 3000

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

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

(2) Gitでソースコード管理

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

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

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

$ git init

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

.gitignore 
node_modules

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

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

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

(3) Herokuにデプロイ

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

Procfile 
web: node ./server.js

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

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

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

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

$ 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

これで完了です 🙌 🎉
上記のアプリケーションURLにアクセスしてみましょう。

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


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