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

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

  •  3
     
  •   LeungJZ · 102 天前 · 6588 次点击
    这是一个创建于 102 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前提:

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

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

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


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

    用心找一下..自然知道有啥开源 ci 了..
        58
    youEclipse   102 天前   ♥ 1
    jenkins/gitlab CI + Docker;

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


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


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

    @tianakong
    walle 的看上去配置比较简单。
        78
    XyCinus   101 天前
    @LeungJZ Continuous Integration/Continuous Deploy (CI/CD) 持续集成 /持续部署
        79
    horizon   101 天前
    @LeungJZ 我们是自己做了一个发布平台,用户自己上去点部署。并不是每一次 push 都要构建的吧。。。
        80
    chen90902   31 天前
    @youEclipse docker+ jenkins,思路不错。小公司也想弄一套出来
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1357 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 24ms · UTC 01:23 · PVG 09:23 · LAX 18:23 · JFK 21:23
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1