Heroku에 Vue.js 앱 배포

전제 조건:

힘내

노드

뷰 CLI

Heroku CLI

무료 Heroku 계정

시작하려면 Vue CLI를 사용하여 새 Vue 앱을 생성하십시오.

vue create <app-name>

CLI에서 미리 설정하라는 메시지가 표시되면 기본값을 선택합니다.

cd <app-name>

이제 새 프로젝트 디렉토리에 있으므로 이 앱을 실행하여 모든 것이 예상대로 작동하는지 확인하겠습니다. 하지만 먼저 npm start를 사용하여 웹 앱을 균일하게 실행하는 것을 좋아하며 Heroku도 마찬가지입니다. 안타깝게도 Vue 앱을 초기화할 때 시작 명령이 다릅니다(npm run serve). 빨리 바꾸자. 프로젝트 폴더에서 package.json 파일을 엽니다.

스크립트에 포함된 중괄호 블록은 오른쪽에 있는 명령의 별칭을 나타냅니다. serve 를 시작으로 바꾸면 됩니다. 다음과 같이 끝나야 합니다.

{
  "name": "vue-heroku",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
.
.
.
}

터미널로 돌아가서 실행해 보겠습니다.

npm start

http://localhost:8080으로 이동하면 Vue 생성 앱이 표시됩니다.



다음으로 Vue 앱은 간단한 프런트 엔드 전용 앱입니다. 서버를 통해 제공하거나 빌드 파일을 정적으로 제공할 수 있습니다. 훨씬 덜 번거로운 두 번째 옵션을 사용하겠습니다.

프로젝트에 하나의 파일을 추가하고 Heroku에 하나의 빌드팩을 추가하기만 하면 됩니다. 프로젝트 리포지토리의 루트에 static.json이라는 파일을 만듭니다. 이 콘텐츠를 여기에 추가합니다(official source).

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

이 시점에서 프로젝트 편집이 완료되었습니다. 다음을 수행하여 변경 사항을 Git에 커밋할 수 있습니다.

git add . && git commit -m "Heroku config"

프로덕션 빌드를 생성해 보겠습니다.

npm run build

마지막으로 Heroku가 있습니다. Heroku CLI가 있다고 가정하고 다음을 실행합니다.
헤로쿠 로그인

아무 키나 누르면 로그인할 수 있는 브라우저 창이 나타납니다.



CLI를 사용하여 새 Heroku 앱을 만들 준비가 되었습니다. 운영:

heroku create

매우 중요한 단계는 다음 두 명령을 실행하는 것입니다.

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

이렇게 하면 Heroku가 앱을 정적 앱으로 제공할 수 있습니다.



이제 마지막으로 배포 명령을 실행할 수 있습니다.

git push heroku master

원격 URL로 이동하면 Vue 앱이 표시됩니다.

다음은 mine 입니다. 또한 Heroku 대시보드에서 배포된 앱을 찾을 수 있습니다. 여기에는 더 많은 정보를 탐색하려는 경우 유용한 정보가 많이 포함되어 있습니다. 참고용 내 대시보드는 다음과 같습니다.



다음은 모든 수정 사항과 함께 이 기사에 사용된 Vue 앱이 포함된 Github repo에 대한 링크입니다.

방문해 주셔서 감사합니다. 계속 읽어주세요!

원본 소스: https://medium.com/better-programming/deploying-a-vue-js-app-to-heroku-d16f95c07a04