Basic認証が必要になったのでホスト探しをしていたところ、Herokuが無料でできるとのことで早速初期構築からデプロイまでを行ったけど、とても簡単だった。Herokuもアリ。
作業環境
$ node -v
# v12.13.1
$ heroku -v
# › Warning: heroku update available from 7.19.3 to 7.42.6
# heroku/7.19.3 darwin-x64 node-v11.3.0
Warning ごめんなさいwアプデしますw
Herokuを使用するのに事前に新規登録とheroku-cliの導入を済ませておきます。
Nuxtプロジェクトを作成する
まずはデプロイするためのNuxtプロジェクトを作成します。
$ npx create-nuxt-app my-app
セットアップに必要な質問は下記のように返答しました。
create-nuxt-app v3.2.0
✨ Generating Nuxt.js project in div-mentor-checksheets
? Project name: div-mentor-checksheets
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using
typescript)
Basic認証を導入する
Nuxtには簡単にBasic認証ができるモジュールが用意されているみたいなので、それを使用します!
nuxt-basic-auth-moduleをインストール
先程作成したプロジェクト内に入ってモジュールのインストールをします。
使用するのはnuxt-basic-auth-moduleです。
$ cd my-app
$ yarn add nuxt-basic-auth-module
Basic認証の設定
モジュールが追加できたらnuxt.config.jsの設定をしていきます。
modules: [
'nuxt-basic-auth-module'
],
basic: {
name: 'admin',
pass: 'xxx'
},
passの部分にはお好きなものを入れてください。
私の場合はセットアップでaxiosを導入したので、modulesのところには既にaxiosの設定が入っているのですがここでは省略します。
動作確認
設定までできたらローカルでプロジェクトを立ち上げて動作確認をします。
$ yarn dev
3000番ポートが空いていればhttp://localhost:3000/にアクセスするとBasic認証がかかるはずです。
設定したID/Passでログインできるか確認してください。
お手軽すぎますね!
Heroku appのセットアップ
なんか韻を踏みましたが、いよいよHerokuを扱っていきます。
冒頭でも伝えましたがHerokuへの会員登録とcliの導入は済んでいる前提で進めます。
Herokuにログインする
Herokuで登録したメールアドレスとパスワードでログインします。
ブラウザでログインするかコマンドラインでログインするか、お好きなほうでどうぞ。
$ heroku login
# ブラウザでログイン
$ heroku login -i
# コマンドラインでログイン
Heroku appを作成
ログインができたらHerokuアプリを作成します。
heroku createコマンドの後にアプリ名を指定すると、指定した名前でアプリを作成できます(そのままだが笑)。
アプリ名を省略すると適当な名前でアプリが作成されます。
$ heroku create app-name
Creating app... done, ⬢ app-name
https://app-name.herokuapp.com/ | https://git.heroku.com/app-name.git
ここで表示されるURLがデプロイ時のURLになるのでメモしておきましょう。
Herokuにデプロイする
いよいよデプロイです。
$ git add .
$ git commit -m "first commit"
$ git push heroku master
デプロイ自体はgit pushで行っています。コミットしてからpushしましょう。
デプロイはこれでOKなのですが、ここで先程createしたURLにアクセスしてみてもエラーになっていてアプリが表示されません。
まだ設定が必要なのです!
HerokuでNuxtを動かすために必要な設定をする
デプロイはできましたがこのままではまだNuxtが動かないので、Heroku側での設定とNuxt側での設定をしていきます。
Herokuの設定
$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production
ここらへんはNuxtの公式ドキュメントにもあります。
Nuxtの設定
Herokuでrunしたときにnpm run buildを実行するための処理を記述します。
"scripts": {
"dev": "nuxt",
...
"heroku-postbuild": "npm run build"
},
Herokuに再push
設定ができたら再度Herokuにデプロイします。
$ git add .
$ git commit -m "first commit"
$ git push heroku master
デプロイができたらHerokuのURLにアクセスしてみるとBasic認証が出るはずなので、動作確認をしましょう!
下記のコマンドでもブラウザが立ち上がります。
$ heroku open
ハマったこと
Herokuにpushできない
heroku createをプロジェクトの上の階層で実行していたのでremoteにherokuが存在していませんでしたw
最初SPAでやっていた
SPAでやっていて、デプロイまではうまくできたんですが、basic認証がかからない。
SSRで試したらできてしまったので、別にSPAでなくてもできるし今度でいいかwと思って辞めました笑
“heroku-postbuild”: “npm run build”の辺りでなんかいろいろやってたので、もしかしたらそのへんかも?
参考にした記事
めっちゃ助かりました。ありがとうございます。