Vuepress+Zeit NowでBasic認証

11302 ワード
JAMstack vuepress Basic認証 Vercel NOW Basic認証 テキストリンク

Vuepress+Vercel(旧Zeit Now)でBasic認証付きサイトを構築しました。

Goal

  • MarkdownをVuepressでジェネレート
  • Githubにコンテンツをプッシュで自動配信
  • HTTPS/Basic認証
  • 静的コンテンツの配信は無料ホスティング

アーキテクチャ

vuepress

# nodeJS設定
yarn init
# vuepressインストール
yarn add -D vuepress
# docs directory作成
mkdir docs
# トップページ作成
echo '# Now VuePress' > docs/README.md

basic認証の為、express、basic-auth-connectをインストール

yarn add express
yarn add basic-auth-connect

index.jsにstatic-authを記載

// index.js
const express = require("express");
const app = express();
const basicAuth = require("basic-auth-connect");

app.set("port", process.env.PORT || 5000);
app.use(basicAuth(process.env.BASIC_ID || "id", process.env.BASIC_PASSWORD || "password"));
app.use("/", express.static(__dirname + "/public"));
app.listen(app.get("port"), function() {
  console.log("Node app is running at localhost:" + app.get("port"));
});

ディレクトリ構成

docs
  ┣.vuepress
   ┗config.js # vuepress設定
  ┣README.md # =>index.html
  ┗xxx.md # =>コンテンツ
index.js # Web公開&Basic認証
now.json # Vercelデプロイ定義
pachage.json # ビルドパッケージ

Vercel（旧Zeit Now）

Vercelアカウント作成
https://vercel.com/signup

now-cliのインストール

yarn global add now
now login

package.jsonにビルド定義追加
now-buildはNowにアップした際のビルド用

package.json
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "now-build": "vuepress build docs && mv docs/.vuepress/dist public"
  }
}

now.jsonにデプロイ定義を追加

now.json
{
    "builds": [
        { "src": "index.js", "use": "@now/node" }
      ],
      "routes": [
        { "src": "/.*", "dest": "index.js" }
      ],
    "env": {
        "BASIC_ID": "@basic_id",
        "BASIC_PASSWORD": "@basic_password"
    }
}

環境変数にBasic認証のID/パスワードを設定

now secrets add basic_id [account]
now secrets add basic_password [password]

以下のコマンドでローカルでビルドして、Nowにデプロイ可能です。

yarn build
now --prod

コンソールにURLが出力されればデプロイ完了です。

GutHubとVercel（旧Zeit Now）の連携

GitHub連携の設定をするとGitHubにpushで自動ビルドさせることができます。
Vercelにログインし、projects->import projectから、Git Repositoryを選択

GutHubからImport Project from GitHubで対象のリポジトリを選択

GitHub上の連携したいリポジトリを選択

プロジェクトの指定をして完了

あとはGitHubにPushすることで自動配信されます。
以下はデプロイのログ画面

まとめ

Basic認証をするために、静的コンテンツをジェネレートした後で、expressでBasic認証付きで公開する形になりました。
now.jsonのbuildsの指定方法に戸惑いましたが、以下のように整理できました。
- vuepressのジェネレートはpackage.jsonのnow-buildで指定
- Vercel（旧zeit Now）での起動はnow.jsonのbuildsで指定

参考