在 Paketo.io / Cloud Native Buildpacks 构建的 Docker 容器中运行 Nuxt.js

Posted 2023-02-22

【中文标题】在 Paketo.io / Cloud Native Buildpacks 构建的 Docker 容器中运行 Nuxt.js

【英文标题】：Running Nuxt.js in Docker Container build by Paketo.io / Cloud Native Buildpacks

【发布时间】：2021-08-24 13:21:06

【问题描述】：

我想将我的 Nuxt.js 应用程序容器化。我可以编写自己的 Dockerfile（例如as mentioned in the Nuxt.js Google Cloud Run docs），但as Cloud Native Buildpacks are here to free us from the need to write those over and over again 我想简单地使用 Paketo.io 从我的 Nuxt.js 应用程序构建一个容器。

我跑了

pack build microservice-ui-nuxt-js --path . --builder paketobuildpacks/builder:base

并且成功创建了一个容器。这是完整的日志：

$ pack build microservice-ui-nuxt-js --path . --builder paketobuildpacks/builder:base
base: Pulling from paketobuildpacks/builder
Digest: sha256:3e2ee17348bd901e7e0748e0e1ddccdf8a602b624e418927145b5f84ca26f264
Status: Image is up to date for paketobuildpacks/builder:base
base-cnb: Pulling from paketobuildpacks/run
Digest: sha256:b6b1612ab2dfa294514fff2750e8d724287f81e89d5e91209dbdd562ed7f7daf
Status: Image is up to date for paketobuildpacks/run:base-cnb
===> DETECTING
4 of 7 buildpacks participating
paketo-buildpacks/ca-certificates 2.2.0
paketo-buildpacks/node-engine     0.4.0
paketo-buildpacks/npm-install     0.3.0
paketo-buildpacks/npm-start       0.2.0
===> ANALYZING
Previous image with name "microservice-ui-nuxt-js" not found
===> RESTORING
===> BUILDING

Paketo CA Certificates Buildpack 2.2.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.4.0
  Resolving Node Engine version
    Candidate version sources (in priority order):
                -> ""
      <unknown> -> ""

    Selected Node Engine version (using ): 14.17.0

  Executing build process
    Installing Node Engine 14.17.0
      Completed in 5.795s

  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 profile.d/0_memory_available.sh
      Calculates available memory based on container limits at launch time.
      Made available in the MEMORY_AVAILABLE environment variable.

Paketo NPM Install Buildpack 0.3.0
  Resolving installation process
    Process inputs:
      node_modules      -> "Not found"
      npm-cache         -> "Not found"
      package-lock.json -> "Found"

    Selected NPM build process: 'npm ci'

  Executing build process
    Running 'npm ci --unsafe-perm --cache /layers/paketo-buildpacks_npm-install/npm-cache'
      Completed in 14.988s

  Configuring launch environment
    NPM_CONFIG_LOGLEVEL -> "error"

  Configuring environment shared by build and launch
    PATH -> "$PATH:/layers/paketo-buildpacks_npm-install/modules/node_modules/.bin"


Paketo NPM Start Buildpack 0.2.0
  Assigning launch processes
    web: nuxt start

===> EXPORTING
Adding layer 'paketo-buildpacks/ca-certificates:helper'
Adding layer 'paketo-buildpacks/node-engine:node'
Adding layer 'paketo-buildpacks/npm-install:modules'
Adding layer 'paketo-buildpacks/npm-install:npm-cache'
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 microservice-ui-nuxt-js...
*** Images (5eb36ba20094):
      microservice-ui-nuxt-js
Adding cache layer 'paketo-buildpacks/node-engine:node'
Adding cache layer 'paketo-buildpacks/npm-install:modules'
Adding cache layer 'paketo-buildpacks/npm-install:npm-cache'
Successfully built image microservice-ui-nuxt-js

正在运行

docker run --rm -i --tty -p 3000:3000 microservice-ui-nuxt-js

我希望在 http://localhost:3000 的浏览器中看到我的应用程序。但没有运气！我的应用似乎没有完全运行：

虽然我的控制台看起来不错：

我错过了什么？

【参考方案1】：

我读到了HOST 变量in this post ，整个问题都与它有关！然后我还找到了this answer，因为我现在知道要找什么了。 The Nuxt.js configuration docs state it also:

默认情况下，Nuxt.js 开发服务器主机是 localhost，即 只能从主机内部访问。为了查看您的 其他设备上的应用程序，您需要修改主机。

还提到了关键配置：

主机 '0.0.0.0' 指定告诉 Nuxt.js 解析主机 地址，主机外部的连接可以访问该地址 机器（例如 LAN）

所以我们要做的就是define a Docker environment variable--env "HOST=0.0.0.0" 并像这样运行 Paketo 构建容器：

docker run --rm -i --tty --env "HOST=0.0.0.0" -p 3000:3000 microservice-ui-nuxt-js

现在浏览器也应该在 http://localhost:3000 显示我们的应用程序：

您可以使用示例项目的 GitHub Container Registry 发布的图像自己尝试：

docker run --rm -i --tty --env "HOST=0.0.0.0" -p 3000:3000 ghcr.io/jonashackt/microservice-ui-nuxt-js:latest