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

JavaScript
この記事は約5分で読めます。

みなさんこんにちは!

イザナギです。

現在もコロナウイルスが世界中で蔓延していて大変ですよね。

私もすごく心配です。

みなさんも、気をつけてくださいね!

さて、今回ですが現在まで作成してきたNuxt.jsを用いたWebアプリケーションを開発しWeb上へデプロイしました!

やったー!(そんな難しいことは何もしてないんですけどねwww)

今回はそのことについてまとめていきたいと思います!

Nuxt.jsをHerokuにデプロイ

まずは、Nuxt.jsで作成したものをWeb上にデプロイしていきます。

今回は、Herokuを用いてデプロイしました。

なので、Herokuでのデプロイ方法も書いていきます。

Herokuに登録

まずはHerokuに登録しましょう!

クラウド・アプリケーション・プラットフォーム | Heroku
Heroku は、アプリケーションの開発から実行、運用までのすべてをクラウドで完結できる PaaS(サービスとしてのプラットフォーム)です。

Herokuへの登録は今回は載せませんが、以下の記事などを参考にして見てください!

Heroku初心者がHello, Herokuをしてみる - Qiita
はじめに Heroku初心者がHerokuで「Hello, Heroku」を表示させたいと思います。 まあ、あまり知見のない僕でもできるらしいのでメモしておこう。 基本的な使い方を書いていくので、今から入門する方はぜひ見て...

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プロジェクトの中の「package.json」に以下の項目を追加します。

 "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
How to deploy Nuxt.js 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上にデプロイを行ったので、エラーも発生してしまいました。

それは、記事が長くなりそうなので、次回書いていきたいと思います!

それでは、今回はここで筆を置かせていただきます!

最後まで記事をご覧いただきありがとうございました!

コメント

  1. […] NuxtアプリをHerokuでデプロイしてみた! […]

タイトルとURLをコピーしました