既存サイトのフロントと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

テストデータの収集 – CircleCI

このフラグがない場合、Jest はジョブを実行している仮想マシン全体に CPU リソースを割り当てようとします。

Jest CLI オプション · Jest

別名: -i。 子プロセスのworker poolを作成せずに現在のプロセスで全てのテストを1つずつ実行します。 デバッグ時に便利です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です