Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@sodapop

Nuxt.jsをherokuでデプロイしてパスワードをかける

More than 1 year has passed since last update.

身内でちょっとしたアプリを共有して、パスワードで閲覧の制限をしたい場合などに参考にしてください。
Nuxt.jsのBASIC認証のモジュールを利用します。

ローカルにNuxt.jsのアプリ構築

フォルダ作成

まずはデスクトップでもどこでもよいので、フォルダを作成します。

$ mkdir sample
$ cd sample

Nuxt.jsの構築

作成したフォルダの中でNuxt.jsのサンプルアプリを作成します。

$ create-nuxt-app sampleApp

create-nuxt-appの初期設定は任意です。エンター連打で構いません。

? Project name sampleApp
? Project description My priceless Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name (your name) 

BASIC認証の導入

作成したnuxt.jsアプリのフォルダへ移動します。

$ cd sampleApp/

モジュール追加

npmまたはyarnでnuxt-basic-auth-moduleをインストールします。
このモジュールにより、手軽にBASIC認証を導入できます。

$ npm i nuxt-basic-auth-module

NAME(ID)とPASSの設定

モジュールを追加した後、BASIC認証のNAME(ID)とPASSを設定します。
nuxt.config.jsを編集します。

$ vi nuxt.config.js

viの操作が分からない方は、以下の記事を一読することをオススメします。
vimの基本操作

nuxt.config.jsファイルを以下の様に変更します。
basicのうち、nameとpassは任意で設定してください。

nuxt.config.js
  modules: [
    'nuxt-basic-auth-module'
  ],
  basic: {
    name: 'admin',
    pass: 'xxx'
  },

動作確認

nuxt.config.jsファイルを編集後、runします。

$ npm run dev

上記コマンド実行後に表示されるURL(localhost)にアクセスして、以下のようにログインが求められればOKです。

スクリーンショット 2019-02-21 1.12.44.png

さきほどnuxt.config.jsのbasicにて、任意で設定していただいた値を用いてログインしてください。
ログイン後、以下の様にNuxt.jsのデフォルトのトップ画面が表示されていれば問題ありません。

スクリーンショット 2019-02-21 0.38.48.png

herokuに環境構築

herokuにログイン

以下のコマンドでherokuにログインします。

$ heroku login

ブラウザが立ち上がるので、herokuのIDとPASSを入力してログインします。

herokuを作成

ログイン後はターミナルに戻りherokuをcreateする。
作成にはしばらく時間がかかります。

$ heroku create

Creating app... done, ⬢ xxx
https://xxx.herokuapp.com/ | https://git.heroku.com/xxx.git

ここで表示されるURLがherokuのURLとなります。

herokuへpush

これでherokuのアプリケーション作成は完了です。
herokuのcreateが完了したら、コンテンツをheorkuにpushします。
以下の記述のうち、3行目を入力した後は処理にしばらく時間がかかります。

$ git add .
$ git commit -m "first commit"
$ git push heroku master

gitの基本が分からない方は、以下の記事を一読してみることをオススメします。
Gitの基本コマンド
ちなみに私もGit勉強中です。

Nuxt.jsによるherokuの為の設定

herokuのconfig追加

Nuxt.jsをherokuにデプロイする際に必要な作業が、もう少しだけあります。
この記述は公式のドキュメントのまんまです。

$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

herokuの挙動設定

herokuに構築したアプリケーションが立ち上がった時の動作を設定します。
viで package.json を編集します。

$ vi package.json

次にheroku で run した時に npm run build を実行する為の処理を記述する手順となります。

package.json
"scripts": {
    "dev": "nuxt",
    ...
    "heroku-postbuild": "npm run build"
},

herokuへ再push

ここまでで編集したファイルをherokuに反映させる為、herokuへpushします。

$ git add .
$ git commit -m "first commit"
$ git push heroku master

pushした後に、heroku作成時のURLにアクセスします。
ローカル環境で試した時と同様のBASIC認証が効いたページになっていれば完了です。

おわりに

npm run buildを最初から記述してherokuにpushしておけば1度のpushだけで済みます。
流れを汲んだほうが分かりやすいと思い、herokuへのpushを2度行う作業で説明しました。

参考記事

Nuxt.jsをHerokuへデプロイする手順
Nuxt.js アプリケーションに簡単にベーシック認証を付与できる nuxt-basic-auth-module のご紹介

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
sodapop
鹿児島でほそぼそwebの勉強 https://twitter.com/testodapop

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?