Vercel にホスティングしているサイトに Basic 認証をつける

はじめに

Vercelにホスティングしているサイト(create-react-app)にBasic認証をつける時に、 調べた事をメモしていきます。

下記サイトを参考にさせていただきました。

Vercel で Basic 認証付きのプレビュー環境を作る - Webdelog

Next.js + Vercel で Basic 認証をかける

manifest.jsonはBasic認証がかかっていると通らない | 怪しい物を開発するブログ

実装

static-auth と safe-compare をインストールする

npm i static-auth

npm i safe-compare

www.npmjs.com

www.npmjs.com

server.js を作成

こちらは参考にさせていただいたサイトのコードを使用させていただきました。

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

const USER_NAME = process.env.USER_NAME || 'admin'
const PASSWORD = process.env.PASSWORD || 'admin'

const server = protect(
  '/',
  (username, password) => safeCompare(username, USER_NAME) && safeCompare(password, PASSWORD),
  {
    directory: `${__dirname}/build`,
    onAuthFailed: (res) => {
      res.end('Authentication failed')
    },
  }
)

module.exports = server

vercel.json を作成

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

デプロイ

下記実行してサイトを確認する

vercel --prod

エラー

Basic 認証をつけるとmanifest.json でエラーで出ていたので、 public / html のmanifest 部分に crossorigin="use-credentials" を追加する

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials"/>