「GoogleAppEngine」の記事 - Crieit

GCEをDBサーバーにしてGAEでサービスを無料運用する（を構築したけど費用がかかった）

2020-01-07T23:15:57+09:00

GCPでリリースしたサービスが1年経ち無料クレジットの期限をむかえそうになりました。Cloud SQLを使ってデプロイしたためその後は有料になってしまうのですが、誰も使っていないサービスのためなんとか無料で運用できる方法は無いかと考えました。ちなみに下記のような構成です。

Node.js
MySQL5.7

しかしサービスの性質上ちょっとデータベースのデータも多めで、HerokuのMySQLだと無料プランでは無理なのかな…という気がしました。そうするとMySQLを使えて無料で運用できるサービスが他にはありません。

そこでふと、アプリケーション・サーバーはGoogle App Engine、データベースサーバーをGoogle Compute Engineで運用してみたらどうだろう、と思い立ちやってみました。

後日談の追記

こういうのが出るみたいなので無料は無理なのかもしれません。Micro instance with burstable CPU running。

普通にサーバーとして使ってる時は出ないのでGAEかネットワークから必要以上に接続が来てしまうのかもしれませんね…。（もしくは最近新しく作ったGCEだと出るようになったとかだったり？）

追記）
GCEにWeb+DB全部入れにしたら費用がかからなくなったのでやはりこの構成だと費用がかかるみたいです。

GAEからGCEにローカル接続する

結局のところ、今回の話ではこれが一番重要です。そもそもApp EngineからCompute Engineにローカル接続できるのか、と。

これは実はこの記事を書いている2020/1時点では日本語マニュアルではまだβ版という表記が残っている、リリースされたばかりの「サーバーレスVPCアクセス」という機能を使うことによって可能です。

Connecting to a VPC network | App Engine standard environment for Node.js docs | Google Cloud

Compute EngineはVPCネットワーク内に位置しているのですが、App Engineはこれとは別のネットワークに存在しています。そのため、このサーバーレスVPCアクセスという機能を使うことで、下記にも書かれていますがApp Engineのスタンダード環境やCloud FunctionsからCompute EngineやCloud SQLに内部IPでアクセスできるようになります。

Serverless VPC Access の構成 | VPC | Google Cloud

日本語だとデプロイ時にbetaをつけろと書かれていますが恐らく今は不要だと思います。

サーバーレスVPCアクセスの設定

サーバーレスVPCアクセスのページを開くとコネクタを作成というリンクがあるのでクリックします。

作成画面に必要な項目を入力して作成します。

注意が必要な点としてまだリリースされたばかりのためリージョンが少ないです。最初にApp Engineを登録してしまうと、同じリージョンがない…！　みたいなことになるので気をつけましょう。us-central1であればGAEのus-centralと合います。

IP範囲は補足に書かれている感じで大丈夫です。要するに、既存のVPCネットワークのIPとかぶっていないIP範囲であれば大丈夫です。

App Engineの設定

App Engineのリージョンは先程作成したコネクタのリージョンに合わせて作成しましょう。多分作ってしまった後は変更できないのではないかと思います……。ただ、ちょっとApp Engineを作り直せない関係で色々試すことができたわけではないので、リージョンが違ったらダメかどうかは詳しく検証できていません。

あとはapp.yamlに、このコネクタに接続するための設定を追記します。

vpc_access_connector:
  name: "projects/PROJECT_ID/locations/REGION/connectors/CONNECTOR_NAME"

REGIONとCONNECTOR_NAMEはコネクタのものです。これでデプロイすれば接続され、Compute Engineの内部IPと接続することができるようになります。

Compute Engineの設定

デフォルトだとCompute Engineの内部IPはエフェメラルになっているため、時々勝手に変わってしまいます。

静的内部IPアドレスを予約して固定にしておきましょう。外部IPは不要です。固定外部IPを使っていた場合は、ただそれを外すだけだと使われない外部IPになってしまい、費用が発生してしまいますのでIPを解放しておきましょう。

