2/5 Shifter Meetup Vol.8 でソラコム シニアソフトウェアエンジニア清水(Yuta)による発表資料

1. コーポレートサイトを
Shifter に移行した話
Shifter meetup
2020/02/05
株式会社ソラコム
シニアソフトウェアエンジニア
清水雄太

2. 清水 雄太
株式会社ソラコム
シニアソフトウェアエンジニア
ソラコムの Software engineer 兼、便利屋
・フロントエンド開発とバックエンド開発を行ったり来たり
・ウェブサイトの構築をサポートしたり
・新オフィスのディレクションしたり、ISMS取得したり
自己紹介

3. ちょっとだけソラコムの紹介

4. 2015年9月30日発表
IoT 向けプラットフォーム
SORACOM

5. あらゆる現場をつなげる SORACOM のデータ通信
IoT 向けデータ通信
SORACOM Air
セルラー LPWA
2G / 3G / LTE LTE-M LoRaWANSigfox
どこでもつながる
• 場所や配線の制約からの解放
• 事前設定の不要化
適用可能なシーンの拡大
IoT 向けの料金
• 1回線からオンラインでご利用可能
• 「上り」に最適化された料金体系
スモールスタートから
ビッグビジネスまでカバー

6. 15000以上のお客様、100万を超える IoT 回線

7. Webから回線管理、速度変更、利用量把握、監視可能

8. SORACOM User Group あります！

9. SORACOM User Group あります！

12. Shifter を入れるまでのいきさつ

13. 突然ですが、

14. Web マーケティングは
大事
（特にスタートアップ）

15. ソラコムが運営している主なウェブサイト
コーポレートサイト (日本) コーポレートサイト (海外)
エンジニアブログコーポレートブログ
ユーザーサイト
キャンペーンサイト各種

16. ソラコムが運営している主なウェブサイト
コーポレートサイト (日本) コーポレートサイト (海外)
エンジニアブログコーポレートブログ
ユーザーサイト
キャンペーンサイト各種
某CMSなど

17. ソラコムが運営している主なウェブサイト
コーポレートサイト (日本) コーポレートサイト (海外)
エンジニアブログコーポレートブログ
ユーザーサイト
キャンペーンサイト各種
某CMSなど

18. ソラコムが始まった頃のチーム (2015)
WordPress 運用は避けたかった
• サービス開発に集中したい
主にエンジニアが記事を更新
• Markdown & Pull Request
（弊社エンジニアのイメージ）

19. ソラコムが運営していた主なウェブサイト 2015
コーポレートサイト (日本)
エンジニアブログ
ユーザーサイト
キャンペーンサイト各種

20. その後ちょっと経った段階のチーム
マーケティングの社員も更新に参加
• イベントの開催情報
• 導入事例の掲載
• リード文の調整など
でもまだエンジニアが多く関与
• マーケティングのメンバーに Github を
教えてどうにかやってもらう
github を熱血指導する
弊社エンジニア（イメージ）

21. 時は流れ・・・

22. 今のチーム
マーケティングチームの更新頻度が優位に
• メンバーも増え、短時間ですばやく手軽に
更新したい（CMSください）との声
エンジニアリングとマーケティングの
ドキュメントの分離
• ウェブサイトを目的ごとに整理し、役割分担を
明確に
SEO や SNS などに励む
弊社マーケティング（イメージ）

23. コーポレートサイトをどうにかしたい！
コーポレートサイト (日本)
エンジニアブログ
ユーザーサイト
キャンペーンサイト各種

24. 海外のチームが独自に Shifter を導入
• US のチームのウェブサイト製作者が Shifter を知っていた
• 日本のチームが Shifter を知るきっかけ

25. Shifter の良いところ
WordPress 管理やデプロイが整備されている
• WordPress インスタンスの構築・運用をしなくてよい
• 負荷の心配をしなくてよい
WordPress が編集時だけ立ち上がる
• セキュリティリスクが低減
APIがある
• Slack との連携などがいろいろ捗りそう（未使用）

