你们公司的前端代码如何部署的? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
LeungJZ
V2EX    程序员

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

  •  4
     
  •   LeungJZ
    JZLeung 2018 年 3 月 13 日 11661 次点击
    这是一个创建于 2870 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前提:

    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 的文件。

    第一种方法可以实现。

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

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

    80 条回复    2018-05-23 17:03:16 +08:00
    AlwaysBehave
        1
    AlwaysBehave  
       2018 年 3 月 13 日
    用 CI 打包
    paragon
        2
    paragon  
       2018 年 3 月 13 日
    CI 走起 还造什么轮子啊~
    XyCinus
        3
    XyCinus  
       2018 年 3 月 13 日   1
    S3 静态托管 + CloudFront 分发 + AWS CM 申请 ssl 证书 + route 53 买域名配 dns
    全球 cdn, https 都有了
    部署就用 aws 命令行, 写个脚本 ,传 s3 就好了
    或者 开个 EC2 跑个 GOCD/Jenkins, 做持续集成部署:
    本地 push 到 github, GOCD/Jenkins 直接去 github 拉取代码, 跑测试 -》 跑脚本, 部署 S3
    LeungJZ
        4
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @AlwaysBehave
    @paragon
    一直搞不懂你们说的 CI 究竟是个啥。渣渣,勿喷。
    fatjiong
        5
    fatjiong  
       2018 年 3 月 13 日
    持续集成( Continuous integration ) https://baike.baidu.com/item/持续集成 /6250744
    tomczhen
        6
    tomczhen  
       2018 年 3 月 13 日   1
    有 CI 楼主就不会问这个问题了。

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

    觉得麻烦,写个 deploy shell 脚本做这个也行。
    v2chou
        7
    v2chou  
       2018 年 3 月 13 日
    楼上的 有么有相关文章啊
    chairuosen
        8
    chairuosen  
       2018 年 3 月 13 日
    不让直接传还是不让 scp 传?不让 scp 就 rsync 嘛
    LeungJZ
        9
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @chairuosen
    不让 scp 传。没有密码,没有密钥。
    wei745359223
        10
    wei745359223  
       2018 年 3 月 13 日
    Jenkins 自动构建
    wangxiaoaer
        11
    wangxiaoaer  
       2018 年 3 月 13 日 via Android
    之前自己的网站是用放在 coding 上,通过 webhook 通知服务器,然后服务器调用一个脚本 git 下载源码,然后编译打包,拷贝。
    LeungJZ
        12
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @wangxiaoaer 就是还是在服务器中打包咯?
    williamx
        13
    williamx  
       2018 年 3 月 13 日
    你这不是部署的问题,你这是上传权限的问题。
    charexcalibur
        14
    charexcalibur  
       2018 年 3 月 13 日
    一直都是手动部署,学习一下大佬们的姿势
    CoderGeek
        15
    CoderGeek  
       2018 年 3 月 13 日
    。。。我能说我在服务器上写了个脚本 定时执行 git pull QAQ
    jorneyr
        16
    jorneyr  
       2018 年 3 月 13 日
    我们是利用 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
        17
    zhaoFinger  
       2018 年 3 月 13 日
    rsync 同步文件
    zenxds
        18
    zenxds  
       2018 年 3 月 13 日   1
    我司现在用第二种方法,亲测可行,只有特定的分支或者 tag 会触发部署,用 git archive 下载对应提交的代码,解压 build 目录的代码到 cdn 源站目录
    otakustay
        19
    otakustay  
       2018 年 3 月 13 日
    各种都有,做过 jenkins 直接调起 server 上脚本的,做过 paas 平台提供部署的,做过 docker 部署的
    zjsxwc
        20
    zjsxwc  
       2018 年 3 月 13 日
    写个 python 脚本,提供一个浏览器页面, 点击就无脑 git pull
    LeungJZ
        21
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @williamx
    没有上传权限,只用 git 好像也可以。
    hxtheone
        22
    hxtheone  
       2018 年 3 月 13 日
    第二种方案感觉已经有 CI 的雏形了, 剩下的就是把这些活儿放到一个持续集成的环境(比如 Jenkins)里, 一套脚本 pipeline 全搞定, 美滋滋
    hasbug
        23
    hasbug  
       2018 年 3 月 13 日
    关注学习
    wbf5431005
        24
    wbf5431005  
       2018 年 3 月 13 日
    感觉我连半吊子前端都不算了,只会写 div+css
    chooin
        25
    chooin  
       2018 年 3 月 13 日
    https://github.com/Hema-FE/cdn-cli 直接发布到 cdn 呀
    LeungJZ
        26
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @zenxds
    那你们有没有在钩子中执行 shell ?
    wengjin456123
        27
    wengjin456123  
       2018 年 3 月 13 日
    mark
    LeungJZ
        28
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @chooin
    公司暂无 cdn。走服务器。
    nowcoder
        29
    nowcoder  
       2018 年 3 月 13 日
    自己写了一个脚本,拉文件,合并压缩,改版本号,上传阿里云 oss 一键搞定。
    williamx
        30
    williamx  
       2018 年 3 月 13 日
    @LeungJZ #21 git 是自动的?
    LeungJZ
        31
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @williamx
    git 只要配置完就可以了呀。
    huangzxx
        32
    huangzxx  
       2018 年 3 月 13 日
    gitlab-ci
    mrcotter2013
        33
    mrcotter2013  
       2018 年 3 月 13 日   1
    前阵子开始使用 Travis CI 自动部署我的 Blog 和另一个网站。Blog 在 GitHub Pages 上,配置很简单,源码在 raw 分支,生成的静态文件在 master ;另一个网站最后使用 rsync 同步数据,需要先配置好 SSH key。现在很方便,只要 push 到 repo,Travis CI 就会自动开始 build 和 deploy。
    codespots
        34
    codespots  
       2018 年 3 月 13 日
    jenkins
    MinonHeart
        35
    MinonHeart  
       2018 年 3 月 13 日 via iPhone
    知乎第一条
    zenxds
        36
    zenxds  
       2018 年 3 月 13 日
    @LeungJZ 肯定执行了,一些目录切换、git 操作、解压、文件拷贝等
    zthxxx
        37
    zthxxx  
       2018 年 3 月 13 日   1
    大公司里怎样开发和部署前端代码 - 张云龙
    https://www.zhihu.com/question/20790576/answer/32602154
    LeungJZ
        38
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @huangzxx
    那个 runner 哪来?还是说自己搭建 gitlab ?
    huangzxx
        39
    huangzxx  
       2018 年 3 月 13 日
    @LeungJZ
    自建 gitlab 呀,你的第一,第二是方法 gitlab-ci 都可以搞定。
    beginor
        40
    beginor  
       2018 年 3 月 13 日 via Android
    打包在 docker 里面
    wangxiaoaer
        41
    wangxiaoaer  
       2018 年 3 月 13 日 via Android
    @LeungJZ 对,服务器打包防止运行环境导致的编问题。
    LeungJZ
        42
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @huangzxx gitlab 配置略麻烦了,而且公司不一定会用。
    lemonlwz
        43
    lemonlwz  
       2018 年 3 月 13 日
    推荐 gitlab ci
    mars0prince
        44
    mars0prince  
       2018 年 3 月 13 日
    后端用啥你就用啥啊,我不信你们后端部署不用 jenkins 之流的 CI 的
    guomuzz
        45
    guomuzz  
       2018 年 3 月 13 日
    2 你可以 node 起个服务 每次更新的话 手动触发 node node 调用服务器脚本执行 git pull
    跟你的 2 原理一样只是触发方式不一样
    Leleoleon
        47
    Leleoleon  
       2018 年 3 月 13 日
    Jenkins
    LeungJZ
        48
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @mars0prince
    抱歉了,真没用。


    @lemonlwz
    这个可能有点繁琐吧。
    LeungJZ
        49
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @OMGZui
    看起不错,但是只支持 github 就尴尬了。公司的项目并不是开源的啊。
    notedown
        50
    notedown  
       2018 年 3 月 13 日
    首先是解决前端缓存的问题.后缀+版本号 接口返回
    然后 cdn 加速
    然后统一打包成一个文件.
    能编写 200kb 左右的 vue 就很多页面了 +cdn 压缩基本很少了. 4g 无压力
    etc
        51
    etc  
       2018 年 3 月 13 日
    Jenkins 每 10 分钟监控一次 svn 路径,有文件更新就触发服务器上的脚本拉代码。
    youyoumarco
        52
    youyoumarco  
       2018 年 3 月 13 日
    jenkins 调用服务器脚本 实现
    AntonChen
        53
    AntonChen  
       2018 年 3 月 13 日 via Android
    git tag 拉到临时目录,rsync 排除配置文件和 .git
    ytmsdy
        54
    ytmsdy  
       2018 年 3 月 13 日
    fabric
    bhaltair
        55
    bhaltair  
       2018 年 3 月 13 日
    前端打好 tag 运维拉代码 部署到 nginx 服务器上
    bhaltair
        56
    bhaltair  
       2018 年 3 月 13 日
    自己的项目 写个 deploy shell 脚本 rsync 直接把 dits/推到服务器上
    youxiachai
        57
    youxiachai  
       2018 年 3 月 13 日
    @LeungJZ ....楼上科普了那么多 ci..这个只是让你知道 ci 是怎么工作而已..你还真用这个...

    用心找一下..自然知道有啥开源 ci 了..
    youEclipse
        58
    youEclipse  
       2018 年 3 月 13 日   1
    jenkins/gitlab CI + Docker;

    Docker 内部有一个 nginx,一个前端项目一个 container。
    guyskk0x0
        59
    guyskk0x0  
       2018 年 3 月 13 日   1
    Drone CI 了解一下: https://github.com/ncuhome/getdrone
    LeungJZ
        60
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @youxiachai 好吧。现在可能不用 CI 而用第二种方法。


    @bhaltair 现在可能用第二种方法。而且,暂时没有运维。之前都是用 svn 打包上传的,访问时通过 TP 路由访问。
    zarte
        61
    zarte  
       2018 年 3 月 13 日
    @LeungJZ 为啥不用 svn 了?
    gxm44
        62
    gxm44  
       2018 年 3 月 13 日
    jenkins + aws s3
    polun
        63
    polun  
       2018 年 3 月 13 日
    都用 Gitlab 了, 就用 GitLab CI/CD。
    HowToMakeLove
        64
    HowToMakeLove  
       2018 年 3 月 13 日
    最简单的方式
    在服务器目录创建一个可 web 方式访问的程序,里面创建子进程 执行 git pull 命令。
    每次要上线,就先上传指定分支,然后访问一下写的有钩子的网页
    graysheeep
        65
    graysheeep  
       2018 年 3 月 13 日
    @youEclipse 哥们能说下具体方案么 很好奇
    yuanfnadi
        66
    yuanfnadi  
       2018 年 3 月 13 日 via iPhone
    Dockerfile 构建之后把结果放到一个 nginx 镜像里。
    然后外部 nginx 指向这个镜像
    Bijiabo
        67
    Bijiabo  
       2018 年 3 月 13 日
    scottyjs 部署亚马逊 S3
    loveCoding
        68
    loveCoding  
       2018 年 3 月 13 日
    交给专业的持续集成工具来做
    LeungJZ
        69
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @zarte
    因为麻烦,一个项目一个 svn。
    打包完后,就要两边发布。
    LeungJZ
        70
    LeungJZ  
    OP
       2018 年 3 月 13 日
    @polun
    gitlab 是线上的 gitlab 不是自己搭建的。


    @HowToMakeLove
    现在采取的是,gitlab 的 webhook 去触发一个脚本去拉取。
    tairan2006
        71
    tairan2006  
       2018 年 3 月 13 日
    用 CI,或者写部署脚本
    yuanfnadi
        72
    yuanfnadi  
       2018 年 3 月 13 日
    @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
        73
    xiadd  
       2018 年 3 月 13 日 via Android
    我比较 low 用的 fabric
    LeungJZ
        74
    LeungJZ  
    OP
       2018 年 3 月 14 日
    @yuanfnadi
    关键是,runner 哪来?要在自己的服务器搭一个 runner,不搭 gitlab 吗?
    tianakong
        75
    tianakong  
       2018 年 3 月 14 日
    java 版的 Jenkins
    php 版的 walle
    horizon
        76
    horizon  
       2018 年 3 月 14 日
    用 docker 拉取 gitlab 仓库代码,执行构建脚本。拿到构建产物上传 CDN。。
    LeungJZ
        77
    LeungJZ  
    OP
       2018 年 3 月 14 日
    @horizon
    那前置条件就是,如何提醒 docker 去拉取呢?还是得用上 webhook 吗?

    @tianakong
    walle 的看上去配置比较简单。
    XyCinus
        78
    XyCinus  
       2018 年 3 月 14 日
    @LeungJZ Continuous Integration/Continuous Deploy (CI/CD) 持续集成 /持续部署
    horizon
        79
    horizon  
       2018 年 3 月 14 日
    @LeungJZ 我们是自己做了一个发布平台,用户自己上去点部署。并不是每一次 push 都要构建的吧。。。
    chen90902
        80
    chen90902  
       2018 年 5 月 23 日
    @youEclipse docker+ jenkins,思路不错。小公司也想弄一套出来
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     3098 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 31ms UTC 13:11 PVG 21:11 LAX 05:11 JFK 08:11
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86