IK.AM

@making's tech note


Cloud Native BuildpacksでNext.jsのアプリをビルドするメモ

🗃 {Dev/Infrastructure/CloudNativeBuildpacks}
🏷 Cloud Native Buildpacks 🏷 Tanzu Build Service 🏷 kpack 🏷 TAP 
🗓 Updated at 2022-04-16T16:03:01+09:00  🗓 Created at 2022-04-11T13:07:56+09:00 {✒️️ Edit  ⏰ History  🗑 Delete}

Pack CLIの場合

使用するpackのバージョン

$ pack --version
0.24.1+git-3c7aff3.build-3213

Next.jsのブランクプロジェクトを作成

npx create-next-app hello-next
cd hello-next

ローカルで起動

yarn dev
image

pack buildを実行。

pack build hello-next --builder paketobuildpacks/builder:base 

次のようなログが出力される。

base: Pulling from paketobuildpacks/builder
Digest: sha256:8f62f53645c9bbc117023c57813959a4f0cd51a90ba10d8b9802230d2b3fd40d
Status: Image is up to date for paketobuildpacks/builder:base
base-cnb: Pulling from paketobuildpacks/run
Digest: sha256:38199b888e33bed03b98bfed20a091733f502c33ced1a6660ed5c92ed82308ea
Status: Image is up to date for paketobuildpacks/run:base-cnb
===> ANALYZING
Previous image with name "hello-next" not found
===> DETECTING
======== Output: paketo-buildpacks/poetry@0.1.2 ========
pyproject.toml must include [tool.poetry.dependencies.python], see https://python-poetry.org/docs/pyproject/#dependencies-and-dev-dependencies
err:  paketo-buildpacks/poetry@0.1.2 (1)
======== Output: paketo-buildpacks/poetry@0.1.2 ========
pyproject.toml must include [tool.poetry.dependencies.python], see https://python-poetry.org/docs/pyproject/#dependencies-and-dev-dependencies
err:  paketo-buildpacks/poetry@0.1.2 (1)
6 of 12 buildpacks participating
paketo-buildpacks/ca-certificates 3.1.0
paketo-buildpacks/node-engine     0.12.3
paketo-buildpacks/yarn            0.6.1
paketo-buildpacks/yarn-install    0.9.0
paketo-buildpacks/node-module-bom 0.2.4
paketo-buildpacks/yarn-start      0.8.0
===> RESTORING
===> BUILDING

Paketo CA Certificates Buildpack 3.1.0
  https://github.com/paketo-buildpacks/ca-certificates
  Launch Helper: Contributing to layer
    Creating /layers/paketo-buildpacks_ca-certificates/helper/exec.d/ca-certificates-helper
Paketo Node Engine Buildpack 0.12.3
  Resolving Node Engine version
    Candidate version sources (in priority order):
                -> ""
      <unknown> -> ""

    Selected Node Engine version (using ): 16.14.2

  Executing build process
    Installing Node Engine 16.14.2
      Completed in 1.582s

  Generating SBOM for directory /layers/paketo-buildpacks_node-engine/node
      Completed in 0s

  Configuring build environment
    NODE_ENV     -> "production"
    NODE_HOME    -> "/layers/paketo-buildpacks_node-engine/node"
    NODE_VERBOSE -> "false"

  Configuring launch environment
    NODE_ENV     -> "production"
    NODE_HOME    -> "/layers/paketo-buildpacks_node-engine/node"
    NODE_VERBOSE -> "false"

    Writing exec.d/0-optimize-memory
      Calculates available memory based on container limits at launch time.
      Made available in the MEMORY_AVAILABLE environment variable.

Paketo Yarn Buildpack 0.6.1
  Executing build process
    Installing Yarn
      Completed in 146ms

  Generating SBOM for directory /layers/paketo-buildpacks_yarn/yarn
      Completed in 0s

