如何使用 Cloud Native Buildpacks 构建容器服务 Vue SPA

问题描述

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

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

所以我只是通过 vue create vue-tutorial 创建了一个空的 VueJS 项目进行测试，并尝试使用 CNB 来处理 https://cli.vuejs.org/guide/deployment.html#heroku 中描述的内容，但使用 CNB。

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

附言目前我正在尝试使用

来构建它

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;"]

解决方法

我们在 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

的内容运行您的图像

buildpack paketo vue.js