Contents Menu

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

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

  • ブランチをGithubのリポジトリにpushする。デプロイ対象対象ブランチはmaster
  • ビルドコマンドは npm run build
  • 公開ディレクトリはdistに設定。

加えて

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と連動しており、リポジトリが更新されると自動的に ビルドされるので、デプロイが完了するのを待つだけ。

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

めでたしめでたし

関連記事