「API」の記事一覧

GitHub:nuxtjs-servermiddleware-api Nuxt.jsのserverMiddlewareを活用すると、Expressなどのサーバ用フレームワークを追加しなくても簡単に応答するサーバを立ち上げられます。Nuxt.js環境で開発している場合には手軽でとても便利です。 モックアップのAPIを設置することで、このような効果が期待できます 新規サービスなど、既存のDBが無い開発もデータを入れた状態で行えるバックエンドにAPIを用意してもらえるまで手を止めなくてよい 設置方法 Nuxt.JS開発環境へ、このようなJavaScriptを設置します。場所は、既存の pages middleware など予約されたディレクトリでなければどこでもOKです。 /api/sample.js export default function (req, res) { // req は Node.js の HTTPリクエストオブジェクトです console.log(req.url) // res は Node.js の HTTPレスポンスオブジェクトです res.writeHead(200, { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'text/plain' }); res.write('SAMPLE'); res.end(); // next は 次のミドルウェアを呼び出すための関数です。 // あなたのミドルウェアが最後でない場合、関数の最後で next を呼び出すのを忘れないでください！ // next(); } nuxt.config.jsへserverMiddlewareの項目を追加し、設置したjsファイルと任意のパスを指定します。 nuxt.config.js export default { ... serverMiddleware: [ { path: '/api/sample', handler: '~/api/sample.js' }, { path: '/api/news', handler: '~/api/news.js' }, ], ... } これで、/api/sampleへアクセスするとSAMPLEと表示されます。resとしてJSONを返すようにしたらAPIのように使うことができます。 Vuexのactionでaxiosから呼ぶときも、このようにルート相対パスでOK。 /store/sample.js ... const actions = { async getSample({ commit }, payload) { const api = '/api/sample'; const params = { page: payload.page || 1, filter: JSON.stringify(payload.filter), max: 10, }; const data = await this.$axios.get(api, { params }).then(res => res.data.response); commit('setRecord', data.records); commit('setTotal', data.total); commit('setPage', data.page); }, } ... APIがわりに使いたいときは 最後にnuxt()しない テンプレートの最後にある nuxt();がそのまま残っているとnuxtのres.setHeaderと自分で書いたresの処理が重複しこのようなエラーになるので、削除しておきます。 ERROR Cannot set headers after they are sent to the client 環境変数でaxiosのbaseURLを設定 serverMiddlewareで設定した参照先は、デフォルトでルートがhttp://localhost:3000になっています。 そのため、何もしないとlocalhostではないアドレスからルート相対パスで参照するとhttp://localhost:3000/api/xxxを探しに行ってリンク切れになります。 対策としてaxiosのbaseURLを.envから設定できるようにしておくとstoreでのaxiosからの参照はルート相対パスに統一しつつ、環境に応じてパスを調節できて便利です。 .env # axios endpoint foo BFF AXIOS_BASE_URL=http://192.168.11.26:8000 nuxt.config.js export default { ... /* ** Axios module configuration ** See https://axios.nuxtjs.org/options */ axios: { baseURL: process.env.AXIOS_BASE_URL, }, ... } クラウドでデプロイしたいときも、このように環境変数を設定すると参照できます。 ダミーのニュースJSONを返すAPI GitHubへサンプルをおいてます。ページネーションなどのパラメータに応じてJSONを返すAPIのソースをごらんいただけます。 GitHub:nuxtjs-servermiddleware-apiDEMO Nuxt JS serverMiddleware mockup API

webdev

「API」の記事一覧

Nuxt.jsのserverMiddlewareでモックアップのAPIを設置