一个开源的web平台,法国的新总统

这个案例研究是一个帖子写的Titouan Galopin、首席工程师和产品领先EnMarche项目。请注意,这是一个严格的技术文章;任何政治评论将被自动删除。

希望你的公司出现在Symfony官方博客吗?ob娱乐下载发送一个建议和案例研究到fabien.potencier@sensiolabs.com

项目背景

2016年4月,伊曼纽尔长音符号现在法国总统,创建了一个政治运动被称为“En马尔凯!”(“移动”英文),最初作为一个上门操作问公众与法国是错误的。

不像成熟的政党,在马尔凯!没有任何基础设施、预算或成员支持它的原因。这就是为什么在马尔凯!依靠网络的力量自一开始找到支持者,促进事件和收集捐款。

我开始工作在马尔凯!2016年10月作为志愿者。团队很小,所有的操作都由一个人维护。所以他们高兴地接受了我的建议来帮助他们。当时,与WordPress创建平台,但我们需要以允许更快和更定制开发。Symfony的选择是自然的ob娱乐下载:它符合项目大小,我都遇到过,鳞片容易处理的大量用户。

体系结构概述

项目的可伸缩性是当务之急,尤其是在他们面对的问题的第一个版本的平台,不是用Symfony建造的。ob娱乐下载下面的图显示了项目的体系结构概述,这是非常可伸缩和冗余在需要的地方:

我们使用谷歌引擎和容器Kubernetes提供可伸缩性、滚动更新和负载平衡。

Symfob娱乐下载ony应用是建立从地面Dockerized应用程序。配置应用程序使用环境变量和只读保持可伸缩:我们不生成任何文件在运行时在容器中。应用程序缓存生成在构建码头工人的图像,然后在同步服务器使用ob娱乐下载Symfony缓存组件结合一个复述实例。

有两个工人,由RabbitMQ管理,处理一些沉重的业务背景:发送邮件(有时我们必须发送电子邮件在一个45 k请求)和建筑使用的序列化JSON用户列表,几个部分的应用程序,以避免处理那些缓慢而复杂的SQL查询。

使用谷歌云SQL数据库,我们不需要一个集中的MySob直播appQL数据库管理。连接到它,我们使用ob直播app云SQL代理码头工人的形象。

部署

项目使用持续交付策略,不同的持续部署方式:每个提交自动部署在一台登台服务器但生产部署手册。谷歌容器引擎和Kubernetes是关键组件部署流。

持续交付过程,以及单元测试和功能测试,是由CircleCI处理。我们也使用StyleCI(确保新代码匹配其他项目)的编码风格和SensioLabsInsight(执行自动化代码质量分析)。这三个服务被配置为检查每个拉请求之前必须通过合并。

当拉请求合并,持续交付过程(参见开始配置文件):

1. 验证在谷歌云使用圆CI环境变量。ob直播app
2. 构建Javascript文件生产。
3. 构建项目的三个码头工人的图片(应用,邮件工人,用户列表工人)。
4. 推动建立图像注册谷歌容器。
5. 使用kubectl命令行工具来更新交付准备服务器(滚动更新)。

唯一的手动执行过程(故意)SQL迁移。即使可以自动化,我们更愿意仔细审查这些迁移之前将它们应用于生产防止严重的错误。

前端

应用程序的前端不遵循单页面应用程序模式。事实上,我们想要用最少的Javascript可以提高性能和依赖本机浏览器功能。

反应+ Webpack

应用程序的JavaScript代码是使用编译与Webpack反应实现的。我们不用回来的——甚至React-Router——但纯代码,反应我们页面上加载组件只在特定的容器,而不是与他们建立整个页面。这是有用的,有两个原因:

• HTML内容完全呈现在反应之前被加载,然后根据需要修改页面内容的反应。这使得应用程序可用的JavaScript,即使页面仍然是装载在低速网络。这种技术被称为“渐进增强”,它极大地提高了性能。
• 我们用树摇晃和Webpack 2块加载,所以必要时每个页面只加载的组件,因此不膨胀简化应用程序代码。

这种技术让我们组织前端代码如下:

• 一个前/目录应用程序存储所有SASS的根源和JavaScript文件。
• 一个小kernel.js文件加载JavaScript供应商和并行应用程序代码。
• 一个app.js文件加载不同的应用程序组件。
• 在树枝的模板,我们每个页面加载所需的组件(例如,地址自动完成组件。

前端性能

前端性能是经常被忽视,但应用程序的网络通常是最大的瓶颈。节省几毫秒后端不带你太远了,但节省3秒或更多图片的加载时间会改变你的网站的感知。

图像是主要的前端性能问题。竞选经理想发布大量的图像,但用户想要快速读取页面。解决方案是使用强大的压缩算法和应用其他技巧。

首先,我们存储在谷歌云存储图像内容和元数据在数据库中(使用ob直播app教义的实体称为媒体)。例如,这让我们知道图像尺寸而不需要加载它。这帮助我们创建一个网页设计不跳来跳去,而图像加载。

第二,我们结合媒体实体的日期滑翔图书馆实现:

• 背景图像缩放:例如,图片上显示的小网格块的主页可以更小,分辨率低于相同的图像显示为主要形象的文章。
• 更好的图像压缩:图像编码为进步jpeg质量的70%。这种变化相比,大幅提高了加载时间PNG等其他格式。

驶入Symfony的集成与一个简单的端点ob娱乐下载AssetController我们使用签名和缓存来减轻DDoS攻击这个端点。

第三,我们都懒加载图片滚动,它包括三个步骤:

1. 加载的所有元素在滚动尽可能快,并等待它下面的。
2. 超负载低分辨率版本的图片滚动(滑移)生成和使用本地JavaScript代码应用高斯模糊滤镜。
3. 取代这些高质量图像加载时模糊的占位符。

我们实现了一个应用程序Javascript侦听器应用这种行为到处都在网站上。

形式

该项目包括一些有趣的形式。第一个是报名参加网络形式:根据国家和邮政编码字段,城市场的变化从一个输入文本填充选择列表。

在技术上有两个字段:“某个”和“城市”(第二个代码分配给城市按照法国规定)。从请求表单组件填充这两个领域,像往常一样。

在视图方面,最初只显示某个字段。如果所选的国家是法国,我们使用一些JavaScript代码来展示城市的选择列表。这个JavaScript代码也听邮政编码字段的更改事件,使一个AJAX请求相关的城市名单。在服务器端,如果所选的国家是法国,我们需要提供一个城市代码,否则我们使用某个字段。

这种技术是一个很好的例子渐进增强技术讨论了本文前面一点。JavaScript代码,一切,只是一个辅助更好的做一些事情,但这不是使特性工作的关键。

当使用这些地址字段的很多应用程序中,我们的一个AddressType表单类型与一个地址Javascript组件。

其他有趣的形式是让你发送一个邮件给某人试图说服他们为候选人投票。这是一个多步骤的形式,问一些问题,另一个人(性别、年龄、工作类型、感兴趣的话题,等等),然后生成定制的内容,可以通过电子邮件发送。

技术形式结合了一种高度动态的Symfony和工作流组件,它是一个很好的例子,如何整合。ob娱乐下载实现基于一个模型类InvitationProcessor从一个多步骤和填充动态表单类型并将内容存储在会话中。工作流组件是用来确保模型对象有效,定义转换被允许为每个模型状态:明白了InvitationProcessorHandler和工作流。yml配置。

搜索引擎

搜索引擎,燃烧的快,提供实时搜索结果,由Algolia。集成指数应用程序实体(文章、页面、委员会、事件等)是由AlgoliaSearchBundle。

这个包真的很有用。我们只是添加了一些注释原则实体和之后,搜索指数自动更新时创建一个实体,更新或删除。从技术上讲,包听主义事件,所以你不需要做任何事情来保持搜索内容总是更新。

安全

与其他知名网站,我们一些攻击的目标协调和由强大的组织。最强力的攻击是本质和目的是把网站而不是渗透。

网站的目标DDoS攻击八次在整个活动中,五人在最后两个星期。Symfony应用没有影响,因为基于Kubernetob娱乐下载es Cloudflare缓解和随需应变的可伸缩性。ob直播app

首先,我们遭受了三个基于WordPress广播的攻击。攻击者使用成千上万的砍WordPress网站广播请求发送到我们的网站,快速重载它。我们添加了一些检查nginx的配置来缓解这种攻击。

所需的其他袭击是更复杂的和减轻Cloudflare和清漆。ob直播app使用Clouob直播appdfare缓存资产非常有效,我们认为没有必要反向代理。然而,反向代理证明有必要在DDoS攻击:在最后几天的竞选活动中,袭击是巨大的(高达每秒300000个请求),我们不得不禁用用户系统和启用Cloudfare“缓存一切”的旗帜。ob直播app

没有什么可以防止安全攻击,但你可以减轻他们遵守Symfony的最佳实践,,顺便说一下,是为数不多的开源项目ob娱乐下载开展公共安全审计。

开源

的en-marche.fr网络平台及其相关的开源项目@EnMarche GitHub帐户。我们没有推动这个想法太多,因为开源很复杂的解释非技术人员。然而,我们收到了一些来自人们发现项目,很高兴,这是开源的。

我们也想回馈Symfony项目开发贡献一些元素。ob娱乐下载例如,UnitedNationsCountryType表单类型对于一些项目可能是有用的。我们还开发了一个与Mailjet服务集成,可以作为一个Symfony包发布。ob娱乐下载