More than 1 year has passed since last update.

Netlifyの設定で躓いた部分

Last updated at 2022-03-05Posted at 2022-03-05

仕事でNetlifyを使ってホスティングしているサービスがあるのですが、先人の方が作成してくれたものであり、それを保守する形になっています。

今回、Netlifyの知識をつけるべく、reactで作成したプロジェクト(create-react-app)をGitlabと連携してNetlifyでホスティングを行いました。
その際に躓いた部分をメモとして残しておきます。

最初

まず最初は、以下のシンプルな構成でした。

GitLab-Project
 ┗ react-app/
   ┗ src
   ┗ build
   ┗ pubic
     :

作成し終わったプロジェクトをNetlifyと紐付けて自動的に作成されたURLを押して画面を確認しようとしたところ、 Page Not Foundが表示されてしまいました。

https://code-log.hatenablog.com/entry/2018/12/04/170740 を参考にさせていただきました。
publicフォルダ内に_redirectファイルを作成し、その中に以下を記載することで解決(?)

/*    /index.html   200

ここで「?」となっているのは、上記の対応だけでは確認できなかったからです。
※実際に最後ホスティング完了後に_redirectを削除して再デプロイをしましたが、問題なく表示されていました。今回の根本的な対応は以下でした。

おそらく上記で表示されていた「Page Not Found」に関しては、ベースとなるディレクトリの情報を設定していなかったからでした・・・。
画面上でも設定できましたが、仕事上でも利用していた為、netlify.tomlに設定情報を記載することにしました。

当初は以下の設定を行いましたが、Netlify上のビルド時にCommand failed with exit code 254: npm run buildが出力されてしまいました。
当初

[build]
  base = "react-app/"
  publish = "build"
  command = "npm run build"

そのため、command部分を以下へ修正
変更後

[build]
  base = "react-app/"
  publish = "build"
  command = "CI= npm run build"

以上で、問題なくホスティングできました。

Gitlabの最終的なプロジェクト構成は以下となりました。

GitLab-Project
 ┗ react-app/
   ┗ src
   ┗ build
   ┗ public
     ┗ _redirect  ##設定しなくても問題ないかも
     :
 ┗ netlify.toml