Paketo Yarn Install Buildpack 0.9.0
  Resolving installation process
    Process inputs:
      yarn.lock -> Found

    Selected default build process: 'yarn install'

  Executing launch environment install process
    Running yarn install --ignore-engines --frozen-lockfile --modules-folder /layers/paketo-buildpacks_yarn-install/launch-modules/node_modules
      Completed in 17.205s

  Configuring launch environment
    PATH -> "$PATH:/layers/paketo-buildpacks_yarn-install/launch-modules/node_modules/.bin"

  Generating SBOM for directory /layers/paketo-buildpacks_yarn-install/launch-modules
      Completed in 1.621s

Paketo Node Module Bill of Materials Generator Buildpack 0.2.4
  Resolving CycloneDX Node.js Module version
    Selected CycloneDX Node.js Module version: 3.0.7

  Executing build process
    Installing CycloneDX Node.js Module 3.0.7
      Completed in 97ms

  Configuring environment
    Appending CycloneDX Node.js Module onto PATH

  Running CycloneDX Node.js Module
    Running 'cyclonedx-bom -o bom.json'
      Completed in 345ms

Paketo Yarn Start Buildpack 0.8.0
  Assigning launch processes:
    web (default): bash -c next start

===> EXPORTING
Adding layer 'paketo-buildpacks/ca-certificates:helper'
Adding layer 'paketo-buildpacks/node-engine:node'
Adding layer 'paketo-buildpacks/yarn:yarn'
Adding layer 'paketo-buildpacks/yarn-install:launch-modules'
Adding layer 'launch.sbom'
Adding 1/1 app layer(s)
Adding layer 'launcher'
Adding layer 'config'
Adding layer 'process-types'
Adding label 'io.buildpacks.lifecycle.metadata'
Adding label 'io.buildpacks.build.metadata'
Adding label 'io.buildpacks.project.metadata'
Setting default process type 'web'
Saving hello-next...
*** Images (9e64a593db49):
      hello-next
Adding cache layer 'paketo-buildpacks/node-engine:node'
Adding cache layer 'paketo-buildpacks/yarn:yarn'
Adding cache layer 'paketo-buildpacks/node-module-bom:cyclonedx-node-module'
Adding cache layer 'cache.sbom'
Successfully built image hello-next

Dockerで起動してみる。

$ docker run --rm -p 3000:3000 hello-next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error: Could not find a production build in the '/workspace/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
    at NextNodeServer.getBuildId (/layers/paketo-buildpacks_yarn-install/launch-modules/node_modules/next/dist/server/next-server.js:137:23)
    at new Server (/layers/paketo-buildpacks_yarn-install/launch-modules/node_modules/next/dist/server/base-server.js:91:29)
    at new NextNodeServer (/layers/paketo-buildpacks_yarn-install/launch-modules/node_modules/next/dist/server/next-server.js:84:9)
    at NextServer.createServer (/layers/paketo-buildpacks_yarn-install/launch-modules/node_modules/next/dist/server/next.js:109:16)
    at async /layers/paketo-buildpacks_yarn-install/launch-modules/node_modules/next/dist/server/next.js:121:31

next buildが行われていないというエラーが発生している。 packeto buildpackのデフォルトだとyarn installしかしてくれない。 next buildを実行するにはyarn run buildも行う必要がある。その方法は次のドキュメントを参照。

https://paketo.io/docs/howto/nodejs/#run-scripts-during-build-phase

再度ビルド。

pack build hello-next --builder paketobuildpacks/builder:base -e BP_NODE_RUN_SCRIPTS=build

次のようなログが出力される。yarn run buildが実行されていることがわかる。

