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

LeungJZ · 2018-03-13T01:52:22Z

前提：纯前端，不涉及后端框架（如 TP，laravel 等）。单独一个域名，nginx 会解析目录。服务器配置貌似是 4C8G 还是 8C16G 的。要求：不用 ftp 上传，不用 scp 传输开发文件在 src 目录下，打包文件在 dist 目录下，可参考 vue。我现在个人能想到的方法有：用 githook 去实现在服务器中新建一个空仓库，开发完成后，push 到服务器的仓库中，然后自动拉取，打包。用 gitlab 的 webhook 实现在 gitlab 的项目中新建一个 deploy 分支，开发完后打包文件，将打包好的文件 push 到 deploy 分支中，通过 webhook 去触发服务器中某个脚本，脚本 reset --hard 去拉取 deploy 的文件。第一种方法可以实现。第二种方法不知道可行不可行。不知道大家有没有其他更好的方法？

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

This topic created in 2985 days ago, the information mentioned may be changed or developed.

前提：

纯前端，不涉及后端框架（如 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 replies • 2018-05-23 17:03:16 +08:00

AlwaysBehave

Mar 13, 2018

用 CI 打包

paragon

Mar 13, 2018

CI 走起还造什么轮子啊~

XyCinus

Mar 13, 2018

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

LeungJZ

Mar 13, 2018

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

fatjiong

Mar 13, 2018

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

tomczhen

Mar 13, 2018

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

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

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

v2chou

Mar 13, 2018

楼上的有么有相关文章啊

chairuosen

Mar 13, 2018

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

LeungJZ

Mar 13, 2018

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

wei745359223

Mar 13, 2018

Jenkins 自动构建

wangxiaoaer

Mar 13, 2018 via Android

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

LeungJZ

Mar 13, 2018

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

williamx

Mar 13, 2018

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

charexcalibur

Mar 13, 2018

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

CoderGeek

Mar 13, 2018

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

jorneyr

Mar 13, 2018

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

Mar 13, 2018

rsync 同步文件

zenxds

Mar 13, 2018

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

otakustay

Mar 13, 2018

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

zjsxwc

Mar 13, 2018

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

LeungJZ

Mar 13, 2018

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

hxtheone

Mar 13, 2018

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

hasbug

Mar 13, 2018

关注学习

wbf5431005

Mar 13, 2018

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

chooin

Mar 13, 2018

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

LeungJZ

Mar 13, 2018

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

wengjin456123

Mar 13, 2018

mark

LeungJZ

Mar 13, 2018

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

nowcoder

Mar 13, 2018

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

williamx

Mar 13, 2018

@LeungJZ #21 git 是自动的？

LeungJZ

Mar 13, 2018

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

huangzxx

Mar 13, 2018

gitlab-ci

mrcotter2013

Mar 13, 2018

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

codespots

Mar 13, 2018

jenkins

MinonHeart

Mar 13, 2018 via iPhone

知乎第一条

zenxds

Mar 13, 2018

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

zthxxx

Mar 13, 2018

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

LeungJZ

Mar 13, 2018

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

huangzxx

Mar 13, 2018

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

beginor

Mar 13, 2018 via Android

打包在 docker 里面

wangxiaoaer

Mar 13, 2018 via Android

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

LeungJZ

Mar 13, 2018

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

lemonlwz

Mar 13, 2018

推荐 gitlab ci

mars0prince

Mar 13, 2018

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

guomuzz

Mar 13, 2018

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

OMGZui

Mar 13, 2018

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

Leleoleon

Mar 13, 2018

Jenkins

LeungJZ

Mar 13, 2018

@mars0prince
抱歉了，真没用。

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

LeungJZ

Mar 13, 2018

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

notedown

Mar 13, 2018

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

etc

Mar 13, 2018

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

youyoumarco

Mar 13, 2018

jenkins 调用服务器脚本实现

AntonChen

Mar 13, 2018 via Android

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

ytmsdy

Mar 13, 2018

fabric

bhaltair

Mar 13, 2018

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

bhaltair

Mar 13, 2018

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

youxiachai

Mar 13, 2018

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

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

youEclipse

Mar 13, 2018

jenkins/gitlab CI + Docker;

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

guyskk0x0

Mar 13, 2018

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

LeungJZ

Mar 13, 2018

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

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

zarte

Mar 13, 2018

@LeungJZ 为啥不用 svn 了？

gxm44

Mar 13, 2018

jenkins + aws s3

polun

Mar 13, 2018

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

HowToMakeLove

Mar 13, 2018

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

graysheeep

Mar 13, 2018

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

yuanfnadi

Mar 13, 2018 via iPhone

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

Bijiabo

Mar 13, 2018

scottyjs 部署亚马逊 S3

loveCoding

Mar 13, 2018

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

LeungJZ

Mar 13, 2018

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

LeungJZ

Mar 13, 2018

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

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

tairan2006

Mar 13, 2018

用 CI，或者写部署脚本

yuanfnadi

Mar 13, 2018

@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

Mar 13, 2018 via Android

我比较 low 用的 fabric

LeungJZ

Mar 14, 2018

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

tianakong

Mar 14, 2018

java 版的 Jenkins
php 版的 walle

horizon

Mar 14, 2018

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

LeungJZ

Mar 14, 2018

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

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

XyCinus

Mar 14, 2018

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

horizon

Mar 14, 2018

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

chen90902

May 23, 2018

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