NuxtアプリをHerokuでデプロイしてみた！

みなさんこんにちは！
イザナギです。
現在もコロナウイルスが世界中で蔓延していて大変ですよね。
私もすごく心配です。
みなさんも、気をつけてくださいね！
さて、今回ですが現在まで作成してきたNuxt.jsを用いたWebアプリケーションを開発しWeb上へデプロイしました！
やったー！（そんな難しいことは何もしてないんですけどねwww）
今回はそのことについてまとめていきたいと思います！

Nuxt.jsをHerokuにデプロイ

まずは、Nuxt.jsで作成したものをWeb上にデプロイしていきます。
今回は、Herokuを用いてデプロイしました。
なので、Herokuでのデプロイ方法も書いていきます。

Herokuに登録

まずはHerokuに登録しましょう！
クラウド・アプリケーション・プラットフォーム | Heroku
Herokuへの登録は今回は載せませんが、以下の記事などを参考にして見てください！
Heroku初心者がHello, Herokuをしてみる - Qiita

Herokuで新規アプリを作成

Herokuにログインしたら新規アプリを作りましょう。
新規アプリは、下記画像のように「Create new app」からできます。

その後は、手順に従ってください。

Heroku CLIをインストール

まずは、ターミナル （コマンドプロンプト）でHeroku CLIをインストールします。

brew install heroku/brew/heroku

これは、ターミナル （コマンドプロンプト）などで「heroku」コマンドを利用できるようにするものらしいです。
インストールが終わりましたら以下のコマンドを起動し、herokuにログインします。

heroku login

コマンドを起動すると以下の画面が出てきますので「log in」を押します。

以下の画面になればログイン完了です！

Nuxt.jsで設定

package.json

Nuxtプロジェクトの中の「<strong>package.json</strong>」に以下の項目を追加します。

"scripts": {
　　　　　〜省略〜  
//追加  
  "heroku-postbuild": "npm run build"
}

Procfile

プロジェクト直下に「Procfile」ファイルを追加し、以下を書き込みます。

web: nuxt start

これで、Nuxt.js側での設定は終了です。

環境変数等の設定

ターミナル を開き以下のコマンドを実行します。

heroku config:set NPM_CONFIG_PRODUCTION=false$ heroku config:set HOST=0.0.0.0$ heroku config:set NODE_ENV=production

こちらは公式にも書いてある手順ですね。
Deploy Nuxt on Heroku
もし、Nuxt側で「.env」ファイルなど環境変数を使用している場合は、Heroku側でも適応させる設定が必要になります。
方法はいくつかあります！

• 「heroku-config」を使う
• 「コマンド：heroku config:set」を使う
• Herokuで手入力

まあ「.env」ファイルを作成しているのであれば、「heroku-config」を使う方法が一番簡単ですね！
とりあえず、一つ一つ簡単に説明していきます。

「heroku-config」を使う

「.env」ファイルなどが設定してある時に使います。
「.env」ファイルの設定をHerokuに簡単に反映できます！
まずは、ターミナル （コマンドプロンプト）で以下のコマンドを実行し、「heroku-config」をインストールします。

heroku plugins:install heroku-config

その後に、以下のコマンドを実行し「.env」ファイルの内容をHerokuに反映させます。

heroku config:push

これで、Heroku側で環境変数が使用できるようになりました！

「コマンド：heroku config:set」を使う

こちらはちょっと面倒な作業になります。
ターミナル（コマンドプロンプト）で以下のコマンドを実行し、一つ一つ設定していきます。

heroku config:set "環境変数" = "値"

複数あると結構めんどいですよね。

Herokuで手入力

こちらも比較的めんどいです。
Herokuで作ったアプリの設定画面を開き「setting」を開きます。
すると以下の画像同じものが出てくると思いますので、
「Reveal Config Vars」をクリックし、一つ一つ入力していきます。

Herokuにデプロイ

最後にHerokuにデプロイしていきます。

gitを利用

デプロイには「git」を利用しますので作成しておいてください。
プロジェクト下に移動し、以下のコマンドを実行します。

git init
git add . 
git commit -m '何らかのメッセージ'

Herokuのpush場所を登録

アプリを登録するHerokuプロジェクトを指定します。

heroku git:remote -a 'Herokuプロジェクト名'

あとは、Herokuにpushして終了！

git push heroku master

アプリを更新する時の注意！

「git add . 」「git commit -m '何らかのメッセージ'」などで、コミットを行わないと「git push heroku master」をしても反映されませんので注意してください！
＊私も何度悩まされたことかwww

まとめ

今回は、NuxtアプリをHerokuにアップした時の設定方法についてまとめていきました。
Web上へのデプロイはHerokuでしか行ったことがないのですが、簡単にできるのでいいですよね！
しかし、いきなりWeb上にデプロイを行ったので、エラーも発生してしまいました。
それは、記事が長くなりそうなので、次回書いていきたいと思います！
それでは、今回はここで筆を置かせていただきます！
最後まで記事をご覧いただきありがとうございました！