前端VUE+CI部署

最新推荐文章于 2025-04-25 13:02:40 发布

小楼看风云

最新推荐文章于 2025-04-25 13:02:40 发布

阅读量572

点赞数

分类专栏： gitlab持续集成

本文链接：https://blog.youkuaiyun.com/linux_s2018/article/details/113860635

版权

gitlab持续集成专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在前端Vue项目中采用CI（持续集成）进行部署的两种Docker解决方案：NVM+Docker和直接使用Node镜像。通过Dockerfile详细展示了构建过程，包括安装依赖、构建dist包以及使用.gitlab-ci.yml配置持续集成流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作需求：前端VUE部署CI打包。

设计方案：GITLABCI+DOCKER

解决方案一：NVM+DOCKER

DCCKERFILE如下

FROM ubuntu
COPY sources.list /etc/apt/sources.list
WORKDIR /app
COPY www /app
RUN apt-get update \
&& apt-get install -y git vim curl python make
ENV NODE_VERSION 10.23.0
RUN curl https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash \
&& . /root/.nvm/nvm.sh \
&& nvm install $NODE_VERSION \
&& nvm alias default $NODE_VERSION \
&& nvm use default \
&& npm install --registry https://registry.npm.taobao.org \
&& npm run build

此方法是由于之前比较习惯于nvm部署node，问题在于每次上传新的代码都需要重构镜像。如果不重构镜像则会出现环境变量问题。

解决方案二：

DOCKERFILE如下

FROM node:10.16.0
MAINTAINER stoneship stoneship <258137678@qq.com>
##安装node相关依赖
RUN \
npm install yarn -g \
yarn global add nrm && \
nrm use taobao &&\
yarn global add vue-cli &&\
yarn global add cross-env
## 安装nginx
## 安装数据库...
## 创建一个目录
RUN mkdir /data
## 指定命令运行的目录
WORKDIR /data

原文链接：https://juejin.im/post/5b127087e51d450686184183

此DOCKERFILE为在网上搜索所得。使用此DOCKERFILE构建基础镜像，更新时可以使用docker -t -v $(PWD):/data $image sh -c "npm install && npm run build"来构建dist包

方案三

DOCKERFILE

FROM ubuntu
ENV TZ=Asia/Shanghai
COPY ./etc/apt/sources.list /etc/apt/sources.list
WORKDIR /code

RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone \
    && apt-get update \
    && apt-get install -y nodejs curl gnupg2 \
    && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update \
    && apt-get install -y yarn \
    && yarn config set registry 'https://registry.npm.taobao.org' \
    && yarn global add eslint

此方案与方案二类似，区别在于使用了yarn，并添加了eslint检测。

CI部署

.gitlab-ci.yml如下

cache: &global_cache

  key: ${CI_COMMIT_REF_SLUG}

  paths:

    - node_modules/

  policy: pull-push

stages:

  - install-dependencies

  - test

  - build

  - deploy

  - publish

install-dependencies:

  stage: install-dependencies

  only:

    - master

    - develop

    - tags

  script:

    - make yarn-install

  cache:

    <<: *global_cache

  tags:

    - builder

test:

  stage: test

  only:

    - master

    - develop

    - tags

  script:

    - make test

  cache:

    <<: *global_cache

  tags:

    - builder

build:

  stage: build

  only:

    - master

    - develop

  cache:

    <<: *global_cache

  artifacts:

    paths:

      - ./dist

    expire_in: 1 week

  script:

    - make build

  tags:

    - builder