2021-01-10

Nuxt.js と Firebase でGoogleアカウントログインの設定をする

Firebase Nuxt.js

Firebase でログイン設定をする手順

対象のFirebase console にアクセスする。
［ Authentication ］タブに移動する。
［ログイン方法を設定］をクリックする。
［ログインプロバイダ］のGoogle をクリックし［有効にする］をクリックする。
プロジェクトのサポートメールを設定する*1
［保存］をクリックする。

Nuxt.js でログイン設定をする手順

Firebaseをプラグイン化する

Firebase は外部モジュールになるので、plugins に記述する必要がある。

// plugins/firebase.js

import firebase from "firebase";

const config = {
  apiKey: process.env.VUE_APP_apiKey,
  authDomain: process.env.VUE_APP_authDomain,
  databaseURL: process.env.VUE_APP_databaseURL,
  projectId: process.env.VUE_APP_projectId,
  storageBucket: process.env.VUE_APP_storageBucket,
  messagingSenderId: process.env.VUE_APP_messagingSenderId,
  appId: process.env.VUE_APP_appId,
  measurementId: process.env.VUE_APP_measurementId
};
if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export default firebase;

process.env は .env のデータを持ってくるという意味。

面倒くさいけれど、情報が漏れないために必要な処置のひとつ。

// .env
VUE_APP_apiKey　= "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_authDomain = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_databaseURL = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_projectId = "xxxxxxxxxxxxxxxxx",
VUE_APP_storageBucket = "xxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_messagingSenderId = "xxxxxxxxxxxxxx",
VUE_APP_appId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_measurementId = "xxxxxxxxxxxxxxx"

.env には上記コードを記述する。

上記のように.env に記載したところ、エラーが生じたので、直接書くことにしたら解消した。

// plugins/firebase.js

import firebase from "firebase";

const config = {
  apiKey: "*********",
  authDomain: "*********",
  projectId: "*********",
  storageBucket: "*********",
  messagingSenderId: "*********",
  appId: "*********",
  measurementId: "*********"
};
if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export default firebase;

必要なデータはサイドバーの［プロジェクトの概要］をクリックし表示されたページの、アプリ名の下</> をクリックし歯車アイコンをクリックする。

遷移先のサイトの下部マイアプリのラジオボタン構成をクリックすると表示される。

最後にplugins を使用しているので、nuxt.config.js にプラグインの宣言をする。

  plugins: [
    '~/plugins/firebase',
  ],

ログインボタンを設置したページを用意

まずはログインボタンを設置したページを用意する。

// Hello.vue （元）
<template>
<div>
  <h1>HELLO</h1>
  <button>Googleアカウントでログイン</button>
</div>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>
<style>
</style>

上記コードに必要なコードを付け加えていく。

必要なコードを加えたのが下記コード。

// Hello.vue（ログイン処理を付け加えた版）
<template>
<div>
  <h1>HELLO</h1>
  <button @click="googleLogin">Googleアカウントでログイン</button>
</div>
</template>

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {};
  },
  methods: {
    googleLogin: function() {
      var provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithRedirect(provider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
      }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
      });
    }
  }
}
</script>
<style>
</style>

ボタンクリック後、ログイン画面に遷移できれてばOK。

Nuxt.js の@click*2、methodsについては別記事。

*1:ここで設定したメールアドレスはアプリケーション公開時に認証画面で公開されるので注意が必要

*2:https://blog-progblog-web.hatenablog.com/entry/2021/01/10/215020

2021-01-09

Nuxt.js で条件により要素を出し入れする

Nuxt.js

サンプルコード

<template>
<div id="test">
  <p v-if="hoge">条件「hoge」は true です。</p>
  <p v-else>条件「hoge」は false です。</p>
</div>
</template>

<script>
export default {
  data() {
    return {
      hoge: true
    };
  },
};
</script>

<style>
</style>

表示確認

