Yuhei Hara LINE / Front-end Dev5 Team 数多くのWebサービスを提供しているLINEでは、エンジニアの開発をサポートする為の様々なツールが自社内で開発されています。その内の一つでありフロントエンドの開発組織で運用しているのが、html、js、cssなど静的ファイルをCDNに配信するツールのabyssで、400以上のプロジェクトがこのabyssを通じて配信されます。 元々あった古いツールを刷新する為に開発が始まったabyssですが、フロントエンドの開発手法の変化に伴って生じていた問題や、古い基盤からの移行に際して考慮すべきことなどに対する様々なアイデアが盛り込まれました。 技術面では様々な構成を検討し、APIサーバーにExpress+Node.js+TypeScript、権限管理のWebダッシュボードにNuxtを採用するなど、既存の技術に拘らずより良い物を採用する、というスタンスで開発を進めています。 本セッションでは、私たちの命綱とも呼べるabyssの開発を巡る諸々、またフロントエンドの開発にどのように関わっているかについて発表します。

1. Agenda

2. Agenda • Abyssについて
• 開発
• 今後
• まとめ

3. Image her
ABYSS

4. ABYSS
Frontend開発組織(UIT室)が自前で開発、運用している
静的ファイルの配信(deploy)システム
直訳で深淵、という意味

5. CDNにファイルを配信する為のシステム
ざっくり言うと

6. Abyss CDNDeveloper
User
User
User
配信

8. デモ

9. • エンジニアもたくさん
• プロジェクトが多い(400とか。。)
• アクセス量が多い(止まった時の損失)
LINEのFrontEnd開発

10. 自由にやってしまうと
• rsync
• FTP
• S3 cloudfront
• fastly, netlify
• backend

11. 配信の方法を標準化したい

12. Image her
開発

13. KMB ⇨ ABYSS

14. Static Server
CDNAPI ServerDeveloper
KMB
GitHub
設計
Asset
Clone
PM

15. いけてない
PullRequestが毎回Conflictする！
他にも、、
ログを取ってないとか
PrivateCloud(Verda)に移行したいとか

16. ObjectStorage
CDNAPI ServerDeveloper
DB
Abyss
GitHub
設計
Log
Asset
Pull
Cloud

17. Static ServerAPI Server
KMB
Clone
Asset
CDN
Developer
GitHub
設計
Cloud
ObjectStorage
API Server
DB
Abyss

18. Static ServerAPI Server
KMB
Clone
CDN
Developer
GitHub
設計
ObjectStorage
API Server
DB
Abyss
Log
Asset
Pull
Cloud

19. Image her
今後

20. ビルドをCircleCi(or Drone)でやりたい
デプロイの権限管理がしたい
デプロイのUIが欲しい
まだまだいけてない

22. 開発は続く

23. Image her
まとめ

24. THANK YOU