Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js +​ Google App Engine​ でのアプリケーション開発の勘所

SatohJohn
December 02, 2020

Nuxt.js +​ Google App Engine​ でのアプリケーション開発の勘所

2020年12月2日 オンライン開催【シューマイ】Tech Lead Engineerから最新技術を学べ!Vue.js編 にて発表した資料になります。

https://shuuu-mai.connpass.com/event/196096/

SatohJohn

December 02, 2020
Tweet

More Decks by SatohJohn

Other Decks in Programming

Transcript

  1. 自己紹介 ◦ 佐藤 慧太 @SatohJohn ◦ フリュー株式会社 新規事業開発部 システムアーキテクト ◦

    Webエンジニア ◦ フロントからバックエンドからインフラからシステム設計まで そして、組織の構成のことを考えながら過ごしてます ◦ 最近はGCPに合うJVM言語、フレームワークの動向を頑張って追っています
  2. ミミニミニミミの紹介 ◦ 若年女性向けの音声サービス ◦ iPhone + Google App Engine(Node.js)での開発 ◦

    Firebase Functionsで作成していたが、 通信速度上GAEのほうが良かったため載せ替え ◦ webページ、運用のツールはNuxt.jsで作成
  3. export default { ssr: true, serverMiddleware: [ { path: '/api',

    handler: '~/api/index.ts'} ] } nuxt.config.ts
  4. import { Response, Request } from 'express' import * as

    bodyParser from 'body-parser' import { GoogleAuth } from 'google-auth-library' const { BASE_URL, TARGET_AUDIENCE } = process.env const gAuth = new GoogleAuth() const app = require('express')() app.use(bodyParser.json()) app.all('/', async (req: Request, res: Response) => { const client = await gAuth.getIdTokenClient(TARGET_AUDIENCE) client.request({ baseURL: BASE_URL || 'https://example.an.r.appspot.com/', url: `test/url` }) .then((responseData) => { res.json(responseData.data) }) .catch((err) => { res.status(err.response?.status ?? 400) res.json({}) }) }) module.exports = app ~/api/index.ts
  5. axios-client.ts import axios, { AxiosRequestConfig } from 'axios' const config:

    AxiosRequestConfig = {} if (process.server) { config.baseURL = 'http://127.0.0.1:8080' } export const axiosClient= axios.create(config)
  6. まとめ ◦ 単純にNuxt.jsを使うなら、SPAが良いんじゃないかな? ◦ GAE + IAPを使った認証を挟む場合は、SSRで対応すると良いかも ◦ Nuxt.jsをフロントサーバとして利用する ◦

    フロントサーバとして、1サービス追加するか ◦ そして、SSRの機能を使う部分は一部にする ◦ 使えるけど使わないという気持ち