eureka

NuxtプロジェクトをHerokuにデプロイしてBasic認証をかける

0

NuxtもHerokuも久しぶりのほぼ初心者・・・

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”の辺りでなんかいろいろやってたので、もしかしたらそのへんかも?

参考にした記事

めっちゃ助かりました。ありがとうございます。

0