あとはMySQLをインストールして設定しましょう。どこからもアクセスできないのでMySQLユーザーは ユーザー名@'%' とかでいいのではないかと思います（違ったら教えていただけると助かります）。

問題なければこれで接続できます（のはず……）

諸々設定

とはいえGAEは無料枠があるというだけでそれ以降は有料となってしまいます。こにさんのブログを参考にしてなるべくオーバーしないようにすると良いでしょう。

Google App Engineを無料で運用する方法（2018年版） - koni blog

スタンダード環境にてAutoScalingのF1というプランです。スケールしないプランもありますがそちらは無料枠が少なく毎月有料になってしまいます。

どちらにしろすごくアクセスのあるサイトだと有料になってしまうと思いますので今回のようにもう誰も使っていないサービスを残しておくとか、作ったばかりのサービスで試す場合とかにこの構成だと良いのではないかと思います。

あとCloud SQLのように便利な機能はないので適宜バックアップを取っておきましょう。

Google Cloud Storage無料DBバックアップ

また、DBサーバーはメモリが不足してしょっちゅう止まる可能性もありますので、swapの設定もしておいた方が良いでしょう。

熨斗（のし）の王様を作ったときに気をつけたこと

2019-10-13T23:43:10+09:00

まとめ

のし王というWebサービスを作った。
のし作成サービスが既に存在する中で、下記に気をつけたというお話。
- サービス作成のきっかけになった不満点・ニーズをもれなく仕様に落とし込む
- 仕様策定時は技術的な楽さに甘えず、ユーザー体験を優先する
- 上記を実現するため必要最低限の技術を選定する

不満点の解消、ニーズを仕様に落とし込む

ちょっとした贈り物に「のし」をつけたかった。
既存サービスは、以下の点で不満が残った。
- 「のし紙」のテンプレート（背景画像）だけが提供されており、Wordなどに貼り付けた後、自分で文字を描かないとダメだった
- Web上で任意の文字まで入れられるサービスでは、最後になるまで仕上がり具合がが分からなかった
- 最終画像にサービス名のロゴが入ってしまい、贈り物には不向きだった
- フォントがしょぼかった
- 水引き（背景画像）や表書き（御礼などの上部の文字）をどう選んでよいか分からなかった
不満点の解消をもれなく仕様に落とし込んだ。
- 背景画像と任意の文字を組み合わせてPDFで出力できるようにする
- 最終出力結果には広告を入れない
- 有料でもカッコいいフォントを採用する
- 用途に応じて自動で「水引き」と「表書き」が選択できるようにする
マッスルの神様＝マ神　→　熨斗の王様＝のし王

ユーザー体験を最優先する

	技術的な楽さを優先	ユーザー体験を優先
文字描画	ユーザー自身がWordなどで描画	Webサービス上で描画
仕上がり確認	プレビュー不可 or プレビューボタンクリックで表示	リアルタイムプレビュー表示
水引き、表書き	ユーザーの選択したものを表示	用途を選ぶと最適な水引き、表書きを自動で選択
描画フォント	無料の範囲で選択可能	有料で質の良いフォントが選択可能
ユーザーが泥酔状態	酔いが冷めてから使う	泥酔状態でも直感で使える

仕様の実現方法を考える

使用した技術
- Webサービス上で文字描画しPDF出力
  - 水引きの種類や表書きなどの情報をブラウザ上で選択させる
  - サーバーでPDFを作成してダウンロードさせる(Golang/Google App Engine)
- リアルタイムプレビュー表示
  - サムネイル描画サーバー(Golang/Google App Engine)を準備
  - 水引きの種類や表書きなどの情報が変更されたらAjax(jQuery)でサーバーからサムネイル画像を取得し、ブラウザ上に即時反映
- 用途を選ぶと最適な水引き、表書きを自動で選択
  - Bulma-ExtensionsのQuickViewで用途一覧を表示
  - 用途を入力させて絞り込み(jQuery)
  - 用途クリックで「水引き」と「表書き」を最適なものに変更(jQuery)