上記コードの状態だと、下記表示になる。

条件「hoge」は true です。

hoge: true を hoge: false にすると、下記表示になる。

条件「hoge」は false です。

条件によりコンポネートごと出し入れする方法は別記事にて。

2021-01-09

Nuxt.js で条件によりコンポネートを出し入れする

Nuxt.js

サンプルコード

// index.vue
<template>
<div id="app">
  <Hello v-if="!isLogin"></Hello>
  <Goodbye v-if="isLogin"></Goodbye>
</div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false
    };
  },
};
</script>

<style>
</style>

// Hello.vue
<template>
<div>
  <h1>HELLO</h1>
</div>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>
<style>
</style>

// Goodbye.vue
<template>
  <div >
    <h1>GOOD BYE</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style>
</style>

表示確認をする

Hello.vue の「HELLO」が表示されている。

Goodbye.vue を表示させるためにはindex.vue のisLogin: false をisLogin: true に変更する。

条件付きレンダリング v-if とは？

v-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。

条件により要素を出し入れする方法は別記事にて。

2021-01-06

Nuxt.js で npm run build と npm run generate を理解し使い分ける

Nuxt.js

間違えると、時間を無駄にするので整理する。

npm run build

node.js アプリをデプロイするときに使用する。

ファイルの生成場所

project/.nuxt/dist

Node.js サーバにデプロイする時に使用

Heroku
Digital Ocean

… etc

npm run generate

アプリのデプロイだけでなく、静的なサイトを制作可能に。

ファイルの生成場所

project/dist

ホスティングサービスにデプロイする時に使用

Netlify
Vercel
Firebase Hosting

… etc

設定の変更を

npm run generate を実行した時に警告が発生した。

When using nuxt generate, you should set target: 'static' in your nuxt.config

nuxt generateを使用する場合は、nuxt.configでtarget： 'static'を設定する必要があります とのこと。

下記設定で問題解決。

// nuxt.config.js

export default {
  target: 'static', // default is 'server'
}

2021-01-05

Nuxt.js のプロジェクトをFirebase にホスティングする

Firebase

前提条件

事前にNuxt.jsのプロジェクトを作成しておく必要がある。*1

まずは Firebase をインストールする

npm install firebase --save

Firebase CLI をインストールする

npm install -g firebase-tools

上記コマンドを使用し、Firebase CLI をインストールする。

Firebase にログインする

firebase login

上記コマンドを実行する。

ブラウザが起動しGoogleログイン画面が表示される。

なお、本環境で実行した時、下記エラーが表示された。

firebase : このシステムではスクリプトの実行が無効になっているため、ファイル C:\example\firebase.ps1 を読み込むことができません。
詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ firebase login
+ ~~~~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

下記、コードで無事解決。

PowerShell -ExecutionPolicy RemoteSigned firebase login

【解決方法】PowerShell スクリプトを実行するとエラーが発生する

上記リンク先を参考にさせていただきました。

以降エラーが出るようであれば、すべてPowerShell -ExecutionPolicy RemoteSigned をコマンドの文頭につけるとうまくいく。

ログイン時、Googleアカウントのアクセスを許可する必要がある。

許可をすると下記のような陽気な文言がブラウザに表示され、Firebase CLI にログイン完了。

Woohoo!
Firebase CLI Login Successful
You are logged in to the Firebase Command-Line interface. You can immediately close this window and continue using the CLI.

Firebase にホスティングする

firebase init hosting

上記コマンドを実行する。

いくつか質問されるので順に回答していく。

Are you ready to proceed? (Y/n)

このディレクトリをFirebaseプロジェクトとして初期化するけど準備はいいかと問われるのでY を選択する。

? Please select an option:
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

このディレクトリをどのFirebaseプロジェクトに関連付けるか聞かれるので自分の環境に合わせる

? Select a default Firebase project for this directory: 
> *************