base: Pulling from paketobuildpacks/builder
Digest: sha256:8f62f53645c9bbc117023c57813959a4f0cd51a90ba10d8b9802230d2b3fd40d
Status: Image is up to date for paketobuildpacks/builder:base
base-cnb: Pulling from paketobuildpacks/run
Digest: sha256:38199b888e33bed03b98bfed20a091733f502c33ced1a6660ed5c92ed82308ea
Status: Image is up to date for paketobuildpacks/run:base-cnb
===> ANALYZING
Restoring data for SBOM from previous image
===> DETECTING
======== Output: paketo-buildpacks/poetry@0.1.2 ========
pyproject.toml must include [tool.poetry.dependencies.python], see https://python-poetry.org/docs/pyproject/#dependencies-and-dev-dependencies
err:  paketo-buildpacks/poetry@0.1.2 (1)
======== Output: paketo-buildpacks/poetry@0.1.2 ========
pyproject.toml must include [tool.poetry.dependencies.python], see https://python-poetry.org/docs/pyproject/#dependencies-and-dev-dependencies
err:  paketo-buildpacks/poetry@0.1.2 (1)
7 of 12 buildpacks participating
paketo-buildpacks/ca-certificates 3.1.0
paketo-buildpacks/node-engine     0.12.3
paketo-buildpacks/yarn            0.6.1
paketo-buildpacks/yarn-install    0.9.0
paketo-buildpacks/node-module-bom 0.2.4
paketo-buildpacks/node-run-script 0.3.3
paketo-buildpacks/yarn-start      0.8.0
===> RESTORING
Restoring metadata for "paketo-buildpacks/ca-certificates:helper" from app image
Restoring metadata for "paketo-buildpacks/node-engine:node" from app image
Restoring metadata for "paketo-buildpacks/yarn:yarn" from app image
Restoring metadata for "paketo-buildpacks/yarn-install:launch-modules" from app image
Restoring metadata for "paketo-buildpacks/node-module-bom:cyclonedx-node-module" from cache
Restoring data for "paketo-buildpacks/node-engine:node" from cache
Restoring data for "paketo-buildpacks/yarn:yarn" from cache
Restoring data for "paketo-buildpacks/node-module-bom:cyclonedx-node-module" from cache
Restoring data for SBOM from cache
===> BUILDING

Paketo CA Certificates Buildpack 3.1.0
  https://github.com/paketo-buildpacks/ca-certificates
  Launch Helper: Reusing cached layer
Paketo Node Engine Buildpack 0.12.3
  Resolving Node Engine version
    Candidate version sources (in priority order):
                -> ""
      <unknown> -> ""

    Selected Node Engine version (using ): 16.14.2

  Reusing cached layer /layers/paketo-buildpacks_node-engine/node

Paketo Yarn Buildpack 0.6.1
  Reusing cached layer /layers/paketo-buildpacks_yarn/yarn

Paketo Yarn Install Buildpack 0.9.0
  Resolving installation process
    Process inputs:
      yarn.lock -> Found

    Selected default build process: 'yarn install'

  Executing build environment install process
    Running yarn install --ignore-engines --frozen-lockfile --production false --modules-folder /layers/paketo-buildpacks_yarn-install/build-modules/node_modules
      Completed in 25.051s

  Configuring build environment
    NODE_ENV -> "development"
    PATH     -> "$PATH:/layers/paketo-buildpacks_yarn-install/build-modules/node_modules/.bin"

  Generating SBOM for directory /layers/paketo-buildpacks_yarn-install/build-modules
      Completed in 7.105s

  Resolving installation process
    Process inputs:
      yarn.lock -> Found

  Reusing cached layer /layers/paketo-buildpacks_yarn-install/launch-modules
Paketo Node Module Bill of Materials Generator Buildpack 0.2.4
  Resolving CycloneDX Node.js Module version
    Selected CycloneDX Node.js Module version: 3.0.7

  Reusing cached layer /layers/paketo-buildpacks_node-module-bom/cyclonedx-node-module

  Configuring environment
    Appending CycloneDX Node.js Module onto PATH

  Running CycloneDX Node.js Module
    Running 'cyclonedx-bom -o bom.json'
      Completed in 1.033s