選定理由
- 仕様実現に際して最低限／シンプルなものを選ぶ
- 最新の技術よりも枯れて安定した技術を選ぶ
- なるべくメンテナンスが不要なものを選ぶ

Nuxt.js＋Firebase＋GAEで作った個人サービスが半月で2万PV超えたので実績値を全て公開する

2019-10-04T17:10:28+09:00

Qiitaへ投稿した記事のクロス投稿になります。

こんなサービス作りました

【#拡散希望】🙌🎉🎊サービス開始🎊🎉🙌ボケをツイートして「いいね❤️」「リツイート🔁」の数でランキング！Twitter連動型大喜利サイト「ついぎり」サービス開始しました‼️#ついぎり https://t.co/bkXfzHyVSs
— ついぎり@公式アカウント (@twigiri_app) August 14, 2019

Twitterで大喜利するサービスです。
８月中頃にローンチしたのですが、有難いことに半月で約2.5万PVいきました。

開発に至ったポエム記事はCrieitに投稿しています。
なぜ大喜利サービスを作ったのか

この記事について

やっぱり公開直後は怖かったです。

そう、クラウド破産。
Firebaseの設定を間違えて72時間で300万円以上請求されてしまったウェブサービス
 BigQueryで150万円溶かした人の顔

上記以外にもネット上にはインパクトのある高額請求の記事がたくさんあり、
内容を確認すれば「なんだそんな事か」となるのですが、
実績値というのはセキュリティやNDAの関係からか、なかなか出回ってません。

個人開発ならそんなの関係ねぇ

って事で全て公開します。
使い方によって大きく変わる所かと思いますが、何かの参考（個人開発の後押し）になれば幸いです。

環境構成

Nuxt v2.8.1
- SSRモード
GAE
- standard
- runtime: nodejs10
- instance_class: F1
Firestore
- 改めて別記事書こうと思いますが一般的な構成だと思います
Cloud Functions for Firebase
- engine: node8
- ユーザー登録/脱会/ツイート/いいねRT集計/バックアップで使用
Cloud Storage for Firebase
- OGP画像の保存に使用
Regionは全てasia-northeast1

使用量

PV数

トータルで約2.5万PV。
デイリーだとローンチ直後の約5,500PVがMAXです。

割り当て

アクセス数に比例した増加は見られませんでした。

GCP Storage egress between NA and APAC
使用量: 3.59GB
一番費用が発生してるこれ、よく分かってません・・・
GAEのデプロイにかかる項目なのかな？と思ってます。

Cloud Firestore Entity Writes Japan
Cloud Firestore Read Ops Japan
Write: 480,077
Read: 606,253
Firestoreは1日単位で無料枠がリセットされるのですが、リリース直後はちょっと無料枠から足出た程度ですね。
21日辺りは障害等でデータいじってた・・・気がします。

諸経費

サーバー代

0円でした。
使用量として57円かかってるのですが、
GCPには1年間有効な$300のトライアルクレジットがあるので、そこに収まってます。
クレジットを$0.5消費しました。使い切れる自信がありません。

ドメイン代

1,600円です。
Google Domainsでappドメインを取りました。
appドメインはSSL証明書無しでは使えないという安全なドメインです。
GAEの場合、SSL証明はデフォルトで有効＆無料です。

収益

AdSense広告を導入しています。
キャプチャは載せて良いのか分からなかったので・・・
半月で約1,300円でした。

所感

環境構成について

一番びっくりしたのはNuxt.jsがF1インスタンスで落ちずに稼働していることです。
公式ドキュメントでもF2が推奨されてるのですが、F2では無料枠に収めることが難しいです。
バックエンド処理をFirebaseに任せてるおかげで負荷が少ない構成になってるのかなーと思います。

費用について

正直「バズった」と言える数値ではないと思ってるので「バズっても大丈夫」とは言えないです・・・
座布団数(ボケツイートのいいね/RT総数)も、現在のランキング1位は3桁です。
「バズっても大丈夫」と分かったら改めて記事書くので、誰かバズってください。

