时间戳

首页 > 解决方案 > 如何使用 Cloud Native Buildpacks 构建服务 Vue SPA 的容器

vue.js - 如何使用 Cloud Native Buildpacks 构建服务 Vue SPA 的容器

问题描述

目前我正在尝试通过 Cloud Native Buildpacks 构建容器服务 VueJS 应用程序。

我已经有工作 Docker 文件，它在生产模式下构建 VueJS，然后将结果复制到 nginx 映像，但我想尝试使用 CNB。

所以我刚刚创建了空的 VueJS 项目进行测试，vue create vue-tutorial并尝试使用 CNB somehting，就像那里描述的那样https://cli.vuejs.org/guide/deployment.html#heroku但使用 CNB。

有谁知道如何用 CNB 做到这一点？

PS目前我正在尝试用

pack build spa --path . \                                              SIGINT(2) ↵  17:22:41
  --buildpack  gcr.io/paketo-buildpacks/nodejs \
  --buildpack  gcr.io/paketo-buildpacks/nginx

但出现下一个错误（我不确定我是否走对了）：

===> DETECTING
ERROR: No buildpack groups passed detection.
ERROR: Please check that you are running against the correct path.
ERROR: failed to detect: no buildpacks participating
ERROR: failed to build: executing lifecycle: failed with status code: 100

UPD 我当前的 dockerfile

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx:1.19-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

标签： vue.jsbuildpackpaketo

解决方案

我们在 Slack 上讨论过这个问题，但我也想在这里记录一下：

pack build --buildpack heroku/nodejs --buildpack https://cnb-shim.herokuapp.com/v1/heroku-community/static yourimage

这个命令可以做你想做的事。该示例中使用的静态 buildpack 尚未转换为云原生 buildpack，但 shim 可能允许您构建可行的工件。然后用类似的东西运行你的图像docker run -it -e PORT=5000 -p 5000:5000 yourimagename

推荐阅读