Closed15

VueCLIで作成したアプリをHerokuにデプロイしてみるまで

やりたいこと

以前こちらの記事内で作成したアプリを
Herokuにデプロイして動かしたい。

環境

  • Windows10 20H2
  • WSL2(Ubuntu 20.04.1 LTS)
  • Vue CLI 4.5.10

現状

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

インストール

Heroku CLIをWSL2にインストールしたい

どうやらWSL2ではsnapコマンドは使えない模様。

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

代替案として挙げられている

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

を実行してみる。

インストールできたかの確認

バージョン確認

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

インストールに成功した模様。

Herokuへログイン

記憶を頼りにログイン処理

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

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

以下の画面が表示されたら正常にログインできている

Logged In

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

ログインに成功した。

必要なファイルの生成

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

$ touch static.json

作成したファイルを以下のように編集する。

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

static.jsonをGitに追加する。

$ git add static.json
$ git commit -m "add static configuration"

Herokuアプリを作成

Herokuへログインしデプロイ対象のプロジェクトディレクトリで以下のコマンドを実行。

$ heroku create
Creating app... done

プロジェクトが生成される。

$ heroku open

ブラウザが起動してアプリのページが表示されれば正常にアプリが作られている。

created app

アプリが作成されブラウザからも確認できた。

Herokuアプリにビルドパックを導入

Herokuで動かすためにビルドパックが必要な模様。
ドキュメントを参考に以下の2つを導入する。

https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-static

ターミナルから以下のコマンドを実行。

$ heroku buildpacks:add heroku/nodejs

Buildpack added. Next release on shielded-forest-06965 will use heroku/nodejs.
Run git push heroku main to create a new release using this buildpack.
$ heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

Buildpack added. Next release on shielded-forest-06965 will use:
  1. heroku/nodejs
  2. https://github.com/heroku/heroku-buildpack-static
Run git push heroku main to create a new release using these buildpacks.

Herokuへデプロイする

$ git push heroku main

ドキュメントではmasterブランチにプッシュしているが、現在はmainブランチなので注意

デプロイの処理が行われる、時間がかかるため少し待つ。

デプロイできたかの確認

ブラウザからアクセスして確認してみる。

$ heroku open

deployed app

Vue CLI で作成したプロジェクトのデプロイに成功した。

補足

デプロイした後にアプリの名前を変えたい。
デフォルトだとランダムでアプリの名前がつけられているので変更したい。

ダッシュボードから変更するとGit remoteの方に反映されないため、ターミナルから変更する。

$ heroku apps:rename 変更したい名前
このスクラップは2021/01/30にクローズされました
作成者以外のコメントは許可されていません