12日目: Nuxt.jsをLambdaで動かすようにしたい。TypeScriptで。

今日はフロント

前回まではGraphQLでのAPI側を実装してきた。ほとんど機能は無いけど、いったん形だけ作ろうと思い、フロントエンド側を作ってみることにする。

フロントエンドはNuxt.jsでサーバサイドレンダリングをする一方で、インフラはAWS Lambdaというサーバレスアーキテクチャな構成に仕様と思います。

実を言うとNuxt.jsをAWS Lambdaは以前やったことがありそのことをQiita記事にまとめました。

qiita.com

この記事のようにnpx create-nuxt-appをすることで同じようにできるかと思ったのですが、初回の構築時にExpressが選べなくなっていたりと変わっていました。どうやらnuxt.jsの仕様が変わったんですかね？

nuxtでexpress使うって最初のcreate-app時にないなぁって思ったら推奨されなくなったのか?

ちょっと使いたいから色々遣唐使よ。https://t.co/jzJ6iLdAvT

— よこやま (@hiroyky) 2020年8月1日

そういうわけで現時点では最新安定版のnuxt.2.14を使ってAWS Lambdaで動くNuxt.jsを構成していきたいと思う。できればTypeScriptで。ある程度まとまったらQiita記事を更新もしくは、新規作成しようかな。。

先ほどの自分のツイートのリンクにあるgithubイシューでは下記２つが紹介されていますね。ただ、この２つはexpressとnuxt紐付けているとはいえ、大きく違う。前者はexpressをサーバにしてその中でNuxtを動かす。後者はNuxtを動かして、そのミドルウェアとしてexpressを動かす。どっちが親になるかが違う感じ。今回はおそらく前者を採用するのが妥当。

• https://nuxtjs.org/api/nuxt-render
• https://nuxtjs.org/api/configuration-servermiddleware

色々調べた結果、こちらのリポジトリがNuxt.jsをexpress配下で動かしてサーバレスアーキテクチャとして稼働している実装をしているので参考にさせて頂いた。ただ、Vue側はTypeScriptで書けるように設定しているけど、express側はJavaScriptで書いている。

そこで、このリポジトリを参考にしながら作成したあと、express側もTypeScriptで実装できるように変更した。

そんな今回のプルリクはこちら。

github.com

なかなかの保存版では？？

なお、その後ここでの作業を一般化してQiita記事にしました。

qiita.com