【無料】Basic認証付きでNowに静的ファイルをデプロイする方法

どーも、ぐるたか@guru_takaです。

静的ファイルをサクッと無料で簡単にできる方法がないか調べていたら、こちらの記事が出てきました。情報共有、めちゃくちゃ感謝です！
参考 zeit の now で Basic 認証付きで Web ページをデプロイするサンプルを作成しました。Okada Hiroshi の blog 参考 HiroshiOkada/now-node-express-basic-auth-example: @now/node express basic auth exampleGithub

実際に試したら、超簡単に無料でデプロイできて感動しました。今後も色々と使えそうなので、やり方を備忘録として、残しておきます。

スポンサードリンク

手順
STEP.1：package.json作成
STEP.2：Basic認証用のindex.js作成
STEP.3：now.json作成
STEP.4：nowでデプロイ

手順

Nowの導入については、以下の記事を参考にしてみてください。
参考 Now でクラウドの複雑さから解放されよう、今すぐにQiita

nowコマンドが使えること前提で進めていきます。

STEP.1

package.json作成

STEP.2

Basic認証用のindex.js作成

STEP.3

now.json作成

STEP.4

nowでデプロイ

フォルダ構成は以下の通りです。

└── public
    └── index.html

STEP.1：`package.json`作成

まずは、以下のようなpackage.jsonを作成します。

package.json

{
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "basic-auth-connect": "^1.0.0",
    "express": "^4.16.4",
    "helmet": "^3.16.0"
  },
  "scripts": {
    "start": "node ."
  }
}

そして。パッケージをインストールしましょう。

コマンドライン

$ yarn install

STEP.2：Basic認証用の`index.js`作成

BFF（Backends For Frontends）の役割を担うBasic認証用のindex.jsを作ります。

index.js

cconst express = require('express')
const helmet = require('helmet')
const basicAuth = require('basic-auth-connect')

const app = express()

app.use(helmet())
//ユーザー名とパスワードの設定箇所
app.use(basicAuth('user', 'password'))
//public：静的ファイルが格納されているフォルダ名
app.use(express.static('public'))

module.exports = app

STEP.3：`now.json`作成

次にデプロイ用のnow.jsonを作成します。

now.json

{
  "version": 2,
  "alias": "basic-deploy-test",//各自名前を変更すること
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ],
  "builds": [
    {
      "src": "/index.js",
      "use": "@now/node",
      "config": {
        //アップロードしたいフォルダ
        "includeFiles": ["public/**"]
      }
    }
  ]
}

またアップロードしたくないファイルを.nowignoreに書いていきます。

.nowignore