しかし、まぁバズが発生してない個人開発としてはそれなりのアクセス数だと思ってます。
それで数十円なので「そんなに怖くないよ！」とは言えるかと。

安心して使うために

GCPの課金アラートを設定する
Rulesはちゃんと書く

は最低限やっとくべきです。
ただ、Rulesはちゃんと書くと一般的なバックエンド処理と同レベルの規模になると思います。
最低限の尺度が難しいですが、認証/取得件数/タイムスタンプ比較辺りは最低でもやっておくべきです。

マネタイズについて

AdSenseに頼ったサービスの運営は凄く難しいという体験をしました。
PV落ちたら施策を打たないといけないので放置出来ないし、
収益率はAdSenseの匙加減１つで大きくブレそうです。

前作ではマネタイズしてなく、正直「もしバズったらお金かかるよな・・・」とアクセス数に対してネガティブになってました。
その経験を踏まえ、広告を貼りました。
結果、素直に「バズれ！」と思えるようになったので、それだけでも導入した価値はあったかと思います。

おわり

今後、この個人開発で得た知見で記事書こうと思ってます。

TwitterAPIがBANされた話
Firestoreの構成について
文字入れ画像を作るソースコード
オレオレアトミックデザイン

他に「ここ知りたい」等あれば公開しますし、ボリュームある内容であれば記事書きます！

ただ、一番書きたいのは「バズっても大丈夫だった件」です。

Twitter連動型大喜利サイト「ついぎり」

面白い投稿お待ちしてます😋

GAE+Nuxt.js+Firebaseでネココさんを喋らせるだけのサービス作成

2018-10-17T21:00:29+09:00

昔mixiアプリでネココレースというアプリを作ったのですが、その素材が放置状態でもったいない事に気づいたので、ネココさんを着替えさせて喋らせてTwitter上に投稿できる簡易なWebアプリを作ってみました。

ネココさんトーク

ログインなど不要ですぐ使えます。

構成

Google App Engine

この手のWebサービスにはあまり意味がないのですが、SSR（サーバーサイドレンダリング）で一応全部ページクロールできるようにして多少SEO的な効果も期待し、静的ホスティングサービスではなくGoogle App Engineにしてみました。

Nuxt.js

最近は簡単なアプリケーションはNuxt.jsだととにかく簡単に色々作れるのでよく使っています。前述と同様、SSR目的でもあります。

Firebase

今回はデータを登録して表示するだけというシンプルなデータ構成のため、わざわざサーバーを用意しなくてもよいFirebaseを使ったサーバーレス構成にしました。

データの保存にFirestore、画像の保存にStorageを使っています。

Buefy

Bulmaというやわらかい感じのデザインを実装できるフレームワークを使っています。ただ、Bulma自体はほんとにCSSだけで、動きなどは自分で付けなければなりませんので、動き部分も実装されているBuefyを使っています。これを入れるだけでBulma自体のCSSもそのまま使うことができ汎用的で非常に便利です。

仕組み

プロジェクトの作成

プロジェクトはcreate-nuxt-appを使って作成し、TypeScriptを追加しました。以前下記でまとめていた方法になります。

Nuxt.js+ExpressのプロジェクトをTypeScript化する

Storeの利用

動物や着せ替えの選択は、選択したコンポーネントだけでなく、画像のダウンロードやシェアする画像を作成する等、他の場所でも使うためにStoreのStateとして保持しておきます。

StoreはNuxt.jsのマニュアルを見ると非常に理解しやすく、下記の記事でも以前まとめています。

VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる

画像の作成

画像は html2canvas で作成しました。今回はサーバーが無いためこれを使ってブラウザ上で画像を作成する形です。left: -2000px とかにしたdiv上にあれこれ配置し、それをhtml2canvasで変換しているだけです。

一点注意点として、デフォルトの挙動では端末のサイズによってcanvasのスケールが変わってしまうようですので、下記のように等倍で作成します。

    const canvas = await html2canvas(this.$refs.canvas, { scale: 1 })

