이게 뭐야

Vue.js의 응용 프로그램을 신속하게 Heroku에 게시하는 것을 목표로합니다.
이용 씬으로서는, 프로토 타입을 재빠르게 작성해 누군가에게 보여주거나, 뭔가 한 느낌을 얻고 싶은 경우를 상정하고 있습니다.

개발 환경 확인

이후의 순서에서는 각각 이하의 환경을 전제로서 진행해 갑니다.
다른 경우에는 작동하지 않을 수 있으므로주의하시기 바랍니다.

Node.js (10.x)

Yarn (1.13.0)

Vue CLI (3.x)

Heroku CLI (7.x)

Git

$ node -v
v10.15.0

$ yarn -v
1.13.0

$ vue -V
3.4.1

$ heroku -v
heroku/7.22.0 darwin-x64 node-v11.9.0

Vue CLI가 없으면 다음 명령으로 설치할 수 있습니다 (자세한 내용은 공식 사이트를 참조하십시오.).

$ yarn global add @vue/cli

절차

애플리케이션 만들기

vue create 를 실행하기만 하면 됩니다. 모든 작업 디렉토리에서 다음을 수행합시다.

$ vue create my-app

수중에서 움직이는 것만이라면 이것으로 완료입니다. yarn serve 를 실행하면 응용 프로그램이 시작되고 브라우저에서 localhost:8080에 액세스하면 확인할 수 있습니다.

$ yarn serve

이런 화면이 나타났나요?

웹 서버 준비

Heroku에서 작동하기 위해 Express를 소개합니다. package.json에도 자동으로 나열됩니다.

$ yarn add express

Express 설정 파일을 준비합니다.

$ touch server.js

server.js 에는 다음과 같이 기술합니다.

server.js

const express = require('express');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + "/dist/"));
app.listen(port);

package.json에 다음을 추가합니다.start는 Heroku가 응용 프로그램을 시작할 때 실행하는 명령입니다.build 는 start 의 앞에 빌드해 달라고 하기 위해 기재합니다.

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "postinstall": "yarn build",
    "start": "node server.js"
  }

Heroku에 배포할 준비가 되었습니다.
그런 다음 Heroku에 로그인하여 응용 프로그램을 만들고 배포합니다. 수고하셨습니다! !

$ heroku login

$ heroku create

$ git push heroku master

$heroku open

참고문헌

htps : // cぃ. 아 js. rg/

htps : //에서 v 선 r. 헤로쿠. 코 m / r 치 c ぇ s / 헤로 쿠 - c ぃ