お題
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>は入れたけど、いま時点ではヘッダもフッタも入れず。
<template>
<v-app light>
<div>NOW MAKING DEFAULT LAYOUT</div>
<nuxt />
</v-app>
</template>
<template>
<v-app light>
<nuxt />
</v-app>
</template>
■pages/の中身
login.vueはレイアウトとしてlayouts/login.vueを使うことを明示的に宣言。
宣言しない場合はlayouts/default.vueが使われる。
また、login.vueでは別途定義したcomponents/login.vueを使ってデザイン定義する。
<template>
<v-content>
NOW MAKING INDEX PAGES
</v-content>
</template>
<template>
<v-content>
<login />
</v-content>
</template>
<script>
import login from '~/components/login.vue'
export default {
layout: 'login',
components: {
login
}
}
</script>
■components/の中身
<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/#/)
■ここまでの全ソース
ちなみに、ログイン画面とログイン後のトップ画面とをそれぞれ表示できるようにしたものの、認証済みか否かに関わるロジックは未実装なので、今はログインしてるかどうか関係なくどちらの画面も表示できる状態。