소개

Vue.js로 프런트를 만들 때, 자주 서버 경유로 외부 API 두드리고 싶은 일이 있어, 이번 그 구현 방법을 시도해 보았으므로 그 메모입니다.
Vue와 자주 함께 사용되는 프레임 워크로 express가 있지만, 이번에는 express 대신 fastify를 사용해 보았습니다!

그리고 외부 API로서 kintone에 대해 API를 두드리고 있습니다.

fastify란?

후발의 Node.js 프레임워크에서 아직 문서나 레퍼런스는 적지만, async/await 에 디폴트로 대응하고 있거나, express보다 퍼포먼스가 높거나 상당히 좋은 것 같다.
프레임워크의 비교에 대해서는, 이하의 사이트가 참고가 됩니다. express/koa/fastify 에 대해 세세하게 기재되어 있어 알기 쉬웠습니다.

▼ Node.js 프레임워크를 비교해 보인 각각의 특징
htps //w w. 와서 dly. 코 m / 코 m 파니에 s / 코 mpa ny_3239475 / 포 st_ archi c ぇ s / 179467

만든 것

이런 움직임을 하는 것입니다. kintone의 데이터가 Vue상(웹상)에서 확인할 수 있으면 OK입니다. 그리고는 좋아하는 대로 테이블 표시하거나 리스트 표시하거나.


구성은 이런 느낌입니다.
원래 크로스 도메인 제약에 의해 Web로부터 직접 API가 두드릴 수 없기 때문에, 서버측을 준비하지 않으면 안됩니다.
절차 흐르는 흐름을 글머리 기호로 쓰면 이렇게 됩니다. vue-cli 설치 작업 디렉토리 만들기 Vue 측 설정 axios 설치 HelloWorld.vue 수정 실행 fastify 측 설정 도구 설치 index.js 만들기 실행 동작 점검 전체 준비 그럼 바로. 우선은 vue-cli의 설치로부터 합니다. $npm i -g @vue/cli ※ 이미 글로벌로 들어가면 설치는 필요하지 않습니다. 작업 디렉토리를 만들고 이동합니다. $mkdir my_project; cd my_project 덧붙여서, 지금부터 작성하는 디렉토리 구성은 이런 느낌이 됩니다. my_project/ ├ front/ #프런트엔드용 └ back/ #백엔드용 ※ node_modules 관련은 쓰지 않지만 각각 존재합니다. Vue측(프런트엔드측) 설정 $ vue create front vue의 병아리가 생성됩니다. 이번에는 Vue에서 fastify에 대한 요청에 axios를 사용하기 때문에 그것도 설치합니다. $cd front $npm i --save axios src > components > HelloWorld.vue를 수정합니다. HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> <p> For a guide and recipes on how to configure / customize this project,<br> check out the <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. </p> <button @click="post">데이터 가져오기</button> <p>{{kin}}</p> </div> </template> <script> import axios from 'axios' export default { name: 'HelloWorld', data() { return { kin : '' } }, props: { msg: String, }, methods: { async post() { const kintoneData = await axios.post('http://localhost:3000/getData', {app: 836, id: 20}); this.kin = kintoneData; console.log(kintoneData); } } } </script> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style> 모처럼이므로 Vue에서 fastify에 객체를 전달하고 그것을 매개 변수에 API를 두드려 보았습니다. 템플리 그대로 이용하고 있는 것이지만, 변경하고 있는 점으로서는, HTML이 필요없는 부분 삭제 HTML에 버튼 배치 axios 가져오기 버튼과 방법의 연결 라든지입니다. ※ 사실은 api.js라든지 별도로 만들어 컴포넌트화해야 한다고 생각합니다만, 이번은 심플하게. 프런트 엔드 실행 수정이 끝나면 npm run serve로 실행하십시오. 아마 http://localhost:8080

fastify측(백엔드측)의 설정

필요한 도구를 설치합니다.

$ mkdir back; cd back
$ npm init
$ npm i --save fastify fastify-cors nodemon

# kintoneのSDK
$ npm i @kintone/rest-api-client

fastify : Node.js 프레임 워크

fastify-cors : fastify를 CORS 대응시키기위한 것

nodemon: 파일을 감시하고 변경이 있으면 스크립트를 재실행해주는 사람. 편리.

@kintone/rest-api-client: kitnone의 API를 쉽게 치는 도구입니다. kintone 사용하지 않으면 필요 없습니다.

백엔드에서 실행할 JS 파일을 만듭니다.

$ touch index.js

내용은 이런 느낌. 3000 포트를 사용합니다.

index.js

const fastify = require('fastify')();
fastify.register(require('fastify-cors'));

fastify.post('/getData', async (request, reply) => {
  // ここに外部APIへのリクエストを書く

  // 引数のreplyを使ってWeb側へデータを渡す
  reply.send({message: 'Hello World!'});
});

fastify.listen(3000);

kintone에 데이터 취득의 API를 두드리는 처리를 쓰면 이런 느낌.

index.js

// kintoneの設定
const {KintoneRestAPIClient} = require('@kintone/rest-api-client');
const client = new KintoneRestAPIClient({
  baseUrl: 'https://｛subdomain｝.cybozu.com',
  auth: {
    apiToken: '{api_token}'
  }
});

const fastify = require('fastify')();
fastify.register(require('fastify-cors'));

fastify.post('/getData', async (request, reply) => {
  // requestでVue側からオブジェクトを受け取る
  const data = await client.record.getRecord({app: request.body.app, id: request.body.id});
  console.log(data);
  reply.send({message: JSON.stringify(data)});
});

fastify.listen(3000);

npm start에서 nodemon을 사용하여 index.js가 움직이도록 package.json을 수정하십시오.

package.json

~~
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/nodemon/bin/nodemon.js index.js"
  },
~~

백엔드 실행

npm start 3000 포트에서 대기합니다.
nodemon을 사용하여 index.js를 수정하면 자동으로 npm start가 다시 실행되므로 매우 쉽습니다.

fastify측(백엔드측)만으로의 동작 체크

fastify의 메소드를 get 로 변경하면, 브라우저상에서 간단하게 동작 체크도 할 수 있습니다.

index.js

const fastify = require('fastify')();
fastify.register(require('fastify-cors'));

fastify.get('/test', async (request, reply) => {
  // ここに外部APIへのリクエストを書く

  // 引数のreplyを使ってWeb側へデータを渡す
  reply.send({message: 'Hello World!'});
});

fastify.listen(3000);

npm start 하고 http://localhost:3000/test 로 이동하여 reply.send() 의 내용이 표시되면 OK입니다.
※ /test 부분은 코드내에서 지정하고 있는 것에 적절히 변경해 주세요.
사이고에게 분위기는 express와 다르지 않네요. 역시 async/await가 디폴트로 사용할 수 있는 것이 강하다. 퍼포먼스에 대해서는 거기입니다 대단한 것을 만들지 않으니까 솔직히 모릅니다(´-ω-`) 이번은 localhost로 작성하고 있었으므로, ngrok라든지 사용해 https통신할 수 있도록(듯이) 해도 하고 싶다. Webhook이라든지 받고 싶다. 구현할 수 있으면 다시 기사화합니다. 그럼! ≧(+･` ཀ･´)≦ 여담 익스프레스 해설 기사를 찾고 있는 중, 불각으로도 이하의 사이트내의 이미지에 대해서 웃어 버렸다 htps : // 테카로 my. jp/마가지네/16119

타지마씨, 굉장히 스루 하는 얀! !