Vuepress+Zeit NowでBasic認証

Vuepress+Vercel(旧Zeit Now)でBasic認証付きサイトを構築しました。
# Goal
- MarkdownをVuepressでジェネレート
- Githubにコンテンツをプッシュで自動配信
- HTTPS/Basic認証
- 静的コンテンツの配信は無料ホスティング

# アーキテクチャ
![vuepress-now.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/d537390f-e714-19e6-8646-ad897bfb3124.png)

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

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

```bash
yarn add express
yarn add basic-auth-connect
```

`index.js`に`static-auth`を記載

```javascript
// 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"));
});
```

## ディレクトリ構成

```bash
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](https://vercel.com/signup)

now-cliのインストール

```bash
yarn global add now
now login
```

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

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

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

```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/パスワードを設定

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

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

```bash
yarn build
now --prod
```
コンソールにURLが出力されればデプロイ完了です。

# GutHubとVercel（旧Zeit Now）の連携
GitHub連携の設定をするとGitHubにpushで自動ビルドさせることができます。
Vercelにログインし、projects->import projectから、`Git Repository`を選択
<img width="478" alt="08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/72da08b7-540a-7ec8-374d-418f495e7429.png">

GutHubから`Import Project from GitHub`で対象のリポジトリを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/c2bd3c86-df30-09ec-8132-b57119bb4ad7.png)

GitHub上の連携したいリポジトリを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/30f2b6bc-8d06-255c-1812-cc24184bbb79.png)

プロジェクトの指定をして完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/483b612b-fb1b-bba4-f250-61fe51c5f051.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/bd2a1a70-f6a0-6268-eed7-0a75a861a866.png)


あとはGitHubにPushすることで自動配信されます。
以下はデプロイのログ画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/cd1f95e8-6c5c-2af3-2f8a-c39d4529f41d.png)

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

# 参考
- [Vercel（旧zeit now）](https://vercel.com/)　* Zeit NowからVercelに変わったようです。
- [PaaS nowについて](https://qiita.com/mazu/items/e97d645b919a0ca70031)
- [Deploy static vuepress site using now.sh and basic authentication](https://dev.to/daksamit/deploy-static-vuepress-site-using-now-sh-and-basic-authentication-2ci2)
- [now.shのデプロイ設定ファイル「now.json」の使い方まとめ](https://www.serversus.work/topics/t4bp8t8y6c8k2mcm6cq0/)