2020

23

Sep

netlify, nuxt.js

Nuxt.js+NetlifyのBasic認証設定メモ

最近、Nuxt.js+Netlifyをやり始めました。
簡単に言うと、
Nuxt.js → Vue.jsのフレームワーク
Netlify → gitと連携したサーバー
って感じです。
最初にNetlifyを設定して、
gitにアップしたら、コンパイルしてサーバーに勝手にアップしてくれるので、
わざわざ、FTPなどで、アップして、コンパイルって、必要がありません。
なんて楽なんだ。ただ、最初の設定が、少し大変でした。

gitで、developのブランチにアップすると、勝手にプレビューができます。
変更が簡単にサーバーで確認できるので、便利♪
ただ、これは、誰でも参照できるので、実際に運用するとなると、Basic認証を付けることが必須です。
netlify.tomlを作成して、アップする必要があります。
[code]
[context.production]
command = ""
[context.deploy-preview]
command = ‘npm run generate && echo -e "/*\n Basic-Auth: $BASIC_AUTH_ID:$BASIC_AUTH_PASS" > dist/_headers’
[context.branch-deploy]
command = ‘npm run generate && echo -e "/*\n Basic-Auth: $BASIC_AUTH_ID:$BASIC_AUTH_PASS" > dist/_headers’
[/code]
【参考サイト】
https://www.netlify.com/blog/2017/04/07/selective-password-protection/
https://kikunantoka.com/2019/05/31–netlify-preview-environment-with-basic-auth/
【ハマった点】

最初yarnでしようとしたけど、なんか、エラーが出てがうまくいかず、npmにしました。
Netlify、npmだと最初からインストールしてあるみたいなので、特にyarnである必要がなければ、npmでいいかな。

_headersを書きだす場所。
nuxt.jsを、generateで動かす場合、distフォルダに展開後のコードが入って、そこを参照します。
なので、distフォルダの下に、_headersを作らないと、Basic認証が効かないです。

echo -e “/*\n Basic-Auth: $BASIC_AUTH_ID:$BASIC_AUTH_PASS” > dist/_headers && npm run generate
の順だとBasic認証が動きません。
どうやら、npm run generateで、distの中を空にするっぽいので、
先に、npm run generateしないとダメっぽいです。
●最終のnetlifyの設定
Team settings
→ここで、Basic認証のIDとパスを設定します。

Setting→Bulid&Deploy

これで、本番環境と、開発環境の構築ができました。
本番になるまでは、AccessControlでパスワードを設定しておけば、外部に漏れる心配なく開発できます。

※パスワード設定は、NetlifyのProプランの契約が必要です。

タグ

同じ「netlify」カテゴリの記事

ABOUT

福岡在住、フリーランスのプログラマのメモ日記です。組込SEからWEB系に転向。子育てしながら、在宅SOHOにてお仕事しています。
ウェブサイトを作っていて困ったことや、よく調べることを書いていきます。

[対応言語]
HTML、CSS、PHP、Javascript、jQuery
Ruby On Rails、JAVA、C、C++、VB

[運営サイト]
キャラデコ弁.com
CSSデザインジェネレーター