ngtokuの日記

主に雑記帳です。SNSではngtokuのID取れなかったんで、別のIDでやってます。

Lambda経由でYOLPを呼んでみる(ちょっとだけ Nuxt.js static HTML版)

AWS Nuxt.js

一個前のエントリ(↓)はNode.js上で動かしているが、静的HTMLにしてどこかのホストで動かす時の手順。
Lambda経由でYOLPを呼んでみる(ちょっとだけ Nuxt.js 版) - ngtokuの日記

まずnuxt_config.jsにrouterを足す。
本当はenvプロパティ(↓)を使ったり、
API: env プロパティ - Nuxt.js

doenv(↓)を使ったりするのが良いが、単純化のため今回はベタ打ちである。
GitHub - nuxt-community/dotenv-module: Loads your .env file into your application context

  router: {
    base: '/test/nuxt/', // https://xxxx.xxxx/test/nuxt/で動かしたい時
  },


これをしないと、静的出力されたhtmlでjavascriptのパスがこうなってしまう。

<script type="text/javascript" src="/_nuxt/xxxx.js">

試しにhtmlを一括置換で変更してみたり、htmlのDocumentRootに_nuxtディレクトリを作ってjavascriptを置いてみたりしたが、処理のどこかでエラーが起きるらしく、最終的に「This page could not be found」となってしまった。


それからgenerateすると、distの下に作成される。

$ yarn run generate
 INFO  Generating pages

✔ success Generated /
✨  Done in 16.92s.


最後に、dist以下にあるものをホストにアップロードすると動く。
今回の設定だと以下の様になる。xxxx.xxxxは自ホストに置き換える事。
https://xxxx.xxxx/test/nuxt/


Node.js上で動かす時は、nuxt_config.jsを変更前の状態に戻すか、 base: '/', とするか(envやdoenvで切り替えるのが良い)、いっそのことhttp://localhost:3000/test/nuxt/ で検証するか、お好みで選択。