自作のポートフォリオをHerokuからNetlifyに移行させようとNuxtjsの公式サイトに沿って設定を進めていきました。

デプロイ前の設定（Nuxt.jsの場合）

加えて

Nuxt.config.js

export default {
  generate: {
    fallback: true
  }
}

いざデプロイ！！

上記設定をして、デプロイしたのですが、デプロイ後、Top画面が何故か404に....

エラーを見てみると、apiのURIのホスト名が自分のサイト名になっていて正常なレスポンスが返ってなかったみたいだ。

でもNuxt.config.jsには

Nuxt.config.js

proxy: {
    "/api/": {
      target: "https://hogehoge.com/v2/",
      pathRewrite: { "^/api/": "" }
    }
}

のように設定していたので、このあたりは設定必要ないと思っていたのですが、NetlifyのページにURLのリライト設定の仕方が書いてあったので、早速試す！

アプリのルートパスにnetlify.tomlファイルを作成。

作成したファイルの中身に

netlify.toml

[[redirects]]
  from = "/api/*"
  to = "https://hogehoge.com/v2/:splat"
  status = 200
  force = true
  headers = {X-From = "Netlify"}

と記述するだけでOK！ fromの*とtoの:splatが対応する形になります。

上記設定できたら、

git add .
git commit -m "create netlify config"
git push origin master

でリモートリポジトリに反映。

NetlifyではGithubと連動しており、リポジトリが更新されると自動的にビルドされるので、デプロイが完了するのを待つだけ。

無事うまく表示されて正常に表示されました。

めでたしめでたし