Vue を使ったWebアプリを Heroku で公開

アプリ開発
スポンサーリンク

環境

  • Windows 11 Home 21H2 22000.527
  • Heroku CLI 7.53.0
  • Node.js v16.13.1
  • npm 8.3.0
  • git version 2.34.1.windows.1
  • vue cli 4.5.15

準備

Heroku CLI

Heroku にアプリをデプロイするには、Heroku CLI が必要です。

Windows の場合は、インストーラーでしかインストールできないので、公式サイト からダウンロードしてインストールしておきます。

Heroku CLI ダウンロード

設定は特に気にせず、そのままインストールしました。

Heroku CLI インストール

インストールが終わったら「Close」で終了します。

Heroku CLI インストール

インストールが終わるとコマンドプロンプトから herokuコマンド が使えるようになります。

HerokuCLIにログイン

Heroku を使うために、事前にログインしておきます。

適当なディレクトリでコマンドプロンプトを開いて、次のコマンドを入力し Heroku にログインします。

heroku login
heroku login

エンターキーを押すとブラウザが立ち上がり Heroku へのログインを要求されます。

Herokuログイン

Heroku へのログインに成功すると、コマンドプロンプトの方に反映されます。

Herokuログイン

これで HerokuCLI の準備が完了しました。

Vueプロジェクトの作成

今回は Vueプロジェクト をデプロイしたいので、軽く作成しちゃいます。

vue init webpack vueheroku
cd vueheroku
npm run dev
npm run dev

ついでに一度、ビルドもしておきます。

npm run build
npm run build

Vueプロジェクトの設定

このまま Heroku にデプロイしても動かないので、サーバーを追加します。

Express

npm install express --save

プロジェクトの直下に「server.js」を作成して、次のコードをコピペします。

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + '/dist'));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started ' + port);
server.js

続いて「package.json」も修正します。

"start": "npm run dev",
↓↓↓
"start": "node server.js",
package.json

Gitリポジトリの作成

Heruku にデプロイするには、ソースを Git にプッシュする必要があります。

次のコマンドで Gitリポジトリ を作成して、プッシュできる状態にします。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/noitaro/vueheroku.git
git push -u origin main
git push -u origin main

「.gitignore」から「/dist/」を削除して、distフォルダも Git管理できるようにします。

.gitignore

デプロイ

Webアプリを Heroku にデプロイして公開します。

Herokuアプリ の作成

次のコマンドで Heroku にアプリを作成します。

heroku create
heroku create

このように、Heroku の方にアプリが作成されます。

Herokuアプリ

デプロイ

次のコマンドで Git にコードをプッシュし、Heroku にデプロイします。

git push heroku main
git push heroku main

次のコマンドで Heroku にデプロイされたWebアプリを、ブラウザで開くことができます。

heroku open
heroku open
タイトルとURLをコピーしました