React+ViteをHerokuにデプロイしようとしたらエラーに悩まされた話

一端のエンジニアらしく自分でサービスを作ってみようとしてHerokuですぐつまづいたのでその備忘録

ディレクトリ構成の罠

herokuのアカウント作成・github連携はすんなりいき、いざ deploy branchボタンを押すとこんなエラーが

ERROR: Application not supported by 'heroku/nodejs' buildpack
 !     
 !     The 'heroku/nodejs' buildpack is set on this application, but was
 !     unable to detect a Node.js codebase.
 !         
 !     A Node.js app on Heroku requires a 'package.json' at the root of
 !     the directory structure.

package.jsonがルートディレクトリにない...？
それもそのはず。herokuと連携していはgithubのブランチではこんな構成を取っていた。

├── backend
│   ├── api
│   ├── backend
│   └── manage.py
├── frontend
│   ├── src
│   ├── index.html
│   ├── package.json
│   ├── ...
│ 
├── docker-compose.yaml
├── DockerfileDjango
├── DockerfileNode
├── ...

要はReactのコードをfrontendディレクトリの配下においていたせいでherokuがpackage.jsonを見つけれなかったというエラーだった。package.jsonがfrontendの下にいると教えるのが一番なのだけど、やり方がわからず断念。諦めてfrontend以下のコードを全部移動させてこんな感じに。

├── backend
│   ├── api
│   ├── backend
│   └── manage.py
├── src
├── index.html
├── package.json
├── ... 
├── docker-compose.yaml
├── DockerfileDjango
├── DockerfileNode
├── ...

これでデプロイは通った。

Application Error

デプロイが終わって早速URLを叩いてみるとこんな画面が

ログを確認するとcode=H14やらcode=H10のエラーが。
これはルートディレクトリにProcfileなるものを作ったり、package.jsonをいじったり、npmでライブラリを追加したら直った。

npm i serve

Procfile

web: npm start

package.json

"scripts": {
    "dev": "vite",
    "heroku-postbuild": "npm run build",
    "start": "serve -s build",
    "build": "tsc && vite build",
    "serve": "vite preview"
  }

404 page not found

何度もデプロイを試していると突然の404。 

エラーは直ったっぽいけど今度は404。今回の原因はViteにありそう。おそらくViteでbuildしたディレクトリを見つけれてないようだ。
Viteの公式ページによるとoutDirでビルド先を変更できるようだ。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  root: process.cwd(),
  plugins: [react()],
  build:{//この部分を追加
    outDir:"./build"
  },
  server:{
    host:'0.0.0.0'
  }
})

多分rootは書かなくてもいいと思う。デフォルトと同じだし。出力先をbuildディレクトリに設定。デフォルトではdistディレクトリが作られていて、それでherokuがビルド後のファイルを見つけれなくて404になっていたと思われる。

これでやっとこさ

herukuのデプロイが完了！