Blobに変換する方法は下記等、色々情報があります。

Canvasで描画した画像を送信してサーバに保存する - Qiita

canvas.toBlob もあるみたいですね。早く全てのブラウザで実装されてほしいものです。

あとはStorageへの登録はマニュアル通りです。ファイル名は登録したメッセージデータのID名にしています。

    const ref = firebase.storage().ref()
    const imageRef = ref.child(`images/${messageId}.png`)
    const imageSnapshot = await imageRef.put(blob)

画像のURLも取っておきます。調べた情報によると、上記のimageRefでなく、再度Storage側から取ってきたものを使わないとダメなようです。

    const ref = firebase.storage().ref()
    const imageRef = ref.child(`images/${messageId}.png`)
    const url = imageRef.getDownloadURL()

このURLもメッセージデータに保存しておけば完成です。

あとは表示画面で入力されたメッセージや画像のURLをメタタグに入れておけば、その詳細ページのURLをシェアしてもらうことでツイートでシェアすることができます。

Nuxt.jsの場合メタタグの設定はページコンポーネント内で下記のように行います。

  head() {
    const title = this.getTitle() + ' - ネココさんトーク'
    const description = `${this.categoryExplanation}:${this.message.message}`
    return {
      title,
      meta: [
        {
          name: 'description',
          content: description
        },
        { name: 'og:title', content: title },
        {
          property: 'og:image',
          content: this.message.imageUrl
        },
        {
          property: 'og:description',
          content: description
        },
        {
          name: 'twitter:card',
          content: 'summary_large_image'
        },
        {
          name: 'twitter:image',
          content: this.message.imageUrl
        }
      ]
    }
  }

SSRのためデータはasyncDataで取っておきましょう。

  async asyncData({ params }) {
    const messageRef = messagesCollection.doc(params.id)
    const message = await messageRef.get()
    const messageData: any = message.data()
    messageData.id = message.id
    return {
      message: messageData
    }
  }

シェアする画面へのURLの作成は下記のような感じです。

  tweetUrl() {
    const url = encodeURIComponent(
      process.env.URL + `/messages/${this.message.id}`
    )
    const text = encodeURIComponent(this.categoryExplanation)
    const hashtags = encodeURIComponent('ネココさんトーク')
    return `https://twitter.com/share?url=${url}&text=${text}&hashtags=${hashtags}`
  }

デプロイ

Google App Engineへのデプロイは下記で以前解説しています。

App Engineの標準環境でNuxtを使って無料SSR

ZeitのNowでも良いと思います。GAEはFirebaseのプランが変わってしまう（無料枠は利用可能です）、Zeitは無料でのデプロイ回数制限がある、という違いがあるので適宜良い方を選択してください。

おまけでGA

Google Analyticsの導入は下記をインストールして設定するだけでした。めちゃくちゃ簡単。

nuxt-community/analytics-module: Google Analytics Module

まとめ

大雑把になりますが作り方をざっと紹介しました。興味のある方は是非試してなにか作ってみてください！

不明点があればTwitter等で聞いてもらえれば可能な範囲で答えます。

Google App Engineでさくらのドメインを使ってカスタムドメイン

2018-10-15T20:58:55+09:00

Google App Engineではカスタムドメインを設定できるため、自分の持っているドメインで運用できるようになっています。さくらのドメインでそれの設定を行う時にエラーが出てしまったのですが、とりあえずうまくいったのでメモしておきます。

エラー

Google App Engineでカスタムドメインの設定を行う際に、DNSに設定すべきレコード一覧が表示されます。Aレコード4つ、AAAAレコード4つとCNAME1つです。

さくらのドメインのDNS設定にてこれを登録しようとした場合、AレコードとAAAAレコードは問題なく追加できたのですが、CNAMEを追加しようとした時に「レコードが存在するエントリへの、CNAMEレコード追加はできません。」というエラーが表示されました。

仕方なく先にCNAMEを追加してからAレコードを追加しようとしましたが、それもダメでした。

