前端VUE+CI部署

本文探讨了在前端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

 

 

### Vue + Spring Boot 项目的本地部署指南 #### 环境准备 首先需要确保你已经安装了必要的工具: 1. **JDK**:Spring Boot 需要 Java 开发环境支持,建议版本8及以上; 2. **Maven 或 Gradle**:用于构建和管理依赖项; 3. **Node.js 和 npm/yarn** :Vue前端项目开发及打包所必需; 4. **IDE或文本编辑器**:如 IntelliJ IDEA、Eclipse、VSCode等。 #### 后端 (Spring Boot) 的配置与启动 1. 打开命令行终端并进入你的Spring Boot应用所在目录。 2. 如果是 Maven 构建,则可以运行 `mvn clean install` 来编译应用程序,并通过`java -jar target/*.jar`直接启动它;如果是Gradle则对应地使用 `./gradlew bootRun`. 3. 检查控制台输出确认服务是否成功启动,默认情况下会监听于8080端口(除非你在application.properties里修改过). #### 前端(Vue CLI)的设置与启动 1. 进入包含vue.config.js或其他配置文件的项目根目录下; 2. 安装所需的npm包:`npm install`(如果之前未完成); 3. 使用 `npm run serve` 或者 yarn对应的指令开启一个热更新的服务,通常默认访问地址为 http://localhost:8081 ; 4. 修改vue.config.js中的代理规则指向后端API服务器(例如将所有/api开头请求转发给http://localhost:8080),避免跨域问题: ```javascript module.exports = { devServer: { proxy: 'http://localhost:8080/' } } ``` #### 生产环境下的一键式发布流程(可选) 对于生产环境中统一管理和维护前后端程序的情况,你可以考虑使用Docker容器化技术或是利用诸如PM2这样的进程守护工具来进行自动化部署。此外还可以借助CI/CD平台实现更高效的持续集成与交付过程。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值