今回達成すること
Nuxt.jsをHerokuにデプロイするために、Dockerfileとheroku.ymlを編集します。
この記事を通してNuxt.jsのデプロイに必要な知識を習得します。
作業に入る前に全体のデプロイ手順を確認しておきましょう。
- Nuxt.jsのDockerfileに本番用のコマンドを追記する（今回）
- Nuxt.js用heroku.ymlの作成（今回）
- Herokuアプリケーションの作成
- Nuxt.jsアプリをHerokuにpushする
- RailsにAPIドメインをセットする
※ この記事では主にNuxt.js（frontディレクトリ内）のファイルを編集します。
Nuxt.jsのDockerfileに本番用コマンドを追加する
「front」直下にある
2021年1月22日 修正
環境変数
NPM_CONFIG_PRODUCTIONをDcokerfileから削除し、heroku.ymlに移動しました。
front/Dockerfile
FROM node:14.4.0-alpine
ARG WORKDIR
ARG CONTAINER_PORT
ARG API_URL
ENV HOME=/${WORKDIR} \
LANG=C.UTF-8 \
TZ=Asia/Tokyo \
HOST=0.0.0.0 \
API_URL=${API_URL}
# ENV check
RUN echo ${HOME}
RUN echo ${CONTAINER_PORT}
RUN echo ${API_URL}
WORKDIR ${HOME}
# 追加
COPY package*.json ./
RUN yarn install
COPY . ./
RUN yarn run build
# ここまで
EXPOSE ${CONTAINER_PORT}
-
COPY package*.json ./... packageから始まる全てのファイルをワークディレクトリ 直下にコピー。-
./... カレントフォルダの直下を指定した相対パス。
-
-
RUN yarn install... パッケージをインストール。package.jsonをコピーした後で実行する。 -
COPY . ./... ファイル一式をコンテナに全てコピー。同じファイル名が存在する場合は上書きされる。 -
RUN yarn run build... （後述）
RUN yarn run buildは何をしているのか?
上記Dockerfileで記述したRUN yarn run buildは、yarn run buildを実行するようRUN命令で指定しています。
yarn run buildは、package.jsonのbuildスクリプトを実行しています。
front/package.json
"scripts": {
"dev": "nuxt",
"build": "nuxt build", // ←ココ
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
つまりyarn run buildを実行すると、nuxt buildが実行されているのですね。
このnuxt buildは、Nuxt.jsをWebpackでビルド（構築）して、jsとcssをHeroku向けにミニファイルにしています。
これによりHerokuにもNuxt.jsアプリを表示することができるのです。
Nuxt.js用のheroku.ymlを作成する
「front」ディレクトリ直下に
まずは移動しましょう。
api $ cd ../front
front $ touch heroku.yml
作成したファイルを開いてこのように編集します。
2021年1月22日 修正
setup.configキーを追加し、本番環境用の環境変数を追加しました。
front/heroku.yml
setup:
config:
NODE_ENV: production
NPM_CONFIG_PRODUCTION: false
build:
docker:
web: Dockerfile
config:
WORKDIR: app
API_URL: "https://<前回作成したRailsアプリの名前>.herokuapp.com"
run:
web: yarn run start
build.docker, config... こちらの記事で説明しています。yarn run start... Nuxt.jsの本番環境での起動コマンド。
Nuxt.jsをHerokuにデプロイする場合の環境変数
Nuxt.jsをHerokuにデプロイする場合、3つの環境変数を必要とします。
-
HOST=0.0.0.0... （必須）Dockerfileに記述済みのため追記の必要なし。 -
NODE_ENV=production... （必須）Node.jsに現在の環境を定義する。Herokuがデフォルトで設定するため、追記の必要なし。2021年1月22日 追記
Herokuがデフォルトで
NODE_ENV=productionを設定する場合は、stackがheroku（Heroku側が用意した環境）の場合のみです。Docker環境をデプロイする場合、自分で用意する必要があります。情報が間違っており、申し訳ありません。 -
NPM_CONFIG_PRODUCTION=false（任意）パッケージのインストールを操作するフラグ。
NPM_CONFIG_PRODUCTION=falseとは何か
このNPM_CONFIG_PRODUCTION=falseとは何なのか? 挙動について説明します。
Herokuのデフォルトの挙動
Node.jsのアプリをデプロイする場合、Herokuはpackege.jsonに書かれた全てのパッケージをインストールします。
そしてビルドを完了したのちにdevDependenciesに書かれたパッケージを削除し、デプロイを実行します。
問題点
既にインストールされている@nuxtjs/eslint-configや、後でインストールする@nuxtjs/vuetifyなど、devDependenciesに書かれたモジュールが無いよ。とエラーを吐くことがあります。
対応策
2つあります。
- nuxt.config.jsの設定を開発・本番で切り替えるよう書き換えたり、パッケージを
dependenciesにインストールする。 NPM_CONFIG_PRODUCTION=falseの環境変数を設定する。
NPM_CONFIG_PRODUCTION=falseの挙動
この環境変数がfalseの場合は、devDependenciesのパッケージを削除しません。
そのため、NPM_CONFIG_PRODUCTION=falseを設定しています。
ちなみにtrueの場合は、そもそも全てのパッケージのインストールを行わず、dependenciesだけインストールします。
Nuxt.jsの起動コマンド
Nuxt.jsは、環境によって起動コマンドが変わります。
- 開発環境 ... docker-compose.ymlで
yarn run devを実行してNuxt.jsを起動。 - 本番環境 ... heroku.ymlで
yarn run startを実行してNuxt.jsを起動。
この本番環境用のyarn run startコマンドは、実行前にnuxt buildを実行する必要があります。
そのためDockerfileにyarn run buildを追記したのです。
GitHubにpushしとく
以上で作業は終了です。
ここまでの変更をpushしておきましょう。
front $ git add -A
front $ git commit -m "edit_Dockerfile&add_heroku.yml"
front $ git push
まとめ
今回は、Dockerfileとheroku.ymlをHerokuデプロイ用に編集していきました。
コードのコピペだけではなく、意味を理解することが大切です。
これを続けていれば、いつの間にかネットの情報が自分の知識になりますよ。
次回~
次回はNuxt.jsのデプロイを完了し、インターネット上に"Hello"を返すAPIアプリケーションを表示させましょう！
▶︎ 次の記事へ。（👇にあるよ）
▷ また今後。（ブックマークしとく）
修正情報
-
2021年1月22日
Dockerfileとheroku.ymlを修正しました。
Herokuデプロイの環境変数
NODE_ENVについて、間違った情報があったため追記しました。