Nuxt.jsからプラットフォームAPIをコールする（GCPにデプロイ〜expressをバックエンドで導入する）

こんにちは！株式会社スマレジのmasaです！

今月の登山

今月は六甲山に登ってきました！ 桜は散り出していましたが、ツツジが満開で綺麗でした。 学校などで見かける植え込みのツツジと違い、花は小さく、少し香りが強い印象を受けました。

goo.gl

ツツジがとても綺麗でした！

アリマグミという、六甲山で見つかった木だそうです。

ただ、蛇もちょこちょこ見かけました・・・。

最高峰！１０００メートルはないんです。

曇りな日だったのですが、登頂した時雲が切れて、綺麗でした！

Nuxt.jsをGCPにデプロイする。

GCPのデプロイ方法は下記のURL様が参考...というか同じ方法で対応できました。

qiita.com

本当に同じ手順だったので説明は割愛します。 その代わりではないですが、デプロイコマンドが複数あるのでシェルにまとめました。

#!/usr/bin/env bash

echo "コンテナ設置"
gcloud builds submit --project "<project name>" --config=./cloud-build.yml
echo "コンテナ設置 完了"

echo "コンテナ起動"
gcloud beta run deploy easy-product --region us-central1 --allow-unauthenticated --project "<project name>" --image gcr.io/inner-arch-283519/easy-product-container
echo "コンテナ起動　完了"

サーバーミドルウェアを導入して、Expressを動かす

ja.nuxtjs.org

手順はnuxtの公式ドキュメントに記載があります。

nuxt.config.jsにバックエンドのパスを追記する

serverMiddlewareというプロパティを設定します。

import colors from 'vuetify/es5/util/colors'
import serveStatic from 'serve-static'

export default {
...
  serverMiddleware: [

    { path: "/server-middleware", handler: "~/server-middleware/rest.js" }
  ],

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
...

}

~/server-middleware/rest.js にサーバ再度の処理を設置する想定です。この時のホームディレクトリはプロジェクトルートに一致します。

サーバサイドの処理を記載する

~/server-middleware/rest.js にexpressの処理を記載します。今回はAPIでのコールを想定します。

const app = require('express')()

app.use(bodyParser.json())
app.post('/', (req, res) => {
    res.json({data: "hoge"});
}

あとはこれをpages配下のVue.jsからAPIコールします。

<template>
...
</template>

<script>
  export default {
    created : function(){
      const axios = require('axios');
      const data = {code: "fuga"};
      axios.post('./server-middleware/hoge', {data: query})
      .then(function(res) {
        console.log(res);
      });
    }
  }
</script>

<style scoped>
...
</style>

次回はここから、プラットフォームAPIをコールしてみます。