CI / CD vuejs部署的管理

Question

我需要帮助部署vuejs项目使用CI / CD gitlab。

在本例中，我有3个文件环境

1. .env.development.local
2. .env.staging.local
3. .env.production.local

我在这里使用的是不同的baseHref / publicPath

1. /发展
2. /阶段
3. /生产

在这个阶段，我遵循教程这里。

但是，我仍然对如何使用不同的env进行部署感到困惑。

我通常使用以下命令：

1. 分阶段再转制

npm运行建设--模式阶段

1. 生产成品率

npm运行建设？？模式生产。

下面是我创建的env的一个示例：

# Environment Local

NODE_ENV=development
BASE_URL = /development/
VUE_APP_TITLE=Website (development)
VUE_APP_END_POINT='http://localhost:8000/api/v1/'
VUE_APP_CLIENT_ID = 12341
VUE_APP_CLIENT_SECRET = 'asdASD1123s'
VUE_APP_SCOPE = '*'
VUE_APP_BASE_URL_LINK = 'http://localhost:8080'
VUE_APP_VERSION =

这是我拥有的vue.config.js文件：

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
    publicPath: process.env.BASE_URL,
    "transpileDependencies": [
        "vuetify"
    ]
}

我做的分支：

1. 测试
2. 开发
3. 主控

在gitlab-ci.yml中：

build site:
  image: node:6
  stage: build
  script:
    - npm install --progress=false
    - npm run build
  artifacts:
    expire_in: 1 week
    paths:
      - dist

unit test:
  image: node:6
  stage: test
  script:
    - npm install --progress=false
    - npm run unit

deploy:
  image: alpine
  stage: deploy
  script:
    - apk add --no-cache rsync openssh
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
    - chmod 600 ~/.ssh/id_dsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav --delete dist/ user@server.com:/var/www/website/

有了上面gitlab-ci.yml的配置，我只能部署本地env。

我希望有人能够分享他们关于CI / CD部署vuejs的知识和经验。或者给一些CI / CD vuejs vuejs教程参考多个

非常感谢。

Answer 1

我在我的项目中找到了一个文件，如果它能帮你的话：

FROM node:12.16.1 AS builder
RUN mkdir /app
COPY *.json /app/
COPY src /app/src
WORKDIR /app
RUN npm install
RUN npm run build

FROM nginx:1.15.8
COPY --from=builder /app/dist/ /usr/share/nginx/html
EXPOSE 80:80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

不要忘记使用多级码头;)