【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓とりあえずFetchする

フォームで受け取ったデータ（Prism IP、ユーザ名、パスワード）を使ってバックエンドにリクエスト行い、レスポンスを取得する Fetch を実装します
※SSR（サーバサイドレンダリング）までは実装は次で

Next.jsの実装とともに、フロントエンドとバックエンドのコンテナを分けたことによって少々手間がかかります（CORS問題）

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓
・ログインページをデザイン
・フォーム制御
・とりあえずFetch　←イマココ
・FetchからRouterでページ遷移
・SSR で Fetch する
・Layoutつくる

準備

今回の最終形態はコチラ(Github)で公開しています

この docker-compose.yml からコンテナたちを起動します

コンテナ frontend、backend のコンテナ内で
・フロントエンドの起動
"/usr/src/next-app/uuid"

# npm run dev

・バックエンドの起動
"/usr/src/flaskr"

# python app.py

ブラウザから「http://localhost:7778/」にアクセス

curl でレスポンスチェック

プログラムに組み込む前に、curlコマンドを使ってチェックします

まずはバックエンド側にテスト用に簡単なレスポンスを仕込みます
バックエンドコンテナ：＜flaskr/app.py＞

from flask import Flask
from flask import render_template, request
from flask import make_response, jsonify

.........
@app.route('/api/fetchtest')
def fetchtest():
    return make_response(jsonify('Fetch Success'))
.........

これでフロントエンドコンテナのコンソールから「http//コンテナ名:ポート番号/api/fetchtest」向けに、curlコマンド実行してやると、仕込んでおいたレスポンスを得られます

# curl http://backend:7777/api/fetchtest
"Fetch Success"

フロントエンドに実装

前回までで、フォームをサブミットすると、入力内容をコンソールに表示するだけだったこの部分の関数を編集していきます

フロントエンド：＜pages/index.tsx＞
コレを

  const onConnect: SubmitHandler<FormValues> = data => console.log(data)

こんな感じで

  const onConnect: SubmitHandler<FormValues> = async data => {
    console.log(data)
    const requestOptions = {
      method: "POST",
      headers: {'Content-Type' : 'application/json'},
      body: JSON.stringify(data)
    }
    const response = await fetch('http://backend:7777/api/fetchtest')
    if(response.status === 200) {
      const res_json = await response.json()
      console.log(res_json)
    }
  }