こんにちは。フロントっぽいメモ久しぶり！
職場ではわからないことが多くぎて泣きそうな2週間を経て、わからないことにだんだん慣れてきてしまっています。イタリアに移住した時に、イタリア語が喋れなくて最初パニックになったけど、何週間かしてそれば普通になったのを思い出してしまいました。イタリア語もプログラミング言語も同じで、毎日その場に身をおいてればなんとかなる！はず！！

今回の静的サイト構成

つかっているものたち

• webpack
• JavaScript (TS, React)
• sass
• pug

ディレクトリ構成

• src/ ビルド前の sass, pug, ts
• dist/ ビルド後の css, html, js

みたいな古の静的マークアップ構成でも、Vercel 使ってさくっとベーシック認証かけます。
今回は Vercel でベーシック認証かけるメモなのでこの辺の build まわりの流れは省略します。

前提

つくったプロジェクトを git 経由で vercel に紐づけておきます。設定で適宜 build コマンド（今回は yarn build に上書き）や public フォルダ（今回は dist という名前に上書き）を設定しておきます。

0. static-auth と safe-compare をインストール

yarn add static-auth safe-compare -D

1. プロジェクトルートに app.js を設置

const protect = require('static-auth');
const safeCompare = require('safe-compare');

const USER_NAME = process.env.USER_NAME || 'id';
const PASSWORD = process.env.PASSWORD || 'pass';

const app = protect(
  '/',
  (username, password) => safeCompare(username, USER_NAME) && safeCompare(password, PASSWORD),
  {
    directory: `${__dirname}/dist`, // dist 配下のファイルを静的コンテンツとして配信する
    onAuthFailed: (res) => {
      res.end('Authentication failed')
    },
  }
)

module.exports = app

id と pass 箇所を好きなものに変えます。環境変数に入れる場合は vercel の環境変数に設定します。

2. プロジェクトルートに vercel.json を設置

{
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    { "src": "/.*", "dest": "app.js" }
  ]
}

これだけです！

参考にしました

まったくもって参考にさせてもらいました。感謝。

• VercelにホスティングしたウェブサイトにBasic認証を設定する 🔐