V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeungJZ
V2EX  ›  程序员

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

  •  4
     
  •   LeungJZ ·
    JZLeung · 2018-03-13 09:52:22 +08:00 · 10804 次点击
    这是一个创建于 2452 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前提:

    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-03-13 09:57:56 +08:00
    用 CI 打包
    paragon
        2
    paragon  
       2018-03-13 09:58:13 +08:00
    CI 走起 还造什么轮子啊~
    XyCinus
        3
    XyCinus  
       2018-03-13 10:00:59 +08:00   ❤️ 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-03-13 10:02:43 +08:00
    @AlwaysBehave
    @paragon
    一直搞不懂你们说的 CI 究竟是个啥。渣渣,勿喷。
    fatjiong
        5
    fatjiong  
       2018-03-13 10:03:58 +08:00
    持续集成( Continuous integration ) https://baike.baidu.com/item/持续集成 /6250744
    tomczhen
        6
    tomczhen  
       2018-03-13 10:05:08 +08:00   ❤️ 1
    有 CI 楼主就不会问这个问题了。

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

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


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

    用心找一下..自然知道有啥开源 ci 了..
    youEclipse
        58
    youEclipse  
       2018-03-13 16:58:22 +08:00   ❤️ 1
    jenkins/gitlab CI + Docker;

    Docker 内部有一个 nginx,一个前端项目一个 container。
    guyskk0x0
        59
    guyskk0x0  
       2018-03-13 17:08:03 +08:00   ❤️ 1
    Drone CI 了解一下: https://github.com/ncuhome/getdrone
    LeungJZ
        60
    LeungJZ  
    OP
       2018-03-13 17:16:31 +08:00
    @youxiachai 好吧。现在可能不用 CI 而用第二种方法。


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


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

    @tianakong
    walle 的看上去配置比较简单。
    XyCinus
        78
    XyCinus  
       2018-03-14 12:19:28 +08:00
    @LeungJZ Continuous Integration/Continuous Deploy (CI/CD) 持续集成 /持续部署
    horizon
        79
    horizon  
       2018-03-14 16:46:49 +08:00
    @LeungJZ 我们是自己做了一个发布平台,用户自己上去点部署。并不是每一次 push 都要构建的吧。。。
    chen90902
        80
    chen90902  
       2018-05-23 17:03:16 +08:00
    @youEclipse docker+ jenkins,思路不错。小公司也想弄一套出来
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3920 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 05:10 · PVG 13:10 · LAX 21:10 · JFK 00:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.