【Vue.js & Nuxt.js】Herokuでデプロイする方法

Introduction

こんにちは、JJ(@JJ_1123_I)です! Herokuを使ったVue.jsでのデプロイ方法についてまとめたいと思います。
以下のサイトにに概要が記載されてますが、一連の流れで記載していきます。
Heroku へデプロイするには?

対象

  • Vue.jsでフロント側を開発した環境を手間なくデプロイしたい人
  • デプロイにあまり詳しくない人

Herokuとは?

一言で表すとPaaS(Platform as a Service)と呼ばれるサービスで、APを実行するためのプラットフォームです。ネットワーク関連の難しいことを考えることなく、作成したサイトを公開可能です。無料版でデプロイまで可能であり、個人開発の小さなWeb アプリケーションなどでは十分なスペックの環境を利用可能です。

Vue/js & Nuxtでサイト作成

簡単なプロジェクト作成方法は以下にまとめているのでご参考ください。
初心者でも躓かないVue.jsの環境構築方法

Herokuでプロジェクト作成

undefined.jpg
Herokuにログイン > new > Create New App > App name入力 > Create app

heroku-cliのインストール

The Heroku CLI
コンソールから以下のコマンドを実行してください。 Heroku Cliを利用しログインします。 以下が表示するので何もせずにEnterをします。
undefined.jpg
以下が表示するので「Login in」をクリックします。

Herokuの環境変数を設定

Heroku > settings
undefined.jpg

package.jsonに追加設定

Herokuにデプロイ

最新状態にコミットし、プッシュすればデプロイ完了です。

補足

Expressを使っているとCORSを有効にする必要があります。
その際は、nodo.jsに以下を追加すると有効に出来ました。
undefined.jpg
最後に「Open app」からデプロイされたサイトにアクセス出来ます。

まとめ

デプロイは自分にとってハードルが高いイメージがありましたが、Herokuを使うと簡単にデプロイ出来ました。皆さんもバンバン個人アプリを公開していきましょう!!

参考資料

https://qiita.com/watkazuki/items/de3e6b50f84fcc188fa5
https://qiita.com/MuuKojima/items/2b2e7bc0db8d5e97ada9

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です