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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2454 天前的主题，其中的信息可能已经有所发展或是发生改变。

前提：

纯前端，不涉及后端框架（如 TP，laravel 等）。
单独一个域名，nginx 会解析目录。
服务器配置貌似是 4C8G 还是 8C16G 的。

要求：

不用 ftp 上传，不用 scp 传输
开发文件在 src 目录下，打包文件在 dist 目录下，可参考 vue。

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

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

第一种方法可以实现。

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

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

deploy

打包

文件

gitlab

80 条回复 • 2018-05-23 17:03:16 +08:00

AlwaysBehave

2018-03-13 09:57:56 +08:00

用 CI 打包

paragon

2018-03-13 09:58:13 +08:00

CI 走起还造什么轮子啊~

XyCinus

2018-03-13 10:00:59 +08:00

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

LeungJZ

2018-03-13 10:02:43 +08:00

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

fatjiong

2018-03-13 10:03:58 +08:00

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

tomczhen

2018-03-13 10:05:08 +08:00

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

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

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

v2chou

2018-03-13 10:17:40 +08:00

楼上的有么有相关文章啊

chairuosen

2018-03-13 10:21:22 +08:00

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

LeungJZ

2018-03-13 10:25:25 +08:00

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

wei745359223

2018-03-13 10:27:38 +08:00

Jenkins 自动构建

wangxiaoaer

2018-03-13 10:29:53 +08:00 via Android

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

LeungJZ

2018-03-13 10:37:27 +08:00

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

williamx

2018-03-13 10:44:11 +08:00

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

charexcalibur

2018-03-13 10:46:23 +08:00

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

CoderGeek

2018-03-13 10:49:06 +08:00

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

jorneyr

2018-03-13 10:57:02 +08:00

我们是利用 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

2018-03-13 11:01:29 +08:00

rsync 同步文件

zenxds

2018-03-13 11:19:55 +08:00

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

otakustay

2018-03-13 11:24:07 +08:00

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

zjsxwc

2018-03-13 11:24:50 +08:00

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

LeungJZ

2018-03-13 11:34:26 +08:00

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

hxtheone

2018-03-13 11:36:27 +08:00

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

hasbug

2018-03-13 11:37:12 +08:00

关注学习

wbf5431005

2018-03-13 11:38:58 +08:00

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

chooin

2018-03-13 11:43:14 +08:00

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

LeungJZ

2018-03-13 11:46:13 +08:00

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

wengjin456123

2018-03-13 11:46:36 +08:00

mark

LeungJZ

2018-03-13 11:47:04 +08:00

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

nowcoder

2018-03-13 11:49:52 +08:00

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

williamx

2018-03-13 11:56:48 +08:00

@LeungJZ #21 git 是自动的？

LeungJZ

2018-03-13 11:59:27 +08:00

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

huangzxx

2018-03-13 12:00:48 +08:00

gitlab-ci

mrcotter2013

2018-03-13 12:18:55 +08:00

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

codespots

2018-03-13 12:19:20 +08:00

jenkins

MinonHeart

2018-03-13 12:23:43 +08:00 via iPhone

知乎第一条

zenxds

2018-03-13 12:47:19 +08:00

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

zthxxx

2018-03-13 12:56:37 +08:00

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

LeungJZ

2018-03-13 13:01:58 +08:00

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

huangzxx

2018-03-13 13:04:00 +08:00

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

beginor

2018-03-13 14:01:03 +08:00 via Android

打包在 docker 里面

wangxiaoaer

2018-03-13 14:04:13 +08:00 via Android

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

LeungJZ

2018-03-13 14:04:34 +08:00

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

lemonlwz

2018-03-13 14:11:27 +08:00

推荐 gitlab ci

mars0prince

2018-03-13 14:13:53 +08:00

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

guomuzz

2018-03-13 14:16:23 +08:00

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

OMGZui

2018-03-13 14:17:42 +08:00

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

Leleoleon

2018-03-13 14:32:40 +08:00

Jenkins

LeungJZ

2018-03-13 14:35:04 +08:00

@mars0prince
抱歉了，真没用。

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

LeungJZ

2018-03-13 14:36:02 +08:00

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

notedown

2018-03-13 14:45:34 +08:00

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

etc

2018-03-13 14:46:30 +08:00

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

youyoumarco

2018-03-13 15:12:22 +08:00

jenkins 调用服务器脚本实现

AntonChen

2018-03-13 15:38:15 +08:00 via Android

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

ytmsdy

2018-03-13 16:14:05 +08:00

fabric

bhaltair

2018-03-13 16:17:56 +08:00

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

bhaltair

2018-03-13 16:19:40 +08:00

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

youxiachai

2018-03-13 16:48:14 +08:00

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

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

youEclipse

2018-03-13 16:58:22 +08:00

jenkins/gitlab CI + Docker;

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

guyskk0x0

2018-03-13 17:08:03 +08:00

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

LeungJZ

2018-03-13 17:16:31 +08:00

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

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

zarte

2018-03-13 18:43:38 +08:00

@LeungJZ 为啥不用 svn 了？

gxm44

2018-03-13 18:50:50 +08:00

jenkins + aws s3

polun

2018-03-13 19:12:46 +08:00

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

HowToMakeLove

2018-03-13 19:17:40 +08:00

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

graysheeep

2018-03-13 19:25:52 +08:00

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

yuanfnadi

2018-03-13 19:53:28 +08:00 via iPhone

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

Bijiabo

2018-03-13 19:56:32 +08:00

scottyjs 部署亚马逊 S3

loveCoding

2018-03-13 20:26:41 +08:00

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

LeungJZ

2018-03-13 22:55:28 +08:00

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

LeungJZ

2018-03-13 22:56:26 +08:00

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

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

tairan2006

2018-03-13 23:26:37 +08:00

用 CI，或者写部署脚本

yuanfnadi

2018-03-13 23:27:00 +08:00

@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

2018-03-13 23:52:17 +08:00 via Android

我比较 low 用的 fabric

LeungJZ

2018-03-14 09:09:49 +08:00

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

tianakong

2018-03-14 09:18:43 +08:00

java 版的 Jenkins
php 版的 walle

horizon

2018-03-14 09:42:55 +08:00

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

LeungJZ

2018-03-14 09:59:42 +08:00

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

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

XyCinus

2018-03-14 12:19:28 +08:00

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

horizon

2018-03-14 16:46:49 +08:00

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

chen90902

2018-05-23 17:03:16 +08:00

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