解決方法

CNAMEは登録しなくてもカスタムドメインでアクセスできました。試していませんが、もしかしたらCNAMEを追加するだけでもいけるのかもしれません。

GAE+NuxtのSSRでFirestoreを使う

2018-08-03T20:50:24+09:00

App Engineの標準環境でNuxtを使って無料SSR を先日やってみたので、今度はFirebaseのCloud Firestoreでデータの保存を試してみました。

ちなみにGAEのスタンダード環境ではNode8が動くため、ローカルでも全てNode8で動かす必要があります。

※また後日記事を書きますが、通常セキュリティルールが入っているため、実際にはcloud functions経由でfirebase-adminを利用してデータを取ってくる必要があります。

Firebaseの初期設定

plugins/firebase.jsに下記のように設定を保存します。

import * as firebase from "firebase";  
require("firebase/firestore");  

if (!firebase.apps.length) {  
  const config = {  
    apiKey: "your firebase api key",  
    authDomain: "your firebase auth domain",  
    databaseURL: "your firebase database url",  
    projectId: "your google cloud platform project id",  
    storageBucket: "your google cloud platform storage bucket",  
    messagingSenderId: "your firebase messaging sender id"  
  };  
  firebase.initializeApp(config);  
}  

firebase.firestore(); // もしかしたら要らないかも

そしてnuxt.config.jsで上記を読み込むようにしておきます。

  plugins: ["~/plugins/firebase.js"],

これでFirebaseのライブラリがNuxt上で利用できるようになります。

Firestoreへのデータ追加＆取得

元々あるindex.vueを下記のように修正し、データの一覧を追加してボタンを押すとデータを登録できるようにした最小のサンプルを作ってみました。（関係ないところは削っています）

テンプレート

テンプレートは単にデータを表示しているだけで特筆するところは無いです。

スクリプト

初期化

import db from "../lib/db";

DBを簡単に使える様にインポートしてすぐ使えるようにしています。これは別に必ず作らなければならないわけではありません。中身は単にdbを初期化して取ってきているだけです。

import * as firebase from "firebase";  
export default firebase.firestore();

データをFirestoreから取得してくる

ページを読み込むと、まずFirestoreからデータを取ってきて一覧します。

async function getTexts() {  
  return new Promise(callback => {  
    let texts = [];  
    db  
      .collection("texts")  
      .get()  
      .then(query => {  
        query.forEach(doc => {  
          texts.push(doc.data());  
        });  
        callback(texts);  
      });  
  });  
}  

export default {  
  data() {  
    return {  
      texts: [],  
      textInput: ""  
    };  
  },  
  async asyncData({ params }) {  
    return { texts: await getTexts() };  
  }  
}

データの初期化にmountedを使うことは多いと思いますが、これはサーバーサイドレンダリングでは動作しないため、代わりにasyncDataやfetchを使う必要があります。asyncDataは下記URLに使い方が載っていますが、async/awaitを使ったり、Promiseやcallback形式など自由に選べるようです。

非同期なデータ - Nuxt.js

あとこの中ではthisが使えないため、仕方なく適当にクラスの外にfunctionを定義してそれを呼び出しています。

あ、あとasyncDataはコンポーネントでは使えないため、今回はページ上で実行しています。実際の開発の際もコンポーネントで値を使いたい場合はプロパティで渡すか、storeを使うかになると思います。

データをFirestoreに追加する

あとは追加ボタンをクリックした時の処理を追加します。

  methods: {  
    add() {  
      db  
        .collection("texts")  
        .add({  
          body: this.textInput  
        })  
        .then(docRef => {  
          this.textInput = "";  
          return getTexts();  
        })  
        .then(texts => (this.texts = texts));  
    }  
  }

追加してとりあえず先程の一覧取得処理を実行しているだけです。

これでFirestoreにデータが保存され、画面上にも表示されます。Firebase Consoleのデータ一覧でも確認できます。

サーバーサイドレンダリングされているか確認

