Tarokenlog

Contact

Vue Cli 3のプロジェクトをHerokuにデプロイする

VueJSの練習で「英語スピーキング・文法チェック」みたいなの作ってHerokuにデプロイしてみました。

この記事では「Vue Cli 3のアプリケーションをHerokuにデプロイする流れ」を解説しています。

使用するもの

  • git
  • Heroku
  • express
  • vue(vue cli 3)

＊vue cli 3の使用が前提です


準備

ターミナルでの作業が中心になります
gitがあるか確認

git

herokuアカウント・cliがあるか確認
まだならアカウントを作っておきましょう
heroku公式
heroku(コマンド)で確認

heroku

gitの準備

git init
git add .
git commit -m “First Commit”

.gitignoreファイルの編集

.gitignoreの中の/distを消す

＊これ大事！！

理由：Herokuが後で作るdistフォルダ内のファイルを使うから

これです

package.jsonファイルの編集

package.jsonファイルに”start”スクリプトを追加
＊heroku(デフォルト)にnodeベースのアプリケーションをpushした時にstartコマンドが実行される。

ここの下に"start": "node server.js”を追加

こんな感じ

Herokuがこのアプリケーションを受け取った時に、nodeベースのJSアプリケーションを判断し、startコマンドを実行する。
そして、nodeコマンドを実行し、server.jsファイルをコールする、という流れ。
＊server.jsファイルは後で作ります

expressを準備

node.jsのフレームワークで有名な「express」を使います

npm install --save express
or
yarn add express

server.jsの作成

ルートディレクトリにserver.jsファイルを作成
ここ

server.js

// expressの呼び込み
const express = require('express');
// PORTの設定
// もしenvにportが確立したらそのポートを、していなかったら8080を使う
const port = process.env.PORT || 8080;
// express()のインスタンス
const app = express();

// どこにアクセスさせるかの設定
// distフォルダ：コンパイルされたファイルが入る場所
app.use(express.static(__dirname + "/dist/"));

// SPAの時、ルーティングがうまくいかない時があるので以下の設定
// これをしていないと、https://~~~/aboutとかに行った時にリロードするとエラーがでる
// SPAだとaboutファイルを直で読み込んでいないから
// これでルート以外でリロードしてもindex.htmlを読み込んでちゃんとルーティングをしてくれる
// /.*/で全てのルートを指定。req(request), res(response)
app.get(/.*/, function(req, res) {
    res.sendfile(__dirname + "/dist/index.html");
});

// 一番上で指定したportをlisten
app.listen(port);

// 動いてるかどうかconsoleで見る
console.log("Server is up!!");

＊コメントに解説を書いています。

distディレクトリの作成

ターミナルで

npm run build
or
yarn build

全てのファイルをブラウザが読めるようにコンパイル・コンバートして、作成されたdistフォルダ内にポンポン入ります。

＊ファイルを更新・編集した時はこのコマンドを打ってdistフォルダも更新しないといけません。

gitに反映してHerokuにアップ

git add .
git commit -m "Updated for Heroku"

＊githubにリポジトリがあるならpush

git push origin master

無いならそのままHerokuコマンド

heroku create 誰も使ってなさそうな名前

＊ここで設定した名前がurlになります(30文字以内です)

creating 〇〇… doneと表示されたら完了

Herokuにpush

git statusで何も変更がないか確認

git push heroku master

これでHerokuに上がっているかと思います

urlは先ほど「heroku createで設定した名前＋herokuapp.com」です。

今回僕が作ったのはこれ(PCのChromeのみで動きますww)
https://english-app-demo.herokuapp.com/#/

以上で完了

urlに”#”が入っている時

vue-routerを使う時にデフォルトで”#”が入っているかと思います。

それが嫌な場合は、router.jsにmode: ‘history’,を追加します

例：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})

ファイルを更新したのでdistを更新

npm run build
or
yarn build
git add .
git commit -m “Fixed Routes”
git push heroku master

これでurlから#が無くなります。
https://english-app-demo.herokuapp.com/

以上です〜〜


Posted

in

Tags:

,