Closed15
VueCLIで作成したアプリを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のログイン画面が開かれる。
以下の画面が表示されたら正常にログインできている
Logging in... done
Logged in as '自分のメールアドレス'
ログインに成功した。
あーるデプロイする下準備
以下のページにHerokuへのデプロイ方法が載っていたため参考にしてすすめる。
あーる必要なファイルの生成
デプロイするのに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
ブラウザが起動してアプリのページが表示されれば正常にアプリが作られている。
アプリが作成されブラウザからも確認できた。
あーるHerokuアプリにビルドパックを導入
Herokuで動かすためにビルドパックが必要な模様。
ドキュメントを参考に以下の2つを導入する。
ターミナルから以下のコマンドを実行。
$ 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
Vue CLI で作成したプロジェクトのデプロイに成功した。
あーる補足
デプロイした後にアプリの名前を変えたい。
デフォルトだとランダムでアプリの名前がつけられているので変更したい。
ダッシュボードから変更するとGit remoteの方に反映されないため、ターミナルから変更する。
$ heroku apps:rename 変更したい名前
このスクラップは2021/01/30にクローズされました