你们公司的前端代码如何部署的？

[LeungJZ]

前提：

1. 纯前端，不涉及后端框架（如 TP，laravel 等）。

2. 单独一个域名，nginx 会解析目录。

3. 服务器配置貌似是 4C8G 还是 8C16G 的。

要求：

1. 不用 ftp 上传，不用 scp 传输

2. 开发文件在 src 目录下，打包文件在 dist 目录下，可参考 vue。

我现在个人能想到的方法有：

1. 用 githook 去实现 在服务器中新建一个空仓库，开发完成后，push 到服务器的仓库中，然后自动拉取，打包。

2. 用 gitlab 的 webhook 实现 在 gitlab 的项目中新建一个 deploy 分支，开发完后打包文件，将打包好的文件 push 到 deploy 分支中，通过 webhook 去触发服务器中某个脚本，脚本 reset --hard 去拉取 deploy 的文件。

第一种方法可以实现。

第二种方法不知道可行不可行。

不知道大家有没有其他更好的方法？

[AlwaysBehave]

用 CI 打包

[paragon]

CI 走起 还造什么轮子啊~

[XyCinus]

S3 静态托管 + CloudFront 分发 + AWS CM 申请 ssl 证书 + route 53 买域名配 dns
全球 cdn, https 都有了
部署就用 aws 命令行, 写个脚本 ,传 s3 就好了
或者 开个 EC2 跑个 GOCD/Jenkins, 做持续集成部署:
本地 push 到 github, GOCD/Jenkins 直接去 github 拉取代码, 跑测试 -》 跑脚本, 部署 S3

[LeungJZ]

@AlwaysBehave
@paragon
一直搞不懂你们说的 CI 究竟是个啥。渣渣，勿喷。

[fatjiong]

持续集成（ Continuous integration ） https://baike.baidu.com/item/持续集成 /6250744

[tomczhen]

有 CI 楼主就不会问这个问题了。

git hook 还得建仓库，多麻烦，推荐参考 hexo 的方式，本地 build 完成后通过 ssh 或 api 的方法把 build 结果传输到 服务器目录或静态托管上。

觉得麻烦，写个 deploy shell 脚本做这个也行。

[v2chou]

楼上的 有么有相关文章啊

[chairuosen]

不让直接传还是不让 scp 传？不让 scp 就 rsync 嘛

[LeungJZ]

@chairuosen
不让 scp 传。没有密码，没有密钥。

[wei745359223]

Jenkins 自动构建

[wangxiaoaer]

之前自己的网站是用放在 coding 上，通过 webhook 通知服务器，然后服务器调用一个脚本 git 下载源码，然后编译打包，拷贝。

[LeungJZ]

@wangxiaoaer 就是还是在服务器中打包咯？

[williamx]

你这不是部署的问题，你这是上传权限的问题。

[charexcalibur]

一直都是手动部署，学习一下大佬们的姿势

[CoderGeek]

。。。我能说我在服务器上写了个脚本 定时执行 git pull QAQ

[jorneyr]

我们是利用 Gradle 的 ssh 脚本部署项目的，虽然是 Java 的工具，但是目的只是为了远程运行个脚本，也可以用在前端部署，不妨参考一下，部署的时候就是执行一条命令就可以了：
task deploy(dependsOn: war) {
def targetDir = '/data/xtuer.com'
doLast {
ssh.run {
session(remotes.server) {
put from: "${buildDir}/libs/${war.archiveName}", into: "${targetDir}"
execute """
source /root/.bash_profile;
/usr/local/tomcat/bin/shutdown.sh;
rm -rf ${targetDir}/ROOT;
unzip -u ${targetDir}/${war.archiveName} -d ${targetDir}/ROOT > /dev/null;
rm -rf ${targetDir}/${war.archiveName};
kill `ps aux | grep -i tomcat | grep -v grep | awk '{print \$2}'`;
/usr/local/tomcat/bin/startup.sh;
"""
}
}
}
}

[zhaoFinger]

rsync 同步文件

[zenxds]

我司现在用第二种方法，亲测可行，只有特定的分支或者 tag 会触发部署，用 git archive 下载对应提交的代码，解压 build 目录的代码到 cdn 源站目录

[otakustay]

各种都有，做过 jenkins 直接调起 server 上脚本的，做过 paas 平台提供部署的，做过 docker 部署的

[zjsxwc]

写个 python 脚本，提供一个浏览器页面， 点击就无脑 git pull

[LeungJZ]

@williamx
没有上传权限，只用 git 好像也可以。

[hxtheone]

第二种方案感觉已经有 CI 的雏形了, 剩下的就是把这些活儿放到一个持续集成的环境(比如 Jenkins)里, 一套脚本 pipeline 全搞定, 美滋滋

[hasbug]

关注学习

[wbf5431005]

感觉我连半吊子前端都不算了，只会写 div+css

[chooin]

https://github.com/Hema-FE/cdn-cli 直接发布到 cdn 呀

[LeungJZ]

@zenxds
那你们有没有在钩子中执行 shell ？

[wengjin456123]

mark

[LeungJZ]

@chooin
公司暂无 cdn。走服务器。

[nowcoder]

自己写了一个脚本，拉文件，合并压缩，改版本号，上传阿里云 oss 一键搞定。

[williamx]

@LeungJZ #21 git 是自动的？

[LeungJZ]

@williamx
git 只要配置完就可以了呀。

[huangzxx]

gitlab-ci

[mrcotter2013]

前阵子开始使用 Travis CI 自动部署我的 Blog 和另一个网站。Blog 在 GitHub Pages 上，配置很简单，源码在 raw 分支，生成的静态文件在 master ；另一个网站最后使用 rsync 同步数据，需要先配置好 SSH key。现在很方便，只要 push 到 repo，Travis CI 就会自动开始 build 和 deploy。

[codespots]

jenkins

[MinonHeart]

知乎第一条

[zenxds]

@LeungJZ 肯定执行了，一些目录切换、git 操作、解压、文件拷贝等

[zthxxx]

大公司里怎样开发和部署前端代码 - 张云龙
https://www.zhihu.com/question/20790576/answer/32602154

[LeungJZ]

@huangzxx
那个 runner 哪来？还是说自己搭建 gitlab ？

[huangzxx]

@LeungJZ
自建 gitlab 呀，你的第一，第二是方法 gitlab-ci 都可以搞定。

[beginor]

打包在 docker 里面

[wangxiaoaer]

@LeungJZ 对，服务器打包防止运行环境导致的编问题。

[LeungJZ]

@huangzxx gitlab 配置略麻烦了，而且公司不一定会用。

[lemonlwz]

推荐 gitlab ci

[mars0prince]

后端用啥你就用啥啊，我不信你们后端部署不用 jenkins 之流的 CI 的

[guomuzz]

2 你可以 node 起个服务 每次更新的话 手动触发 node node 调用服务器脚本执行 git pull
跟你的 2 原理一样只是触发方式不一样

[OMGZui]

http://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html

[Leleoleon]

Jenkins

[LeungJZ]

@mars0prince
抱歉了，真没用。


@lemonlwz
这个可能有点繁琐吧。

[LeungJZ]

@OMGZui
看起不错，但是只支持 github 就尴尬了。公司的项目并不是开源的啊。

[notedown]

首先是解决前端缓存的问题.后缀+版本号 接口返回
然后 cdn 加速
然后统一打包成一个文件.
能编写 200kb 左右的 vue 就很多页面了 +cdn 压缩基本很少了. 4g 无压力

[etc]

Jenkins 每 10 分钟监控一次 svn 路径，有文件更新就触发服务器上的脚本拉代码。

[youyoumarco]

jenkins 调用服务器脚本 实现

[AntonChen]

git tag 拉到临时目录，rsync 排除配置文件和 .git

[ytmsdy]

fabric

[bhaltair]

前端打好 tag 运维拉代码 部署到 nginx 服务器上

[bhaltair]

自己的项目 写个 deploy shell 脚本 rsync 直接把 dits/推到服务器上

[youxiachai]

@LeungJZ ....楼上科普了那么多 ci..这个只是让你知道 ci 是怎么工作而已..你还真用这个...

用心找一下..自然知道有啥开源 ci 了..

[youEclipse]

jenkins/gitlab CI + Docker;

Docker 内部有一个 nginx,一个前端项目一个 container。

[guyskk0x0]

Drone CI 了解一下： https://github.com/ncuhome/getdrone

[LeungJZ]

@youxiachai 好吧。现在可能不用 CI 而用第二种方法。


@bhaltair 现在可能用第二种方法。而且，暂时没有运维。之前都是用 svn 打包上传的，访问时通过 TP 路由访问。

[zarte]

@LeungJZ 为啥不用 svn 了？

[gxm44]

jenkins + aws s3

[polun]

都用 Gitlab 了， 就用 GitLab CI/CD。

[HowToMakeLove]

最简单的方式
在服务器目录创建一个可 web 方式访问的程序，里面创建子进程 执行 git pull 命令。
每次要上线，就先上传指定分支，然后访问一下写的有钩子的网页

[graysheeep]

@youEclipse 哥们能说下具体方案么 很好奇

[yuanfnadi]

Dockerfile 构建之后把结果放到一个 nginx 镜像里。
然后外部 nginx 指向这个镜像

[Bijiabo]

scottyjs 部署亚马逊 S3

[loveCoding]

交给专业的持续集成工具来做

[LeungJZ]

@zarte
因为麻烦，一个项目一个 svn。
打包完后，就要两边发布。

[LeungJZ]

@polun
gitlab 是线上的 gitlab 不是自己搭建的。


@HowToMakeLove
现在采取的是，gitlab 的 webhook 去触发一个脚本去拉取。

[tairan2006]

用 CI，或者写部署脚本

[yuanfnadi]

@LeungJZ
@graysheeep

关键词 gitlab-ci.

gitlab 的项目可以绑定 gitlab-runner。然后在项目中写一个.gitlab-ci.yml 设定构建发布的流程。
每当项目有变化时候，gitlab-runner 就会自动把代码拉取到镜像 /机器中执行你需要到操作。
例如我自己的博客。我每次提交 commit gitlab 就会把我博客到代码拉到一个构建镜像中执行构建。
构建完成后会把构建出来的结果复制到一个 nginx 的镜像。然后再会把镜像推送到阿里云仓库。
之后 gitlab runner 会执行部署操作。从阿里云拉取镜像。部署前端项目。
在外部还有一个 nginx 指向发布的新 nginx。 写的有点乱。







image: docker:ci

stages:
- build
- deploy

build:
stage: build
script:
- build
only:
- master
- tags
when: on_success
tags:
- aliyun-hk-1

deploy:
stage: deploy
script:
- deploy-docker-compose
only:
- master
- tags
when: on_success
tags:
- aliyun-hk-1

[xiadd]

我比较 low 用的 fabric

[LeungJZ]

@yuanfnadi
关键是，runner 哪来？要在自己的服务器搭一个 runner，不搭 gitlab 吗？

[tianakong]

java 版的 Jenkins
php 版的 walle

[horizon]

用 docker 拉取 gitlab 仓库代码，执行构建脚本。拿到构建产物上传 CDN。。

[LeungJZ]

@horizon
那前置条件就是，如何提醒 docker 去拉取呢？还是得用上 webhook 吗？

@tianakong
walle 的看上去配置比较简单。

[XyCinus]

@LeungJZ Continuous Integration/Continuous Deploy (CI/CD) 持续集成 /持续部署

[horizon]

@LeungJZ 我们是自己做了一个发布平台，用户自己上去点部署。并不是每一次 push 都要构建的吧。。。

[chen90902]

@youEclipse docker+ jenkins，思路不错。小公司也想弄一套出来