Paketo Node Run Script Buildpack 0.3.3
  Executing build process
    Executing scripts
      Running 'yarn run build'
        yarn run v1.22.17
        $ next build
        warn  - You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://nextjs.org/docs/messages/non-standard-node-env
        Attention: Next.js now collects completely anonymous telemetry regarding usage.
        This information is used to shape Next.js' roadmap and prioritize features.
        You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
        https://nextjs.org/telemetry
        
        info  - Checking validity of types...
        info  - Creating an optimized production build...
        info  - Compiled successfully
        info  - Collecting page data...
        info  - Generating static pages (0/3)
        info  - Generating static pages (3/3)
        info  - Finalizing page optimization...
        
        Page                                       Size     First Load JS
        ┌ ○ /                                      6.03 kB        80.4 kB
        ├   └ css/149b18973e5508c7.css             655 B
        ├   /_app                                  0 B            74.3 kB
        ├ ○ /404                                   195 B          74.5 kB
        └ λ /api/hello                             0 B            74.3 kB
        + First Load JS shared by all              74.3 kB
          ├ chunks/framework-af112b4062fe88c9.js   44.9 kB
          ├ chunks/main-9a37b13dd9b72035.js        28.2 kB
          ├ chunks/pages/_app-932f8a701c841917.js  496 B
          ├ chunks/webpack-69bfa6990bb9e155.js     769 B
          └ css/27d177a30947857b.css               194 B
        
        λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
        ○  (Static)  automatically rendered as static HTML (uses no initial props)
        
        Done in 15.36s.
        
      Completed in 15.625s

Paketo Yarn Start Buildpack 0.8.0
  Assigning launch processes:
    web (default): bash -c next start

===> EXPORTING
Reusing layer 'paketo-buildpacks/ca-certificates:helper'
Reusing layer 'paketo-buildpacks/node-engine:node'
Reusing layer 'paketo-buildpacks/yarn:yarn'
Reusing layer 'paketo-buildpacks/yarn-install:launch-modules'
Reusing layer 'launch.sbom'
Adding 1/1 app layer(s)
Reusing layer 'launcher'
Adding layer 'config'
Reusing layer 'process-types'
Adding label 'io.buildpacks.lifecycle.metadata'
Adding label 'io.buildpacks.build.metadata'
Adding label 'io.buildpacks.project.metadata'
Setting default process type 'web'
Saving hello-next...
*** Images (bbd1b9df401f):
      hello-next
Reusing cache layer 'paketo-buildpacks/node-engine:node'
Reusing cache layer 'paketo-buildpacks/yarn:yarn'
Adding cache layer 'paketo-buildpacks/yarn-install:build-modules'
Reusing cache layer 'paketo-buildpacks/node-module-bom:cyclonedx-node-module'
Adding cache layer 'cache.sbom'
Successfully built image hello-next

再度Dockerで起動する。

docker run --rm -p 3000:3000 hello-next

今度は無事に起動した。

image

kpackまたはTanzu Build Serviceの場合

kpのバージョン

$ kp version
0.4.2-build.1 bef3fe1

kpコマンドでImageリソースを作成する場合は次の通り。

kp image save hello-next --tag ghcr.io/making/hello-next --git https://github.com/making/hello-next.git --env BP_NODE_RUN_SCRIPTS=build --wait

ImageリソースをYAMLで定義する場合は次の通り。

apiVersion: kpack.io/v1alpha1
kind: Image
metadata:
  name: hello-next
spec:
  build:
    env:
    - name: BP_NODE_RUN_SCRIPTS
      value: build
  builder:
    kind: ClusterBuilder
    name: default
  serviceAccount: default
  source:
    git:
      revision: main
      url: https://github.com/making/hello-next.git
  tag: ghcr.io/making/hello-next

Tanzu Application Platformの場合

tanzu appsプラグインの0.4.1時点ではbuild時の環境変数を渡すオプションがないので、WorklodリソースをYAMLで定義する必要がある。

apiVersion: carto.run/v1alpha1
kind: Workload
metadata:
  labels:
    app.kubernetes.io/part-of: hello-next
    apps.tanzu.vmware.com/workload-type: web
  name: hello-next
spec:
  build:
    env:
    - name: BP_NODE_RUN_SCRIPTS
      value: build
  source:
    git:
      ref:
        branch: main
      url: https://github.com/making/hello-next

追記 Tanzu Application Platform 1.1 (tanzu appsプラグインの0.5.1) から--build-envオプションが使えるようになりました。

tanzu apps workload apply hello-next --app hello-next --type web --git-repo https://github.com/making/hello-next --git-branch main --build-env BP_NODE_RUN_SCRIPTS=build