Next.js 12(typescript)をDocker上で動かすための手順(色々詰まって悩んだ)

Next.js 12(typescript)をDocker上で動かすための手順(色々詰まって悩んだ)

記事を書こうと思った経緯

Next.jsを使ったことなかったのですが、勉強のためにver.12からやってみたら、色々ハマったので、他の方で詰まった方がおられましたら、参考にしていただけたらと...
初心者の方でも、構築可能な様にしてます。
(すみません。不備あったので編集済みです....)

##目的
swcのエラーを解消して、Next.js 12をDocker上で動くようにする。

##対象
Next.js 12をDocker上で動かしたい方全員が対象
DokcerでNext.js12を使ってみたいけど、環境構築で挫折した方などなど...

##前提
Node v14.18.1が使える状態であること。
Dockerが使える状態であること。(Docker Desktopでも可)

##開発環境
OSはmac想定です。

環境	バージョン
macOS	Monterey
Alphine	3.13
Node	14.18.1
Yarn	1.27
Rust	1.57
バージョンが違うと動かないことがあるので、注意

##フォルダ構成

next_demo/
　├ environment
　│　　　　　　└ docker-entrypoint.sh
　│　　　　　　└ setup.sh
　├ src
　│　　　　　　└ next.jsのソース ← Next.jsをダウンロードしてください。
　├ docker-compose.yaml 
　└ Dockerfile

##next.jsのダウンロード (わかる方はスキップOK)
１、next_demoの中に移動
２、yarn create next-app --typescript src を実行

##各ファイルの内容 (コピペどうぞ！)
・docker-compose.yaml

version: '3.7'
services:
  next12_demo:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: 'next12_demo'
    volumes:
      - ./src:/usr/src/app
    command: sh -c "sh /docker-entrypoint.sh && cd /usr/src/app && yarn next dev"
    ports:
      - "3001:3000"
    environment:
      TZ: 'Asia/Tokyo'

・Dockerfile

FROM rust:1.57.0-alpine3.13

COPY /environment /

RUN apk update && \
    apk add vim && \
    apk add nodejs npm && \
    npm install -g yarn && \
    chmod 755 /docker-entrypoint.sh && \
    chmod 755 /setup.sh

ENV HOST=0.0.0.0
EXPOSE 3000

※ちなみに、FROMの「rust:1.57.0-alpine3.13」を「node:14.18-alpine3.13」に変更して、
・ apk add nodejs npm &&
・ npm install -g yarn &&
をコメントアウトして実行しても動きますので、rustが必要ない方は、そちらでもOKです。

・docker-entrypoint.sh

#!/bin/sh

SETUP_FILE="/setup.sh"

if [ -e $SETUP_FILE ]; then
    sh setup.sh
    rm setup.sh
else
    echo "------- already run setup.sh -------"
fi

・setup.sh

#!/bin/sh
cd /usr/src/app

echo "------- next-swc-linux-x64-gnu install -------"
yarn add next-swc-linux-x64-gnu

起動コマンド

// docker-compose.ymlファイルのあるフォルダで実行
docker-compose up --build

// コンテナが問題なく動いたら、ブラウザで以下にアクセス
→ http://localhost:3001

イメージにrustを使用した理由

今回の構築では、imageにrustを使用しています。nodeで行ってみようとしたのですが、
以下の理由で、rust:1.57.0-alpine3.13を使用。

1、alpineでrustの環境構築がちょっとしんどかった。
2、alpineでの構築をやってみたかった
3、WebAssemblyの高速化を試してみようと思った。

注意

ちなみに、setup.shを実行せずに、nextを起動しようとすると、以下のようなエラーが発生するのでご注意を!

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

まとめ

swcを無効にすることができるのは知っているのですが、今回はあえて無効にせずにできるか試してみました。
とりあえず、できるようになったが、もっといいやり方ある気がしてるので、最適解をご存知の方は、ご指摘いただけると嬉しいです。

不備がございましたら、それも、ご指摘いただけると嬉しいです。

では.....