お題

FirebaseAuthの機能をある程度確認したく、フロントをVue.js/Nuxt.js、バック(WebAPI)をGolang(v1.11)とし、GAE(Google App Engine)にデプロイする形式で実装してみる。
FirebaseAuth＋Vue.js＋Golangの組み合わせの記事はいっぱいある。
差別化という観点では↓かな。。。

ただのVue.jsでなくNuxt.js（UIはVuetify）を採用
出来たアプリはGAEにデプロイ
FirebaseAuth導入前の状態からSignIn/Out、SignUp等を順繰り実装していく手順

なのだけど、書いているうちにちょっとボリューム大きくなってきたので、いったんSignIn/Outまで書いたものを３回分に分ける。
今回はFirebaseAuth導入前のフロントエンドログイン実装するところまで。

前提

以下は他にいくらでもよい記事があるので省略。

開発環境の構築（GolangやらYarnやらのインストール等）
Google Cloud Platform環境の取得（App Engine有効化）
Firebase環境の取得
Vue.jsやNuxt.jsのチュートリアル

開発環境

# OS

$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="18.04.1 LTS (Bionic Beaver)"

# 依存モジュールのバージョン

package.jsonの内容より、以下の通り。

    "nuxt": "^2.3.4",
    "vuetify": "^1.3.14",
    "vuetify-loader": "^1.0.8",
    "@nuxtjs/axios": "^5.3.6"

# Yarn

$ yarn -v
1.12.3

# Golang

$ go version
go version go1.11.4 linux/amd64

実践

■Nuxt-Appプロジェクト作成

yarnで。以下、プロジェクト作成時に何を選択したかについて。

$ yarn create nuxt-app frontend
yarn create v1.12.3

    ~~省略~~

? Project name frontend
? Project description My badass Nuxt.js project
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier, Axios
? Use a custom UI framework vuetify
? Use a custom test framework jest
? Choose rendering mode Single Page App
? Author name sky0621
? Choose a package manager yarn

    ~~省略~~

	To get started:

	cd frontend
	 yarn run dev

  To build & start for production:

	cd frontend
	 yarn run build
	 yarn start

  To test:

	cd frontend
	 yarn run test

Done in 301.78s.

プロジェクト作成における何たるかは下記参照。
https://qiita.com/sky0621/items/2deb95a94bd4a6bd4d72#yarnでプロジェクト作成

■ディレクトリ構造

こうなる。

$ tree -L 1 frontend/
frontend/
├── README.md
├── assets
├── components
├── dist
├── jest.config.js
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── static
├── store
├── test
└── yarn.lock

いろいろいじるのだけど、とりあえずまず「ログイン」機能が必要なので、同機能の実装に関連する下記をいじる。

components
layouts
pages

layouts/にはデフォルトで「default.vue」が存在するのでそれをいじってもいいのだけど、通常はログイン後のページにはヘッダやフッタに当たるデザインを付けて、ヘッダには「ログアウト」ボタンを置いたりするはず。
つまり、ログイン画面とデザインを共有できないので、あらかじめ分けておく。

pages/にはデフォルトで「index.vue」が存在するが、このVueはログイン後の初期表示画面用に取っておきたいので、やはり別途ログイン用のVueを用意する。

components/配下については、当初想定している規模感であれば、ログイン機能はpages/配下のVueだけで書いてもいいかと思ったものの、大概はなんだかんだ実装しているうちにコンポーネント化しておけばよかったと思うものなので、やはりあらかじめ用意。

結果、こうなる。

frontend/
├── README.md
├── assets
├── components
│   └── login.vue
├── jest.config.js
├── layouts
│   ├── default.vue
│   └── login.vue
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── index.vue
│   └── login.vue
├── plugins
├── static
├── store
├── test
└── yarn.lock

■`layouts/`の中身

各ページで使っているレイアウトの識別のための<div>は入れたけど、いま時点ではヘッダもフッタも入れず。

[default.vue]

<template>
  <v-app light>
    <div>NOW MAKING DEFAULT LAYOUT</div>
    <nuxt />
  </v-app>
</template>

[login.vue]

<template>
  <v-app light>
    <nuxt />
  </v-app>
</template>

■`pages/`の中身

login.vueはレイアウトとしてlayouts/login.vueを使うことを明示的に宣言。
宣言しない場合はlayouts/default.vueが使われる。
また、login.vueでは別途定義したcomponents/login.vueを使ってデザイン定義する。

[index.vue]

<template>
  <v-content>
    NOW MAKING INDEX PAGES
  </v-content>
</template>

[login.vue]

<template>
  <v-content>
    <login />
  </v-content>
</template>

<script>
import login from '~/components/login.vue'

export default {
  layout: 'login',

  components: {
    login
  }
}
</script>

■`components/`の中身

[login.vue]

<template>
  <div>
    NOW MAKING LOGIN FORM
  </div>
</template>

■画面表示内容

(a)ログイン画面

構造イメージ

layouts/login.vue
        |
        └ pages/login.vue
                |
                └ components/login.vue

画面表示(http://localhost:3000/#/login)

(b)ログイン後用の初期画面

構造イメージ

layouts/default.vue
        |
        └ pages/index.vue

画面表示(http://localhost:3000/#/)

■ここまでの全ソース

ちなみに、ログイン画面とログイン後のトップ画面とをそれぞれ表示できるようにしたものの、認証済みか否かに関わるロジックは未実装なので、今はログインしてるかどうか関係なくどちらの画面も表示できる状態。