Golang + Nuxt.js + Kubernetes でWebサービスを作る - その③

Golang + Nuxt.js + Kubernetes でWebサービスを作るシリーズ第三弾。今回はAPIサーバからWHOIS情報を取得し表示するフロントエンド部分を実装する。

Nuxt.jsでフロントエンド作ってみる

Nuxt.jsでフロントエンドを実装する。

まずは下記コマンドでNuxtのプロジェクトを作成する。

$ npx create-nuxt-app webapp-front
> Generating Nuxt.js project in /Users/doejohn/work/sandbox/webapp-front
? Project name webapp-front
? Project description My wicked Nuxt.js project
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier, Axios
? Use a custom UI framework buefy
? Use a custom test framework none
? Choose rendering mode Universal
? Author name famasoon
? Choose a package manager yarn

作成したプロジェクトのディレクトリに移動して試しにNuxtを動かしてみる。

$ cd webapp-front
$ yarn run dev

http://localhost:3000にアクセスするとこんな画面が出ると思う。これをカスタマイズしていく。

まずはバナー用のHero.vueをcomponentsに追加する。

<template>
  <section id="hero-section" class="hero is-medium is-primary is-bold">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
          <strong class="has-text-success">Welcome</strong> to Whois Query Web App
        </h1>
        <h2 class="subtitle">
          Show WHIOS information
        </h2>
      </div>
    </div>
  </section>
</template>

次にNuxtのレイアウトを決めるlayouts/default.vueを下記のように書き換える。

<template>
  <div>
    <section class="main-content columns">
      <div class="container column is-10">
        <nuxt />
      </div>
    </section>
  </div>
</template>

pages/index.vueを書き換える。

<template>
  <section class="section">
    <div class="columns is-mobile" />
    <hero />
    <div id="inputfield">
      <b-field position="is-centered">
        <b-input v-model="domain" placeholder="Input Domain or IP address..." type="search" icon="magnify" />
        <a :href="'/whois/' + domain">
          <p class="control">
            <button class="button is-info">
              Lookup
            </button>
          </p>
        </a>
      </b-field>
    </div>
    <description />
  </section>
</template>

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

export default {
  components: {
    Hero
  },
  data() {
    return {
      domain: ''
    }
  }
}
</script>

<style>
#inputfield {
  margin: 40px;
}
</style>

yarn run devを実行し画像のように表示されれば問題なし。

次にAPIサーバの呼び出し先を本番環境と開発環境で変えるように設定する。 Nuxt.jsは環境変数で変数の内容を変えることができる。参照: env プロパティ nuxt.config.jsのmodule.exportsに下記項目を追加

env: {
    apiServer: process.env.API_SERVER || 'http://localhost:8080'
},

これでAPI_SERVERという環境変数が設定されている時はそちらをAPIサーバとして利用。環境変数が設定されていない時はhttp://localhost:8080をAPIサーバとして利用するようにする。後でDockerを使用し本番イメージを作る際にAPI_SERVERという環境変数をセットしておくと本番環境のAPIサーバを向くようになる。

次にWHOIS情報を表示するためのページを作成する。 http://[webアプリ]/whois/[WHOISを表示したいドメイン]といったURLで表示したい。 Nuxt.jsはpages配下のvueファイルを見て自動的にルーティングの設定をしてくれる。動的なルーティングをする際はpages配下に_を先頭に付けたvueファイルを置けば良い。参照: Nuxt.js - 動的なルーティング pages/whois/_domain.vueというファイルを下の内容で作成する。

<template>
  <div>
    <h1 class="title">
      {{ $route.params.domain }}
    </h1>
    <h2 class="subtitle">
      Related information
    </h2>
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          Whois Result
        </p>
        <a href="#" class="card-header-icon" aria-label="more options">
          <span class="icon">
            <i class="fas fa-angle-down" aria-hidden="true" />
          </span>
        </a>
      </header>
      <div class="card-content">
        <div class="content">
          <template>
            <pre>{{ whoisResp.result }}</pre>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData(context) {
    const DOMAIN_NAME = context.params.domain
    const API_SERVER = process.env.apiServer
    const { data } = await axios.get(
      API_SERVER + '/api/v1/whois/' + DOMAIN_NAME
    )
    return {
      whoisResp: data
    }
  }
}
</script>

❶参照をしてローカルでAPIサーバを起動したら、 http://127.0.0.1:3000のフォームでexample.comと入力しLookupボタンを押してみましょう。 http://127.0.0.1:3000/whois/example.comにルーティングされて下の画像のように表示されれば成功です。

これでWHOIS情報をAPIサーバから取得して表示するWebアプリのフロントエンドが出来上がりました。今回はここまで。次回はフロントエンド部分をDockerイメージ化してGKEにデプロイしてみます。