如何将 VueJS 应用程序 Dockerize 用于生产并跳过 Dev 依赖项的安装

Question

我有以下 Dockerfile

FROM node:lts-alpine

WORKDIR /app

COPY package*.json ./

RUN export NODE_ENV=production
RUN npm config set strict-ssl false

RUN npm install --only=prod
RUN npm i @vue/cli-service

COPY . ./

RUN npm run build:prod

RUN npm install -g http-server

EXPOSE 8080

CMD ["http-server" "dist"]

我的开发环境包括用于 E2E 测试的 Cypress，但是当 npm i @vue/cli-service 命令运行时，它会失败并出现以下错误

Cypress Version: 3.8.3
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/mochapack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cypress@3.8.3 postinstall: `node index.js --exec install`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cypress@3.8.3 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-03-27T11_53_21_406Z-debug.log
The command '/bin/sh -c npm i @vue/cli-service' returned a non-zero code: 1
ERROR: Job failed: exit status 1

这是我的 package.json 文件

{
  "name": "todo-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "test:e2e:ci": "vue-cli-service test:e2e --headless",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

我似乎遇到了问题 22。如果没有 vue-cli-service，我无法构建用于生产的 VueJS 应用程序，但 vue-cli-service 需要安装开发依赖项，我只能安装开发如果我在我不想要或不需要的生产 Docker 容器中包含大量用于测试等的额外依赖项，则依赖项。

我正在 GitLab CI Runner 中构建我的容器。

其他人如何解决这个问题？

Answer 1

GitLab CI 能够帮助我解决我的问题。

我所做的是在我运行测试的同一阶段构建应用程序（只有在所有测试都通过时才会运行构建）。然后我将dist 文件夹作为一个工件提供给我，我可以在docker_build_dev 阶段使用它，然后我可以将它作为一个文件夹使用，我可以简单地将其复制到Docker 映像文件中。

您可以在此处https://docs.gitlab.com/ee/ci/pipelines/job_artifacts.html 阅读有关 GitLab 工件的更多信息

这不仅加快了我的测试和构建速度，而且还让它变得更简单。

这是我的 .gitlab-ci.yml 文件

stages:
  - test
  - build

test:
  stage: test
  tags:
    - docker-test
  script:
    - npm config set strict-ssl false
    - export CYPRESS_INSTALL_BINARY=/cypress/cypress.zip
    - npm install
    - npm run test:e2e:ci
    - npm run test:unit
    - npm run build:prod
  artifacts:
    paths:
      - tests/e2e/videos/
      - dist
    expire_in: 20 minutes

docker_build_dev:
  only:
    - development
  stage: build
  tags:
    - docker
  dependencies: 
    - test
  script:
    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
    - docker build --tag $CI_REGISTRY_IMAGE:DEV .
    - docker push $CI_REGISTRY_IMAGE:DEV
  needs: ["test"]

这是我简化的 Dockerfile（我切换到 Nginx，但这与解决方案无关）。

FROM nginx:stable-alpine

COPY ./dist/ /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]