Vueで作成したSPAをHerokuへデプロイし動かすまで

公開:2021/02/01
更新:2021/02/06
5 min読了の目安(約5200字TECH技術記事

はじめに

Vue で作成した SPA をデプロイする際には NetlifyGithub Pages といったホスティングサービスを使う方法があります。

その中で今回は Heroku にてデプロイする方法を調べてみました。
以前、こちらの記事で VueCLI を使って開発した SPA を実際にデプロイしていきます。

以前 Heroku にアプリをデプロイした経験はありましたが、Vue.js で作成した SPA をデプロイした経験がなかったため、今回は Heroku にデプロイし動かせるところまでについてまとめてみます。

環境

  • Windows10 バージョン 20H2
  • WSL2 (Ubuntu 20.04.1 LTS (Focal Fossa))
  • Node.js v12.18.4
  • Vue CLI 4.5.10
  • heroku CLI 7.47.11
  • Git 2.25.1

現状

  • 以前 Vagrant を使って Heoku に PHP 製アプリをデプロイした経験はあり
  • WSL2 で Heroku を使ったことはない
  • Vue CLI で作った SPA を Heroku にデプロイできるのかわからない

インストール

Heroku CLI を WSL2 にインストール

Heroku は各プラットフォーム向けに Heroku CLI というツールを提供しているためこちらを利用します。
Heroku 公式ドキュメントに各プラットフォームごとの CLI をインストールする方法が列挙されているのでこちらを参考に進めます。

https://devcenter.heroku.com/articles/heroku-cli?source=post_page#download-and-install

ドキュメントに従い以下のコマンドをターミナルで実行。

$ sudo snap install --classic heroku

以下のようなエラーが出ました。

error: cannot communicate with server: Post http://localhost/v2/snaps/heroku: dial unix /run/snapd.socket: connect: no such file or directory

どうやら WSL2 では snapコマンド がうまく動作しない模様です。
そこで以下のコマンドでスタンドアロンインストールを実行します。

$ sudo curl https://cli-assets.heroku.com/install.sh | sh

バージョン確認

インストールに成功したかを確認するために以下のコマンドで CLI のバージョンを表示してみます。

$ heroku --version heroku/7.47.11 linux-x64 node-v12.16.2

インストールに成功し、WSL2 上にて Heroku CLI が使えるようになりました。

デプロイする下準備

それでは Heroku CLI を実際に動かしてデプロイする準備をしていきます。

Heroku へログイン

以下のページから Heroku アカウントを登録します。

https://signup.heroku.com/

アカウントの登録ができたらターミナルからログインをしていきます。

$ heroku login
  heroku: Press any key to open up the browser to login or q to exit:
  # ブラウザにてログイン処理

q以外のキーを押すと自動的にデフォルトのブラウザで Heroku のログイン画面が開かれるのでブラウザ上でアカウントへログインします。

以下の画面が表示されたら正常にログインできています。
ログイン成功後の画面

Logging in... done
  Logged in as '自分のメールアドレス'

ターミナルでもログインが成功していることを確認できます。

必要なファイルの生成

以下のページに Vue CLI で構築したアプリを Heroku へデプロイする方法が載っていたため参考にして進めていきます。

https://cli.vuejs.org/guide/deployment.html#heroku

デプロイするのに static.json というファイルが必要みたいなので、Vue プロジェクトのルートディレクトリに移動して static.json を作成します。

$ touch static.json

作成したファイルを以下のように編集して保存します。

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

static.json は Heroku へのデプロイで必要になるため Git へ追加しておきます。

ここからは作成したアプリで Git コマンドが使える環境を前提に進めます。
Git のインストール、git init でプロジェクトの初期化が済んでいる状態で進めてください。

先程作成した static.json をステージング。

$ git add static.json

コミットする。

$ git commit -m "add static configuration"

Heroku アプリを作成

ターミナルから Heroku へログインしデプロイ対象のプロジェクトのディレクトリで以下のコマンドを実行します。

$ heroku create
Creating app... done

コマンド1つで Heroku プロジェクトが生成されます。
以下のコマンドでアプリのページを開くことができます。

$ heroku open

デフォルトのブラウザが起動してアプリのページが表示されれば正常にアプリが作成されています。
アプリの初期ページを開いた様子
Web ブラウザからアクセスできることが確認できれば OK です。

アプリをビルドする環境を作成

Vue で作成した SPA はビルドする必要があります。
Heroku 上でアプリをビルドするために以下のビルドパックが必要になるため、それぞれ追加します。

https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-nodejs
$ heroku buildpacks:add heroku/nodejs

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

上の2つのビルドパックを導入することでアプリをビルドできる環境が出来上がりました。

ビルドパックは heroku/node.jsheroku-buildpack-static の順番に追加してください。追加する順番を間違うと上手く動作しない可能性があります。

Heroku へデプロイする

Heroku へデプロイしていきます。

以下の Git コマンドを実行します。

$ git push heroku main

すぐに Heroku へデプロイ処理が行われます。
このときにビルドも同時に行われ最新の distディレクトリ がデプロイされます。

ドキュメントでは masterブランチ にプッシュしていますが、現在は mainブランチ に変更されているため注意してください

デプロイできたかの確認

ブラウザからアプリのページにアクセスして確認してみます。

以下のコマンドを実行することでデフォルトのブラウザでアプリを確認できます。

$ heroku open

ブラウザからデプロイしたアプリを開いた様子

VueCLI で作成したプロジェクトがブラウザに表示され動作が確認できました。

さいごに

今回 Heroku を使って Vue で作成した SPA のデプロイ手順をまとめました。
今回使用したのが簡単な SPA だったためすぐにデプロイできました。インターネット上で見る記事では Express を使用してデプロイしている例が多くありましたが、ビルドパックを使うことで簡単にビルド、静的ホスティングまで行ってくれるのに驚きました。

今では優良なホスティングサービスが多く存在するため、Heroku 以外の選択肢もたくさんあります。今回久しぶりにデプロイを行う中でホスティングサービスの充実によってデプロイのハードルが下がってきていると感じました。

お役に立てれば幸いです。最後まで読んでいただきありがとうございました。

補足: デプロイ後にアプリ名を変更したい

デフォルトだとランダムでアプリの名前が付与されます。
変更したい場合は CLI を使い以下の手順で変更可能です。

$ heroku apps:rename 変更したい名前

アプリの名前が変わるとアドレスも変わります。
新しいアプリページは名前の変更後にダッシュボード or heroku open で開くことができます。
アプリのダッシュボードから変更すると Git remote へ変更がうまく反映されないため、上記のコマンドを使用し、Heroku CLI から変更するのが無難です。

参考ドキュメント