NuxtでBASIC認証おおおおおおおおおおお
Nuxtでポートフォリオサイトを作った際に、BASIC認証(nuxt-basic-auth-module)を使ってみました。
その際、Netlifyでは、BASIC認証が使えなかったので、
無料でBASIC認証が使えるHerokuにした事で解決出来た。
忘れてしまいそうなので、記事にします。
前提
各バージョンは下記の通り
# node
v10.15.3
# npm
v6.4.1
# nuxt
v2.7.1
Windowsの方は下記も入れておきましょう
Heroku CLI
まずは、インストール
npm install nuxt-basic-auth-module # or yarn add nuxt-basic-auth-module
設定方法
npm install nuxt-basic-auth-module # or yarn add nuxt-basic-auth-module
インストール後、nuxt.config.jsを開いてmodules内にnuxt-basic-auth-moduleを記述。
あとはbasicの中にnameとpassを設定するだけ。
/*
** Nuxt.js modules
*/
modules: [
'nuxt-basic-auth-module'
],
basic: {
name: 'dev',
pass: 'sample123'
},
設定出来ているか確認
npm run dev
npm run dev
http://localhost:3000で開いた時に、
BASIC認証が動いていれば成功です。
あとはアップするだけ!
NetlifyでWebサイトを公開する方法
などを参考にしながら、Netlifyでアップしてみる。
ところが、、、、Netlifyは有料版じゃないとダメ!?
アップロードは出来たけど、BASIC認証動いて無くね?
ということで、料金プランを見てみると、、、
毎月$45から「Basic authentication headers」とあるので、使えないっぽい。
毎月約1,600円は、さすがに高い気がするので、無料でBASIC認証が使える所を探すことに。。。。
Herokuなら無料でBASIC認証が使える
まずは、Heroku CLIでインストールしておく。
heroku上にアプリを作成する
#nuxt.config.jsなどがあるディレクトリで、
heroku create
herokuへデプロイ
git push heroku master
Nuxt.jsのデプロイに必要な基本設定
heroku config:set NPM_CONFIG_PRODUCTION=false
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production
package.jsonを開き、herokuにnpm run buildを実行させるために
"heroku-postbuild": "npm run build"を追記します。
{
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"heroku-postbuild": "npm run build" ←これ。
}
設定したものをpushして更新。
git push heroku master
作成したアプリを下記コマンドで開いてみる。
heroku open
これでBASIC認証がかかっていれば、完了!。
参考
NetlifyでWebサイトを公開する方法
Herokuが便利になるToolbeltのインストール(Windows用)
Author And Source
この問題について(NuxtでBASIC認証おおおおおおおおおおお), 我々は、より多くの情報をここで見つけました https://qiita.com/mr_xkun/items/5dba1aa7d9560fb865e1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .