Ⅰ gitLab CI/CD docker自动部署vue前端项目
查询了好多资料，都没有找到可以直接应用的，综合了好多，配置runner之后，前端项目里面需要在项目根目录配置三个文件：
1..gitlab-ci.yml 文件
stages:
- build
- deploy
# 设置缓存
cache:
paths:
- node_moles/
- dist/
# 安装依赖 before_script 会在每个 stages 执行之前运行
before_script:
- npm install
# 编译 这里对应上方 stages ，
build:
stage: build
script:# script 为要执行的命令，可以多条按顺序执行
- npm run build:prod
docker-deploy:
stage: deploy
# 执行Job内容
script:
# 通过Dockerfile生成pactera_pflife_ui镜像
- sudo docker build -t pactera_pflife_ui .
# 删除已经在运行的容器
- if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi
# 通过镜像启动容器
- sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui
tags:
# 执行Job的服务器
- pflife-web
only:
# 只有在master分支才会执行
- dev_xht
2.Dockerfile 文件
# 设置基础镜像
FROM nginx:latest
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY default.conf/etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
3.default.conf文件
server {
listen 80;
server_name 39.100.9.6; # localhost修改为docker服务宿主机的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://39.100.9.6:8090/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
总之，三个文件部署之后运行正常
Ⅱ Jenkins自动部署笔记（二）全局工具配置
前提条件：
1.已安装并启动Jenkins。
2.已安装下列插件。
（1）Git plugin 可能默认已经安装
（2）Git client plugin 可能默认已经安装
（3）Maven Integration plugin
（4）Publish Over SSH 用于远程部署
（5）Gitlab Hook Plugin 用于gitlab提交触发自动部署
以上内容在Jenkins自动部署笔记（一）中有详细介绍
进入系统管理。
进入全局工具配置。
1.JDK
（1）点击“JDK安装...”
（2）点击新增JDK按钮，填写别名（随便起）、JDK安装路径即可。JDK在上一节已安装，所以这里我们直接选择安装路径。
2.Git
填写名称（随便起）、安装路径即可。
3.Maven
点击新增Maven按钮，勾选自动安装，在“从Apache安装”下拉列表中选择一个版本即可。
4.NodeJS（主要用于vue前端项目的自动打包部署）
点击新增NodeJS按钮，填写名称（随便起），勾选自动安装，在版本下拉框中选择一个NOdeJS版本。
5.点击保存按钮后，刚才选择自动安装的工具会在后台自动安装。到此，全局工具配置基本结束。
Ⅲ 前端自动化6部是个车间还是个什么意思
先来说说为什么要自动化。凡是要考虑到自动化时，你所做的工作必然是存在很多重复乏味的劳作，很有必要通过程序来完成这些任务。这样一来就可以解放生产力，将更多的精力和时间投入到更多有意义的事情上。随着前端开发不再是简单的作坊式作业，而成为一个复杂的工程时，还涉及到性能优化一系列工作等等，这时自动化已然是迫切的需求。
早期的网站开发
在还没有前端工程师这种分工如此明确的岗位时，大家所理解的前端工作无非就是制作网页的人，包括html、css、js等。稍微高级点的可能就是php了，可以读写数据库，可以称之为动态的网页。通过近几年的发展，分工越来越细，在大公司如BAT三家，基本是把前端分开来了，有专门的人写js，有专门的人写css。以前一个网页可以一个人搞定，包括切图，写页面到写逻辑，无非是几个资源链接拼凑起来。当然逻辑性不强，页面不重。
最简单的页面如下：
<!DOCTYPE html>
<html>
<head>
<style>....</style>
</head>
<body>
hello world
</body>
<script>
....
</script>
</html>
这样几个html标签就能展示成网页了。顺便写几个逻辑，填写几个表单就差不多了。这就是早期的网页。
javascript库
有一次需求你做了一个页面，然后第二次需求，你领导又让你做了页面，只是这次与上次的逻辑都差不多，就改改样式皮肤，修改图片等等。这样你就要从原来的地方拷贝一份代码过来。如果有一天发现一个bug，你就需要修改两处地方，这使得你非常的恼火，于是就把公共的逻辑抽取出来，两个页面都引用这段代码，这样就很好的解决了这个问题。以后有第三个第四个页面，你也不会担心了。渐渐的公共的代码越来越大，又是个独立的文件，这个文件就成为了一个库文件了，就像jquery等等。
模块化
随着业务的不断扩大，页面越来越多，逻辑越来越重，之前你提取出来的库文件越来越大，功能越来越多。A页面只引用了其中的一部分函数，B页面C页面同样如此，后来你决定将库文件拆分成更小的模块，由各自的功能决定应该在哪个模块。这样一来前端开发就此演化为模块化开发方式。你开发的产品就像搭建积木一样，将各个模块组装在一起。
网页优化
好了，现在你的工程很庞大了，文件数量新增了非常的多，JS模块也很多，这时候一个页面也能加载了上十个js文件或者好几个样式文件。用户访问你的网页的时候需要把这些资源从服务器下载下来，所以理论上来说，想要加快你的网站，比必须减少下载的时间。可以从下载的数量和下载的大小出发，在不做大改变的前提下就是减少HTTP请求数以及压缩文件大小。雅虎的网页优化十四条军规中很大一部分是针对这种情况进行优化，如：
1、合并请求
2、使用雪碧图
3、压缩js、css代码（除去空格，混淆等等）
4、延迟加载
在PC时代，这些问题可能不是那么尖锐。移动互联网的兴起，对网页速度提出了更高的要求，因为网速相对比较慢。也有新的优化措施出现，比如缓存js文件等。可是要做到这些，并不是很容易。假如你的页面引入十个JS文件，这样发布出去显然是不好的，所以你要手动合并，将十个JS文件合并成一个，或者几个。然后还要将合并后的文件进行压缩。发出去之后产品经理发现有个小问题需要优化一下，这时候你又要重复刚才的工作。如果这样的事情发生三次，或者更多次，你会变得恼火。当然这只是令你恼火的一点点因素而已，更多的还有合并雪碧图等等。
经历过几次痛苦之后，你会发现性能优化与工程本身之前存在一些矛盾的地方。就是在优雅的开发的同时，兼顾性能方面的考虑实在难以做到。这时自动化工具太有必要了，将开发与发布隔离开来。按照优化的准则，利用构建工具，在发布的时候轻松一键搞定，这将是最理想化的作业方式。
一些构建工具
nodejs的出现，给前端开发带来了一些改变。在没有任何语言障碍的情况下，前端同学可以转为后台开发，nodejs带来另外的一个福音便是构建工具。之前的压缩合并工具大多是由java编写的，像雅虎的yui compressor，但对没有java基础的前端开发来说，至少要走不少弯路。然后最近一两年比较火的是国外的grunt和gulp，以及国内的FIS。相比而言，国外总是走在前头，在探索更好的开发方式，做出了很多探索。
grunt
之前在鸟厂的时候，在组内也尝试推广过模块化的开发方式，主要是用seajs模块加载器，关于这个的好处我这里就不展开说明了。这种方式从11年开始到现在基本已经得到了认可，或者说是未来的趋势，ECMAScript 6已经将模块化加入了规范。等到浏览器支持应该是几年之后的事情。这种模式主要是参考了nodejs，将其思想运用到浏览器上。seajs模块化的诟病之处便是网络请求，上线前面临的一个问题就是模块太多，有十几个文件，需要合并和压缩，而且还不能简单的将文件合并在一起。有一套他自己的规则。
在开发的时候，一个模块对应一个文件，如下：
// a.js
define(function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define(function(require, export, mole){
// xxxxx
})
如果上线前简单的将这两个文件合并在一起，那么a模块是不能找到b模块，因此这样的做法是行不通。一个规则是根据文件的路径，给每个模块加上一个唯的id，id的值就是该模块的路径：
// a.js
define('a', function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define('b', function(require, export, mole){
// xxxxx
})
所以在自动化的过程中，需要提取模块的唯一ID，然后再进行合并。
grunt的插件很多，也非常的成熟，能够满足各式各样的需求。作为新手，我是琢磨了大概半个月的时间才大概了解了其配置文件的意思，但也只是知道用，不明白个所以然。grunt的运作方式就是根据配置文件加载相应的插件，完成相应的任务（task）。当时中文资料比较少，英文也比较晦涩，尤其是配置文件中各配置项的意思不太明白。而当文件多起来了，构建的效率明显跟不上。加上组内也不太重视，所以就没怎么去折腾了。转去鹅厂之后，grunt就无疾而终了。
gulp
没有在实战项目中运用过，暂不说明
组内的构建工具
刚来到鹅厂时，也有自己的一套构建工具，比较单一，项目不大。主要是将上文提到的seajs所带来的文件解决掉，提取模块ID，合并之。随着业务的发展，越来越不满足实际的需求，后来索性放弃了它，转而投向网络的FIS。
FIS构建工具
放弃之前的构建工具是因为一个尖锐的问题引起的，就是在发布的时候，有一段时间将会引起外网报错，就是页面已经出去，js文件却还是旧的，即使你在文件后面加上了查询参数也不太起作用。加上浏览器和CDN本身的缓存，这个问题一时之间找不到好的解决方案，唯一的办法就是采用新的文件，文件加上自身的hash值作为文件名。这样一来就瞄准了网络的FIS，它能够简单的实现我们所需要的功能。
核心思想是文件的定位，也就是在开发测试的阶段并不需要将文件hash，只需要在上线的那一刻来做这步。找到原有文件的依赖，将其替换为新的文件名。
理想都很美好，但现实真的很残酷。FIS上手相对于grunt是要简单些，但其一点也不简单。需要理解整体的思想才能去实施，而且小白用户基本不会使用，除非是一些简单的合并需求。但复杂的业务场景FIS是满足不了的。包括前面提到的模块ID的提取，seajs模块文件的合并等都需要进行二次开发才能够做到。
很多页面是嵌入到APP内部的，APP本身也可以做一次缓存，根据特定的文件名规进行缓存，彻底消灭了304请求，如果每次都是新文件，在服务器端也可以配置更长久的缓存期，所以这里也需要定制开发。
FIS最值得诟病的地方就是全局构建，这一点不仅使得构建速度快不起来，而且生成的新文件特别多，导致发布的时候去挑选文件。在多人协作开发的时候，会产生冲突，发布的过程极其的痛苦，不知道网络内部的人是怎么使用的。望着文件夹满是hash的文件名，瞬间就奔溃了。这是小组内部使用FIS后，血的教训。
后来决定大刀阔斧的对FIS进行改造。在构建的时候只生成相关的资源文件，核心是找到该文件所依赖的所有的资源文件。当然还是全局构建，只是在生成文件的时候不生成其他不相关的。
这样发布工作变得非常轻松，一目了然。然后配合现在的发布工具，基本上整个开发发布流程也比较顺畅了。那天小组会议讨论，构建工具的理想目标是什么，这个问题我也没有细想过，总之就是要从重复的劳动中解放出来，把时间花在值得的地方。或许可以采用一键发布，这可能就是理想，也是后期可以考虑再优化的地方。
现在组内所采用的构建工具，已经和FIS本身有很大的差别了。进行了很多地方的改造，后面有机会进行整体的开发发布流程分享，以及我的一些构建思路。
iamaddy
关注
1
0
0
专栏目录
4款前端自动化构建工具的介绍与对比.zip_java自动化框架
01-07
4款前端自动化构建工具的介绍与对比.zip 大家都知道webpack是当人不让的前端自动化构建工具,但是除了它还有其它常用的前端打包工具存在,现在我们来比较4款
前端自动化构建工具(Grunt,、Gulp、 Webpack)
01-02
<span style="color:#404040;">使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到最后实现自动化构建项目。是前端工程师必备的技能之一。 本套视频主要讲解当前开发中最流行的三种自动化构建工具: Grunt, Gulp, webpack。从理解什么是构建工具，为什么要用构建工具，到如何去使用构建工具。 学习本套视频之前 建议先学习 JS 模块化。</span>
如何实现自动化前端开发？
CSDN资讯
7051
IDE不仅是文本编辑器，还是编译器、生成器、调试器和集成器。 作者 |Nicolus Rotich 译者 |弯月，责编 | 郭芮 出品 | CSDN（ID：CSDNnews） 以下为译文： 每一行代码都可以表示为字符串变量，无论代码本身执行了哪些操作。 这就是我们使用文本文件（即集成开发环境，IDE）向计算机发布指令的根本原因，我知道你一定在想：文本编辑器的名字也太高级了吧。...
前端自动化发布实战总结
weixin_34418883的博客
163
为什么要做 今年4月份，开始自己的第二份工作，习惯了老东家如丝般的发布体验，一下子感觉来到了“原始社会”。 首先这是一篇长文，主要介绍自己在做自动发布这个过程的一些思考。 引用玉伯的Web研发模式演变来说，现在我们处于 - Web1.0时代： 前后端代码耦合 java环境对前端过于复杂 缺乏工具和规范，代码难维护 内嵌代码：html内嵌js，j...
前端项目自动化部署
最新发布
@SCY
392
本文主要内容为三个方面： 一、使用Git仓库来管理项目 二、如何使用云服务器 三、使用Jenkins进行自动化部署
如何实现Web前端自动化？让这些工具帮助你
xiaoxijing的博客
1569
随着前端技术的发展，前端开发从静态网页的开发到复杂的前后端交互再到基于node.js的全栈开发，前端需要做的事情越来也多，前端代码的逻辑和交互效果越来越复杂，越来越不易于管理。模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。在新技术不断涌入的多元化发展模式中，Web前端工程师的工作量也越来越大。前端自动化构建在整个项目开发中越来越重...
前端工程化实战 - 自动化构建工具
每天进步一点点
496
最典型的运用场景就是在去开发网页应用时就可以使用： main.scss index.html package.json 安装 Sass 模块 安装完成后，在 node_moles 下有一个 .bin 目录，这个目录下有一个 Sass 的命令文件，可以使用指令打开帮助信息 将 Sass 文件转换成 CSS 使用 或 启动 实现自动化构建 （1）安装 browser-sync 模块，用于启动一个测试服务器，去运行项目 （2）在 scripts 中添加 serve 命令，通过 br
前端自动化部署
qq_41206257的博客
2689
名词解释 集成：在推送或者 merge 代码后自动进行构建打包 交付：将上一步生成的代码包发布至测试、生产等环境 需求 在 git 代码仓库发生变化后，自动执行打包脚本，并且发布至服务器。 解决的问题 在之前每次开发完毕需要上线之前，需要手动执行 bash 命令打包，并且将打包后的代码人为的拖动至上传应用（FlileZilla Pro）。 手动执行构建脚本消耗时间人力 而拖动代码文件会存在拖拽错误，覆盖之前的其他项目代码等难以预料的问题 工具选择 gitlab/github/gitee Jenki
前端自动化介绍
张营的技术博客
1815
文章目录DevOps介绍前端自动化自动化相关概念问题提出常见现象最佳实践 DevOps介绍 相信大家或多或少的听过这个词DevOps，而且看起来很高大上，其实这个是敏捷开发的一种执行流程表现，先来一张经典的DevOps流程图： 具体的流程为： 先是计划plan，编码code，然后编译build，测试test（Dev） 然后发布release，部署deploy，运维operate，监控monitor（Ops） 然后发现问题或有新的需求，就重新计划plan。。。如此循环 这就是完整的DevOps流程。 下
前端项目自动部署
weixin_29005819的博客
1190
一、实现的最终效果 点击一下，即可实现 项目打包 文件压缩(便于上传到服务器) 连接服务器 备份 上传打包的文件 解压 完成部署 二、原理及需要的插件 原理： 执行shell脚本 需要的npm依赖包：archiver(压缩)，ssh2（执行脚本：如连接服务器，解压等操作） 三、详细步骤 3.1 安装包 yarn add archiver ssh2 3.2 引入包和编写配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa
前端自动化测试详解
wdquan19851029的专栏
2405
这篇文章主要向大家介绍前端自动化测试详解,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。 1 前言 文章研究了四个问题：什么是自动化测试、为何要自动化测试、什么项目适合自动化测试、自动化测试具体要怎么作。在寻找这四个问题答案的过程当中，梳理了一套完整的前端自动化测试方案，包括：单元测试、接口测试、功能测试、基准测试。 2 什么是自动化测试 维基网络是这样定义的html 在软件测试中，测试自动化（英语：Test automation）是一种测试方法，使用特定的软件，去控制测试
Gitlab-ci:从零开始的前端自动化部署
大灰狼的小绵羊哥哥的博客
2669
前言 本文为首发原创，同时转载至公众号“全栈前端精选“和“广发证券金融科技”中 目录 一.概念介绍 1.1 gitlab-ci && 自动化部署工具的运行机制 1.2 自动化部署给我们带来的好处 二.知识预备 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本语法规则 2.3 .gitlab-ci.yml配置的特定关键字 三.CI实战 3.1 编写一个gitlab-ci的“he
vue前端用服务器上路径的图片展示_谈谈前端性能自动化
weixin_39968640的博客
1445
前述：前段时间出了性能分析的需求，需要对前端页面性能做一套自动化测试工具。领导都发话了，那咱说干就干。花了一周时间去找资料以及匹配优秀并且合适的开源插件。花了一个月的时间(断断续续，需求也要做的~)完成了这个工具的建设和开发。目前也搭建了一套平台来支撑这样的工具使用。前端用的VUE，后端用的node(由于本人较熟悉前端)，数据库用的是mangoDB。好了，话不多说，上才艺~设计背景 & 前...
实现前端项目自动化部署（webpack+nodejs）
winne雪
2097
前言： 一般来说，我们前端是不需要关心部署的事情的，只需要把打包后的文件直接丢给后台去部署就可以了。但是呢，如果频繁修改一点东西就要叫后台进行部署，这样后台会很烦（毕竟人家还有其他工作嘛），我们也会很不好意思。 或许有些公司会给前端配置可视化操作服务器文件的软件（FTP客户端），这时我们就可以打包后自己到服务器上部署了，如果不同环境需要部署到不同服务器，此时我们又需要区分打包再手动上传到服务器上。 这时我们就会想，有没有直接一句命令就能自动化部署到不同服务器上，根本不需要打开软件来手动上传的？？？ 答案：必
前端项目自动化部署——超详细教程（Jenkins、Github Actions）
q411020382的博客
1374
参考资料 Docker 入门教程
常用的前端自动化构建工具gulp/grunt/fis --简介
杜杜的博客
235
常用的前端自动化构建工具 之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力，那么我们会了解 Gulp Grunt fIS 用法基本相同：都是通过一些简单的代码，组织一些插件的使用，然后就可以用工具代替我们一些重复的工作，增强开发效率。 Grunt 是基于内磁盘实现的 最早的自动化构建工具 Grunt(点击可进入官网查看) 优点： 它的插件几乎可以帮助我们完成任何我们想要做的事情， 缺点： 由于工作过程是基于临时文件去实现的，所以构建速度较慢。 下
前端自动化部署项目到服务器 -- 一行命令搞定，摒弃传统的手工部署 npm run build
一个来自外太空的游客
2353
传统的前端代码手工部署流程如下： 传统的手工部署需要经历： 1.打包，本地运行npm run build打包生成dist文件夹。 2.ssh连接服务器，切换路径到web对应目录下。 3.上传代码到web目录，一般通过xshell或者xftp完成。 传统的手工部署存在以下缺点： 1.每次都需要打开xshell软件与服务器建立连接。 2.当负责多个项目且每个项目都具有测试环境和线上环境时，容易引起部署错误。 （个人之前非常悲剧地遇到过一次，由于同时负责四个项目，八个环境。一天同时可能修改多个项目，
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
©️2022 CSDN 皮肤主题：大白 设计师：CSDN官方博客 返回首页
关于我们
招贤纳士
商务合作
寻求报道
400-660-0108
[email protected]
在线客服
工作时间 8:30-22:00
公安备案号11010502030143
京ICP备19004658号
京网文〔2020〕1039-165号
经营性网站备案信息
北京互联网违法和不良信息举报中心
家长监护
网络110报警服务
中国互联网举报中心
Chrome商店下载
账号管理规范
版权与免责声明
版权申诉
出版物许可证
营业执照
©1999-2023北京创新乐知网络技术有限公司
iamaddy
码龄8年
暂无认证
3
原创
42万+
周排名
115万+
总排名
8683
访问
等级
122
积分
2
粉丝
3
获赞
0
评论
1
收藏
私信
关注
热门文章
聊聊前端自动化 3903
扒一扒前端构建工具FIS的内幕 3474
web前端性能优化–缓存 1306
分类专栏
javascript
3篇
技术
3篇
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
扒一扒前端构建工具FIS的内幕
web前端性能优化–缓存
2015年1篇2014年2篇
举报
————————————————
版权声明：本文为CSDN博主“iamaddy”的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/iamaddy/article/details/42364137
Ⅳ 如何使用jekens自动化部署
自动远程部署，可以使用wagon-maven-plugin插件把war包传到服务器指定目录下 自动打tag,其实就是执行一下svn ，设置权限使内容不再修改
Ⅳ 阿里云 云效Devops流水线Flow自动化部署前端项目
Dockerfile
1、新建流水线模板
2、添加流水线源
3、nodejs构建
4、主机部署
5、保存并运行
6、回滚操作