管理 CI / CD vuejs 部署答案

【问题标题】：Management of CI / CD vuejs deployments管理 CI / CD vuejs 部署
【发布时间】：2020-04-28 11:40:28
【问题描述】：

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

在这种情况下，我有 3 个文件 environments：

.env.development.local
.env.staging.local
.env.production.local

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

/发展
/舞台
/生产

在这个阶段我按照教程Here.

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

通常我使用命令：

暂存

npm run build -- --mode 阶段

生产

npm run build -- --mode 生产

这是我制作的 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"
    ]
}

我创建的分支：

测试
发展
主人

在 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配置我只能部署本地环境

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

非常感谢。

【问题讨论】：

标签： node.js vue.js deployment gitlab environment-variables

【解决方案1】：

你尝试有多少工作？如果你做了 3 个工作，并且你发送参数，这是可能的。

你有你的工作的印刷品或例子吗？

【讨论】：

你的意思是这里的工作分支部署？对不起，我不完全明白。在这里，我有 3 个之前的阶段，例如在分支测试中进行单元测试。然后部署到开发分支进行测试。最后合并到生产中以准备使用。但是这里我还是使用 Filezilla 手动构建和部署，感觉比较费时间。
你的意思是 .gitlab-ci.yml 文件
是的，你能把你的 gitlabci.yml 文件放进去吗？会更容易理解和帮助你
我在上面的问题中添加了
哦，对不起！ 但我仍然对如何使用不同的环境进行部署感到困惑。 -> 我认为您可以通过环境使用一项工作您可以首先创建一个 Dockerfile 以便能够制作应用程序的映像，考虑到登台和生产环境是相同的。您还可以通过使用 gitlab 环境来发挥作用。

【解决方案2】：

我在我的项目中找到了一个 dockerfile，如果它可以帮助你：

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

别忘了使用多阶段 docker ;)

【讨论】：