Railsdm day4で発表した内容です

1. Railsとフロントエンドリソースの
健全な共存のために
西村奈令大
Sansan株式会社

2. Who am I ???
西村 奈令大 (Narihiro Nishimura)
@engine_NN
@nishimuraNN
Sansan株式会社 (2017.9 ~)
Eight事業部
webエンジニア

3. Who am I ???
西村 奈令大 (Narihiro Nishimura)
@engine_NN
@nishimuraNN
Sansan株式会社 (2017.9 ~)
Eight事業部
webエンジニア Androidエンジニア

4. 3

5. What is ‘Eight’ ???
200万人が利用する、名刺でつながるビジネスのためのSNS

6. フロントエンドとRailsを切り離したい

7. 前提
- Web版Eightの画面はSPAで構成されている (ログイン画面、トップ画面、
ランディングページを除く)
- フロントリソースの大部分がsprocketsに依存していた
- ちょっとした変更でもassets:precompileを実行してビルドを回す必要が
あった
- Backbone → Reactの移行の影響で、SPAの画面で使うjsのみwebpackでの
ビルドが行われていた

8. 古の姿
front app/assets
hoge.js
hoge.js
fuga.css
Amazon S3
index.html
yarn run build
assets precompile

9. 古の姿
front app/assets
hoge.js
hoge.js
fuga.css
Amazon S3
index.html
yarn run build
assets precompile
使っていないリソースが溢れている 👿
jsファイルのビルドが重複してしまっている 👿
jsとcssでビルドプロセスが違う 👿
Railsとの結合が密になってしまっている👿
ビルドが遅い(約20分・・・) 👿

10. 古の姿
front app/assets
hoge.js
hoge.js
fuga.css
Amazon S3
index.html
yarn run build
assets precompile
使っていないリソースが溢れている 👿
jsファイルのビルドが重複してしまっている 👿
jsとcssでビルドプロセスが違う 👿
Railsとの結合が密になってしまっている👿
ビルドが遅い(約20分・・・) 👿

11. 第一弾刷新に向けて
10

12. 刷新第一弾に向けて
11
未使用のリソースを削除する
フロントエンドリソースのビルドをwebpackに統一する
ビルドの重複を一部解消する

13. 刷新第一弾に向けて
12
未使用のリソースを削除する
フロントエンドリソースのビルドをwebpackに統一する
ビルドの重複を一部解消する

14. 見ろ、リソースがゴミのようだ
13
使われていないリソースが山のように転がっていた
- スポットのキャンペーンで使われていた
- ディレクトリ移動の際に忘れ去られた
- 作るだけ作ってそもそも中身が空っぽ 😱
20+のスタイルシート
20+の画像
10+のview

15. 14

16. 刷新第一弾に向けて
15
未使用のリソースを削除する
フロントエンドリソースのビルドをwebpackに統一する
ビルドの重複を一部解消する

17. 引っ越し
16
- app/assets配下にあったスタイルシート、webフォント、imageファイルを
jsファイルが管理されているディレクトリにすべて移動
- webpack.configに設定を追加

18. 刷新第一弾に向けて
17
未使用のリソースを削除する
フロントエンドリソースのビルドをwebpackに統一する
ビルドの重複を一部解消する

19. 一部？？
18
- 依存性を解消したいとはいえ、いきなりすべて引っ剥がすのはリスクがあ
りそう
→ 圧縮、ファイルbundleはwebpackに移して、それ以降のプロセス
（digest値付与など）はsprocketsに残す
- ローカル環境はdigest値がなくても問題ないはずなのでsprocketsを通さな
いでよさそう
→ webpack-dev-serverを導入し、ファイルサーバーを立ち上げる

20. 刷新第一弾 (production)
front app/assets
hoge.js bundle.js
fuga.css
Amazon S3
index.html
yarn run build
assets precompile
(digest値付与)
bundle.css

21. 刷新第一弾 (development)
front app/assets
hoge.js bundle.js
fuga.css
index.html
bundle.css
localhost:4000
yarn run build -env.dev
ここは経由しない

22. 第一弾刷新成功
21
- jsとcssのビルドがwebpackに統一された ✨
- フロントリソースの独立性が向上した ✨
- 開発中のassets:precompileが不要になった ✨

23. 第二弾刷新に向けて
22

24. 第二弾刷新に向けて
23
今度こそ引っ剥がす（SPA関連のビルドのみ）
ビルドを爆速にする

25. 第二弾刷新に向けて
24
今度こそ引っ剥がす（SPA関連のビルドのみ）
ビルドを爆速にする

26. どうやって分離させるか
25
- digest値の付与をwebpack側に寄せる
→ webpack-manifest-pluginを導入
- ビルド後のファイルのS3へのアップロードもwebpack内で完結させる
→ ビルドされたリソースに加え、ビルド時に生成されたmanifest.jsonを
S3に置く

27. 第二弾刷新に向けて
26
今度こそ引っ剥がす（SPA関連のビルドのみ）
ビルドを爆速にする

28. 犯人は誰だ
27
構成がだいぶ最適化され、依存性もなくなってきた。
しかし・・・
構成刷新前：10分
構成刷新後：10分

29. webpack-s3-plugin
28
yarn install
yarn run build --env.release #{frontend_env}
rm #{node_modules_dir}
aws s3 cp ./front/.build s3://#{bucket_name}/assets/webpack --recursive
※ 実際のコマンドとは一部異なります

30. 刷新第二弾
front app/assets
hoge.js static.js
fuga.css
Amazon S3
index.html
yarn run build
assets precompile
static.cssmanifest1.json manifest2.json

31. よかったこと
30
- 重複していたプロセスが解消され、ビルドが早くなった ✨
→ 20分近くかかっていたビルドが6分足らずで完了するように
- SPAのリソースはassets:precompileが不要になり、Railsから分離された✨
- フロントエンドとサーバーサイドの完全分業が見えてきた ✨

32. まとめ
31
- フロントエンドリソースのビルドプロセスを見直し、仕組みを刷新
- 重複している処理や不要なものを取り除くことによって、より軽くよりシ
ンプルに
- 依存性の低下、ビルド時間の短縮、開発効率の向上をもたらした

33. 32
こんなアツい開発ができる組織って
ステキだなー・・・

34. 33
なんてぼんやり考えてた
そこのyou!!

35. 34
いい会社、知ってますよ

36. We’re hiring!!