如何将我的Vite- React和类型记录应用部署到Heroku？

Question

我正在努力将我的前端vite应用程序部署到heroku，因为它似乎在寻找一个开始脚本，而vite并没有真正的脚本。

这些是我要得到的日志：

2022-08-23T23:34:35.000000+00:00 app[api]: Build succeeded
2022-08-23T23:34:35.042812+00:00 heroku[web.1]: Starting process with command `npm start`
2022-08-23T23:34:36.672295+00:00 app[web.1]: npm WARN config production Use `--omit=dev` instead.
2022-08-23T23:34:36.690924+00:00 app[web.1]: npm ERR! Missing script: "start"
2022-08-23T23:34:36.691004+00:00 app[web.1]: npm ERR!
2022-08-23T23:34:36.691142+00:00 app[web.1]: npm ERR! Did you mean one of these?
2022-08-23T23:34:36.691243+00:00 app[web.1]: npm ERR!     npm star # Mark your favorite packages
2022-08-23T23:34:36.691273+00:00 app[web.1]: npm ERR!     npm stars # View packages marked as favorites
2022-08-23T23:34:36.691308+00:00 app[web.1]: npm ERR!
2022-08-23T23:34:36.691345+00:00 app[web.1]: npm ERR! To see a list of scripts, run:
2022-08-23T23:34:36.691382+00:00 app[web.1]: npm ERR!   npm run
2022-08-23T23:34:36.692657+00:00 app[web.1]:
2022-08-23T23:34:36.692823+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2022-08-23T23:34:36.692964+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2022-08-23T23_34_36_639Z-debug-0.log
2022-08-23T23:34:36.822926+00:00 heroku[web.1]: Process exited with status 1
2022-08-23T23:34:36.901286+00:00 heroku[web.1]: State changed from starting to crashed

这就是我的package.json：

{
  "name": "JJ app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "vite": "^3.0.7",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "engines": {
    "node": "18.x"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.2",
    "@types/axios": "^0.14.0",
    "axios": "^0.27.2",
    "eslint-config-react-typescript": "^1.0.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "w3-css": "^4.1.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.1",
    "typescript": "^4.6.4"
  }
}

我应该如何设置脚本来解决这个问题？

Answer 1

在名为Procfile的项目根目录下创建一个特殊文件，并将其放入以下内容：

web: vite preview --port $PORT

我对Heroku没有经验。我知道，因为它被记录在Heroku帮助中心

• https://devcenter.heroku.com/articles/getting-started-with-nodejs?singlepage=true

• https://devcenter.heroku.com/articles/procfile

当然，您需要了解一些关于vite preview命令的知识。

• https://vitejs.dev/guide/static-deploy.html#testing-the-app-locally

上面的链接可以通过搜索“heroku部署节点”和“vite deploy”获得。希望分享我的过程将帮助你学会如何摆脱自己下次。干杯。