rm /blog

IT系技術職のおっさんがIT技術とかライブとか日常とか雑多に語るブログです。* 本ブログに書かれている内容は個人の意見・感想であり、特定の組織に属するものではありません。/All opinions are my own.*

【Heroku】Next.jsアプリケーションをdeployしてみた

はじめに

HerokuにNext.jsのアプリケーションをのっけてみる。
ただの興味本位が主な目的で、同じようなことをもう一度やりたくなったときが来た場合に備えた備忘録を少し兼ねる。

準備するもの

自分的にはVS CodeのRemote Containerでやってるので、下記のようなDockerfileに基づくコンテナ上で開発していた。

FROM ubuntu:20.04

# install Node.js
RUN apt update
RUN apt install -y curl
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt install -y nodejs

# install Next.js and related modules
RUN npm install -g next react react-dom
ENV CHOKIDAR_USEPOLLING=true

# install Heroku CLI
RUN curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

# install git
RUN apt update
RUN apt-get install -y git

手順

やることは基本全部CLIで完結する。

  1. heroku apps:create [アプリケーション名]を実行する。実行後に帰ってきたHerokuアプリのURLとgitのURLを控えておく。
  2. 適当なディレクトリの中に入ってnpx create-next-app [Project名]を実行する
  3. cd [プロジェクト名]/ でプロジェクトディレクトリに入る
  4. /pages配下に適当になんかつくる。
  5. package.jsonscripts>startの部分をnext start -p $PORTに変更する。(-p $PORTをつける)
  6. プロジェクトのルートディレクトリでgit init
  7. git remote add heroku [HerokuアプリのgitURL]を実行する。gitのURLは1.の内容に基づく。控え忘れてたらHerokuのコンソール上で確認できる。
  8. git add .
  9. git commit -m "initial commit" コメントは適宜変えてください
  10. git push heroku main
  11. HerokuアプリのURLにアクセスする。画面が表示されることを確認。

つくったページ

SSGとSSRを試したかったので以下のように非常に簡単なページをつくった。
以下はSSGの例。

export default function Ssg({data}) {
    return (
        <div>
            <p>
                text: {data.text}
            </p>
            <p>
                datetime : {data.dateString}
            </p>
        </div>
    )
}

export function getStaticProps() {
    const data = {
        text: 'ssg',
        dateString: new Date().toISOString(),
    };

    return {
        props: {
            data
        },
    };
}

SSRの場合は基本的にgetStaticPropsgetServerSidePropsになってるだけである。

なお、SSGの場合は、ビルド時に頁が生成される都合で、ページ表示上の「datetime」の表記は何回リロードしても変化しない。
SSRの場合はリロードするたびに変わる。