programing

vuejs 프로젝트를 heroku에 전개하는 방법

goodsources 2022. 8. 27. 10:24
반응형

vuejs 프로젝트를 heroku에 전개하는 방법

저는 https://github.com/misterGF/CoPilot에서 이 프로젝트를 진행하고 있습니다만, 이 프로젝트가 종료되었으므로 헤로쿠에 푸시하고 싶습니다.문제는 heroku에게 앱을 시작하라고 말하는 것입니다.

heroku의 예에서는 데모서버는 다음에서 정보를 취득한 후 실행됩니다.Procfile이 데이터가 포함되어 있습니다.

web: node index.js

그러나 vuejs 프로젝트에는 콘텐츠를 서버하는 index.js가 없습니다.

나는 주요 진입점만 가지고 있다.index.htmlprocfile은 HTML에서는 동작하지 않습니다.

또한 소규모 스태틱서버를 정의하여index.html파일입니다. 간단한 설정 예는,http-server:

npm install -S http-server

그리고 당신의Procfile다음과 같이 됩니다.

web: http-server ./ -p $PORT

패키지를 업데이트해야 합니다.예를 들어 express를 사용하여 파일을 처리하는 경우 다음과 같이 heroku에게 패키지에 대해 알려줍니다.

"scripts": {
   "postinstall": "npm install express"
 }
 // "start": "node server.js" (executing server.js) during start

server.displaces

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()
app.use(serveStatic(path.join(__dirname, 'dist')))

var port = process.env.PORT || 8000
app.listen(port)
console.log('server started ' + port)

건설하는 을 잊지 마세요.

빌드 컨피드에 대한 자세한 내용은 여기를 참조하십시오.빌드 프로세스 커스터마이즈 - Heroku


옵션의 경우는, 다음과 같이 http-server 를 글로벌하게 인스톨 할 수도 있습니다.

npm install -g http-server

및 Proc 파일을 업데이트하여 위의 답변과 같이 구성을 추가합니다.

알아두기 위해서:

  • npm 인스톨에서는, 「의존」과 「의존」이 모두 인스톨 됩니다.
  • npm install -- 프로덕션에서는 "의존관계"만 설치됩니다.
  • npm install --dev는 "devDependencies"만 설치합니다.

사용.http-server. 단, 패키지는 글로벌하게 설치되어 있지 않기 때문에 다음과 같이 패키지에 대한 풀패스를 사용해야 합니다.

web: ./node_modules/http-server/bin/http-server ./ -p $PORT

언급URL : https://stackoverflow.com/questions/46119350/how-to-deploy-a-vuejs-project-to-heroku

반응형