Chapter 08無料公開

1-6. サーバーへのデプロイ

terrierscript
terrierscript
2020.10.12に更新

サーバーへのデプロイ

一通り完成したらサーバーで動かしたいかと思います。

まず一番簡単なのはNext.jsの開発元であるVercelを利用することです。

https://nextjs.org/docs/deployment#vercel-recommended

こちらはほとんど説明することもなく、単に連携してpushすれば簡単に起動出来ます。
また、最近ではAmplifyもサーバーサイドレンダリングに対応

Next.jsは言ってしまえば単なるNode.jsなので、Node.jsを動かせる環境であれば[Heroku](Next.js on HerokuでもCloud Runでも動かせます。

筆者はCloud Runで動かしたことがありますが、下記のような小さめのdockerfileで十分動かすことが出来ました[1]

FROM node:12.18.4-alpine
WORKDIR /app
COPY package.json ./
COPY yarn.lock ./

RUN yarn 

COPY . .

RUN yarn build

CMD [ "yarn","start"]

Tips: ポートを変えて起動する

Next.jsを多様していると、複数起動してしまう場合があります。

$ next dev
Port 3000 is already in use.

Next.jsはデフォルトで3000番ポートを利用するため、デフォルトだとポートがぶつかってしまいます

この場合は、-pオプションを使うと良いでしょう

$ next dev -p 3005
ready - started server on http://localhost:3005
脚注
  1. Cloud Runは便利なツールだとは感じる一方、Cloud Buildとの連携の煩雑さもあるため、やはり現状vercelが一番ラクな選択肢になっています。 ↩︎