既存サイトのフロントとAPIの分離を目的にNuxt.js(CSR)を導入しました。
ドメインやインフラは変えずにRailsが動いている環境で動かしたい。
簡単なのはRailsのpublicにgenerateで作成したHTMLやJSをコピーするなのですが、
動的なURL(_id.vue等)のHTMLは作成されず、URL直打ちすると404になります。
generate+publicにコピー
雑ですが、デプロイ時にこんな感じでコピーする。
% yarn generate % cp -r .output/public/ ../../../public/
generateファイルの確認
こんな感じでpagesに_id.vueが存在する場合、
CSRなので他のページからの遷移(Nuxtlinkなのでサーバーにリクエストされない)や
yarn devで起動している時は問題なく表示されますが、
% ll pages/infomations -rw-r--r-- 1 user staff 2422 1 22 17:42 _id.vue -rw-r--r-- 1 user staff 3407 1 22 17:42 index.vue
generateしたファイルに_idに対応するものは存在しないので、URL直打ちすると404になります。
力技で回避するには「数字/index.html」(index.html中身は全て同じ)を
コピって必要なだけ作る必要があります(増えていくので現実的ではないですね)
% ll .output/public/infomations -rw-r--r-- 1 user staff 1516 1 31 09:01 index.html
もっとも簡単な対応方法
デフォルトでは、404エラーの場合、public/404.htmlが返却されるので、
これがgenerateで作成したindex.htmlの内容になれば良い。
(存在しないURLへの直打ちは404ステータスが返却されますが仕方ない)
下記で構築した時と同じ理屈です。
CloudFront(S3オリジン)構築とawsコマンド(S3, CloudFront)メモ
> 追記: Nuxtでトップ以外のURLを直打ちすると403になる
% yarn generate % cp -r .output/public/_nuxt ../../../public/ % cp -a .output/public/index.html ../../../public/ % cp -a .output/public/index.html ../../../public/404.html
development環境ではRailsのエラー画面が出てしまうので確認できませんが、
production環境でページが表示されるようになりました。
メモ:CircleCIでyarn test(jest)が終わらない
オプション追加で解消しました。workerが作られるとダメっぽい。
yarn test --runInBand
このフラグがない場合、Jest はジョブを実行している仮想マシン全体に CPU リソースを割り当てようとします。
別名: -i。 子プロセスのworker poolを作成せずに現在のプロセスで全てのテストを1つずつ実行します。 デバッグ時に便利です。