26. よし、移行してみよう！

27. 移行時の要望と制約
• 移行期間中もウェブサイトは日々更新できるようにしてほしい
• なるべく早くWordPress上で更新できるようにしてほしい
• 移行にかかる費用は抑えてほしい

28. 移行前の構成
AWS Cloud
gitclone
編集・deploy
S3 bucketAmazon CloudFront
default

29. ゴールは Shifter への完全移行
AWS Cloud
編集・deploy
S3 bucketAmazon CloudFront
default
廃止
gitclone
編集・deploy

30. どうやって移行するか
まず、WordPress に移行する必要がある

31. WordPress への移行手順
• 既存のウェブサイトを元にテーマを作成
• ウェブサイトの構成を整理
• WordPress 上での構成を検討
• 整理した構成にしたがって順番に移行
お世話になった本

32. 移行時の要望と制約
• 移行期間中もウェブサイトは日々更新できるようにしてほしい
• ページ数が多く、移行には少なくとも数ヶ月かかる
• なるべく早くWordPress上で更新できるようにしてほしい
• ページ数が多く、移行には少なくとも数ヶ月かかる
• 移行にかかる費用は抑えてほしい
• できる作業は内製することで費用を節約

33. 段階的に移行できないか？🤔

34. めざす姿
AWS Cloud
編集・deploy
S3 bucketAmazon CloudFront
default
廃止
gitclone
廃止

35. 段階的に移行するイメージ
AWS Cloud
gitclone
deploy
S3 bucketAmazon CloudFront
default
Shifter に移行したページ
移行前のページ

36. AWS Cloudfront の Behavior を活用
• パスをパターンマッチして
転送先にShifterを指定
• マッチしなければ S3へ
• キャッシュは Shifter 側に
任せたいので、各種 TTL を
0 に設定

37. 段階的に移行するイメージ
AWS Cloud
gitclone
deploy
S3 bucketAmazon CloudFront
default
Shifter に移行したページ

38. 段階的に移行できた！

39. Shifter での更新作法のレクチャー
WordPressの使い方
• デプロイ時に静的に吐き出すので、予約投稿が効かない。
• アーキテクチャを理解していないとやりがちなポイント
Shifter の使い方
• 管理画面の使い方
• Artifact の生成と Deployの作法

40. Shifter 運用の工夫

41. 同時編集をさける
• アーティファクトの作成時に WordPress インスタンスが
意図しない更新が混ざるのを避けたい
• 現状は Slack で宣言することによる楽観的ロック
• もうちょっとスマートにやりたい
• Shifter 起動をAPI経由にして Slack に通知するとか

42. まとめ

43. 結果
• （WordPressに移行したことによって）マーケティングメンバー
は更新作業が捗るようになってハッピーに
• エンジニアは WordPress インスタンスや継続的デプロイ
環境の構築・運用が不要でハッピーに
• まだ移行が完了していないけれど、更新頻度の高いものは
Shifter の恩恵に預かれています。

44. 学び
WordPress の構築ノウハウは必須
• 運用は楽だけど、構築は普通に WordPress でちゃんとやる必要が
ある
• 不安があれば経験者に頼るのが結局コスパが良い
• 丸投げではなく自分でも学ぶことでよりよい結果につながる
静的にデプロイするので、WordPress の標準機能が
使えなくなったりするので運用方法の周知・教育が重要

45. Shifter さんに聞きたいこと
WordPress インスタンスがシャットダウンする法則を知りたい
• 一定時間放置すると自動的にシャットダウンする？
バックアップをいい感じにやる方法
• データベースのバックアップ
• WordPress構成のバックアップ
予約公開したいなー（アーキテクチャ的に難しそう）
テンプレートの効率良い更新方法

46. 最後に

47. We are hiring!
careers.soracom.jp
業務拡大につき、各ポジションで絶賛採用中です！
・パートナーエコシステムマネージャー
・プロジェクトマネージャー
・サポートエンジニア
などなど
気軽に声をかけてください！

49. ご清聴ありがとうございました