Google App Engineで動作させればサーバーサイドレンダリングされますので、一度ページをリロードして確認すればソース上に登録した文字列が存在するのが確認できると思います。（間違ってmountedで処理しているとSSRされません）

FIrebaseだとデプロイもあっというまでサーバー側の処理とか何も気にしないでいいので楽ですね！

あとはFirestoreにはリアルタイムアップデートの機能もありますので、一覧取得とかは頻繁に更新されるのであればそっちでやってみるのも良いかもしれません。

App Engineの標準環境でNuxtを使って無料SSR

2018-08-02T18:33:54+09:00

Google App Engine（GAE）のStandard EnvironmentにNode.jsが追加されているようです。元々Node.jsは有料のFlexible環境でしか使えなかったため、無料で使えるようになったのは非常に嬉しいです。

元々Firebase HostingやNetlifyで無料でNuxtを動かす事はできるのですが、それらは静的ホスティングサービスのためSSR（サーバーサイドレンダリング）ができません。（Functionsを使ったり等で可能ではあるようですが、アクセスが増えると費用がかさむようになると思います）

GAEであればサーバー上でNodeが動くためSSRも問題なく可能でSEO的にも良さそうです。ということでとりあえずGoogle App Engine上でNuxtを動かしてSSRできるところまで試してみました。

Windows SubsystemのUbuntu上で動かしました。

ローカルでNuxtプロジェクトの初期化

まずはローカルでNuxtプロジェクトを作成し、動作するようにします。

vue init nuxt-community/starter-template nuxtproject
cd nuxtproject
yarn

とりあえずこれで動くかざっと確認しておきます。

yarn run dev

http://localhost:3000にアクセスして動いていればOKです。

GAEにはビルド済みのものをデプロイするため、予めNuxtプロジェクトのビルドまで行っておきます。

yarn run build

Google App Engine用の設定

Nuxt.js on Google App Engine（GAE)

上記のページを参考にし、package.jsonのstartスクリプトにポートとホストの設定を行っておきます。（ポートは不要とコメントには書かれているようです）

"start": "HOST=0.0.0.0 PORT=8080 nuxt start",

app.yamlも作っておきます。handlersを設定して静的ファイルをキャッシュするようにしないとメモリ不足で止まってしまうらしいです。

runtime: nodejs8
env: standard
handlers:
- url: /_nuxt
  static_dir: .nuxt/dist
- url: /.*
  script: auto

Nuxt.js2の場合はstatic_dirが .nuxt/dist/client でした。

費用節約のためにmax_idle_instancesを設定したりも必要になると思います。下記のページが詳しいです。

Google App Engineを無料で運用する方法（2018年版） - koni blog

僕の場合はいつの間にか.gcloudignoreファイルがあったので、そちらにデプロイしないファイルを設定しておきました。ない場合は作っておきましょう。.gitやnode_modulesをデプロイしてしまうとうまくデプロイできないらしいです。

あとはGAEにデプロイします。

gcloud app deploy

ただ、僕の場合エラーになりました。下記を参考にし、sqlite3のライブラリをインストールします。その後Pythonもインストールし直しが必要のようです。僕はpyenvを使っていたためアンインストールとインストールし直しが楽だったので助かりました。

【ubuntu】ImportError: No module named '_sqlite3'とでたときの対処法【Python】

sudo apt-get install libsqlite3-dev libbz2-dev libncurses5-dev libgdbm-dev liblzma-dev libssl-dev tcl-dev tk-dev libreadline-dev

まとめ

あとはGAEへのデプロイが完了したらメッセージに表示されているようにコマンドやURL直接アクセスで動作確認することができます。問題なくNuxtが動作している画面が表示されていれば完成です。

ソースを見てみるとVueコンポーネント内の文字列などが表示されていると思います。

ただ、Google App EngineのStandard Environmentはデフォルトで128MBのメモリしか無いようです。無料枠だとそれを使うしかないのですが、Nuxtを利用したNode環境だとどの程度の動作まで耐えきれるのかが謎です。引き続き試していってみたいと思います。