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

V2EX = way to explore

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

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

前提：

纯前端，不涉及后端框架（如 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，思路不错。小公司也想弄一套出来