環境
- 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 の場合は、インストーラーでしかインストールできないので、公式サイト からダウンロードしてインストールしておきます。
設定は特に気にせず、そのままインストールしました。
インストールが終わったら「Close」で終了します。
インストールが終わるとコマンドプロンプトから herokuコマンド が使えるようになります。
HerokuCLIにログイン
Heroku を使うために、事前にログインしておきます。
適当なディレクトリでコマンドプロンプトを開いて、次のコマンドを入力し Heroku にログインします。
heroku login
エンターキーを押すとブラウザが立ち上がり Heroku へのログインを要求されます。
Heroku へのログインに成功すると、コマンドプロンプトの方に反映されます。
これで HerokuCLI の準備が完了しました。
Vueプロジェクトの作成
今回は Vueプロジェクト をデプロイしたいので、軽く作成しちゃいます。
vue init webpack vueheroku
cd vueheroku
npm run dev
ついでに一度、ビルドもしておきます。
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);
続いて「package.json」も修正します。
"start": "npm run dev",
↓↓↓
"start": "node server.js",
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
「.gitignore」から「/dist/」を削除して、distフォルダも Git管理できるようにします。
デプロイ
Webアプリを Heroku にデプロイして公開します。
Herokuアプリ の作成
次のコマンドで Heroku にアプリを作成します。
heroku create
このように、Heroku の方にアプリが作成されます。
デプロイ
次のコマンドで Git にコードをプッシュし、Heroku にデプロイします。
git push heroku main
次のコマンドで Heroku にデプロイされたWebアプリを、ブラウザで開くことができます。
heroku open