既存のプロジェクトを選択したので、Firebaseにある既存プロジェクトが選択肢に表示される。

? What do you want to use as your public directory? (public)

デプロイするディレクトリについて聞かれる。

Nuxt.js の公開ディレクトリは dist なのでdist と記入する。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

シングルページアプリケーションかどうかについて問われるので、制作環境に合わせて選択する。

? Set up automatic builds and deploys with GitHub? (y/N)

GitHubと連携するかを問われるので、好みに合わせて選択する

+  Wrote dist/404.html
+  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

上記が出力されれば初期化完了！

firebase serve

Firebase プロジェクトをローカルで実行してテストする。*2

firebase deploy

問題なければ最後にFirebase にデプロイする。

Hosting URL: https://{{project_id}}.web.app

ホスティングURLが表示されるので、無事ページが表示できているかを確認する。

ちなみにサーバーの停止は下記コマンド。

firebase hosting:disable

コマンド完了後、下記質問にY でエンター。

This will immediately make your site inaccessible! Yes

停止後にアクセスするとNot Foundが表示される。

*1: https://blog-progblog-web.hatenablog.com/entry/2021/01/02/233850

*2:この1つ前の作業でビルドをする「npm run generate」

2021-01-04

Firebase でプロジェクトを作成する

Firebase

Firebase でプロジェクトを作成

Firebase へアクセスする
[ プロジェクトを作成 ] ボタンをクリックする
プロジェクト名を決める（プロジェクト名は管理画面上の名称になる）
プロジェクトID*1が動的に決まるが、変更もOK
Firebase の規約にチェックを入れ、[ 続行 ] ボタンをクリックする
Google アナリティクスの使用可否を回答し、[ 続行 ] ボタンをクリックする
Google アナリティクスの地域を選択し、すべてチェック後に[ プロジェクト作成 ] ボタンをクリックする
「新しいプロジェクトの準備ができました」という表示確認後に、[ 続行 ] ボタンをクリックする

プロジェクト作成完了！

管理画面が表示される。

Firebase には有料も含め複数のプランがあるが、最初に作成時はSparkプランなので無料で利用可能。

プランごとにできることはFirebase Pricingを参考に。

*1:グローバルに一意のプロジェクトの ID であり、Realtime Database の URL や Firebase Hosting のサブドメインなどで使用されます。プロジェクトの作成後は、プロジェクト ID を変更できません。

2021-01-03

Nuxt.jsのバージョンを確認する

Nuxt.js

コード

npx nuxt -v

// 出力結果
// @nuxt/cli v2.14.12

もっとシンプルに

package.jsonでも確認することができる。

というより、こっちの方が圧倒的に早くバージョンを確認できる。

  "dependencies": {
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  },

空想家 Developers Blog

稼ぐ力？　とにかくスキルが欲しい。

Nuxt.js と Firebase でGoogleアカウントログインの設定をする

Firebase でログイン設定をする手順

Nuxt.js でログイン設定をする手順

Firebaseをプラグイン化する

ログインボタンを設置したページを用意

Nuxt.js で条件により要素を出し入れする

サンプルコード

表示確認

Nuxt.js で条件によりコンポネートを出し入れする

サンプルコード

表示確認をする

条件付きレンダリング v-if とは？

Nuxt.js で npm run build と npm run generate を理解し使い分ける

npm run build

ファイルの生成場所

Node.js サーバにデプロイする時に使用

npm run generate

ファイルの生成場所

ホスティングサービスにデプロイする時に使用

設定の変更を

Nuxt.js のプロジェクトをFirebase にホスティングする

前提条件

まずは Firebase をインストールする

Firebase CLI をインストールする

Firebase にログインする

Firebase にホスティングする

Firebase でプロジェクトを作成する

Firebase でプロジェクトを作成

プロジェクト作成完了！

Nuxt.jsのバージョンを確認する

コード

もっとシンプルに