Zenn
Closed15

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

Heroku
Node.js
Vue.js
WSL 2
あーるあーる

現状

  • 以前 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

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

あーるあーる

デプロイできたかの確認

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

$ heroku open

deployed app

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

あーるあーる

補足

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

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

$ heroku apps:rename 変更したい名前
このスクラップは2021/01/30にクローズされました