railsでつくるなんちゃってserverless CMS〜コーポレートサイト編〜

【オンライン開催】銀座Rails#24@リンクアンドモチベーション
https://ginza-rails.connpass.com/event/181807/

でLTした際に使用したスライドを公開用に加筆・修正したものです。

Transcript

1. 3"*-4Ͱͭ͘Δ ͳΜͪΌͬͯ4&37&3-&44
   $.4 ʙίʔϙϨʔταΠτฤʙ 2020.08.28(Fri.) 銀座Rails#24 @free_world21
2. ▪ ⼩林 ノエル（36） ▪ 職業︓ソフトウェアエンジニア – フリーランス – エメラダ株式会社 (emerada.co.jp) 執⾏役員 ▪ 2008: フリーランスエンジニアとして独⽴ – flash/C#/rails/iOS/Androidなどなど ▪ 2009: ⼤学院修了（情報理⼯学修⼠） ▪ 2009: IPA未踏事業に採択される ▪ 2016: エメラダ株式会社に参画 ▪ 2018: 同社執⾏役員 ▪ 〜現在: フリーランス＆会社員として活動中 ▪ 趣味︓旅⾏・世界のコワーキングスペースめぐり （ワーケーション︖） @free_world21 ANA B777-300 NH11 THE FARM@NY nomad works@NY CARR WORKPLACE@Chicago
3. 前回までの あらすじ とあるフリーランス案件の場合
4. TTC(Total Trafic Control) PTC(Programed Trafic Control) TID(Traffic Information Display) TID server TID client 鉄道システムの雑な説明
5. TTC(Total Trafic Control) PTC(Programed Trafic Control) TID(Traffic Information Display) TID server client 鉄道システムの雑な説明 ⽬的 スマホアプリとして 表⽰したい︕ *スクショは既存アプリの例
6. Serverless技術を活⽤したアーキテクチャ TID server TID clientもどき VPN Amazon VPC Amazon S3 Bucket JSONに変換 CI/CDでデプロイ アプリに配信 HTML内 のJSが 取 得 *スクショは既存アプリの例
7. 会社員としての とある案件 時は進み
8. エメラダ株式会社 ▪ 2016年創業 ▪ ⾦融分野で3業種の登録をし、1業種は売却・廃業 クラウドファンディング形式で 個⼈投資家が未上場のベンチャーに 投資できるサービス 2017年11⽉リリース *2019年10⽉事業譲渡 *証券業を廃業 2018年5⽉リリース 成⻑中⼩企業を中⼼に 累計10億円を融資実⾏ 成⻑中⼩企業向け オンラインレンディング サービス 銀⾏と中⼩企業を結ぶ 資⾦繰り管理＆モニタリング サービス 2019年5⽉リリース 地銀＆信⾦を中⼼に数⼗⾏（庫）に 導⼊済み emerada-bank.com emerada-marketplace.com
9. 背景 ▪ EMERADA EQUITY (クラウドファンディング・証券業) をたちあげるまで – テザーサイト件コーポレートサイトを最初wordpressで構築 – その裏で実際のサービスをrailsで開発。完成したらwordpressの サイトと切り替えた。 ▪ サービスサイト兼コーポレートサイト ▪ EMERADA BANK (オンラインレンディング・貸⾦業) をたちあげるまで – 新規サービスなのでrailsでフルスクラッチで実装 – 完成後はそのまま公開 ▪ サービスサイトが2つあり、うち1つがコーポレートサイトを兼ねて いる状態 ▪ しかし会社としてはむしろレンディングのほうをメインにしたかっ た ▪ コーポレートサイトは別で必要だろうという結論
10. クラウドファンディング形式で 個⼈投資家が未上場のベンチャーに 投資できるサービス 成⻑中⼩企業向け オンラインレンディング サービス emerada-bank.com emeradaco.com コーポレートサイト emerada.co.jp こんなかんじにしたい！
11. ではコーポレートサイトをどう作る︖ ▪ ⼀番簡単でありがちなのはやっぱりwordpress ▪ ただエンジニアのリソースは本来のサービス開発に集中させたかった ▪ ⼀⽅社内的にも「そろそろインターンとったら︖」という雰囲気があった ▪ エンジニアインターンを雇ってwordpressでコーポレートサイト構築というのも 1つの案としてはありだった ▪ ただ「せっかく優秀な学⽣やとってwordpressのメンテの仕事とかさせるのって どうなの︖」という思い – 幸いにして情報系の⼤学⽣・⼤学院⽣からの応募が数件あった – 注︓wordpressをdisる意図はございません ▪ ってかコーポレートサイトなんだし、基本静的コンテンツしかないんだから serverlessでよくない︖ ▪ せっかく優秀な学⽣雇えるなら電⾞アプリの時にやったような、railsでコンテ ンツを管理して(HTML/CSS/JSを⽣成して)、それをAWSにデプロイするような serverlessなコーポレートサイトを作るほうが⾯⽩いと思う
12. AWS 閲覧 https://emerada.co.jp 社員 コンテンツの 管理 ユーザ HTMLを配置する コーポレートサイト 管理アプリ なんちゃってserverless CMS CloudFront (CDN)
13. コーポレートサイトの要件など ▪ 動的にコンテンツ管理したいのはとりあえず2つ（管理画⾯で管理したい） – メディア実績のCRUD – プレスリリースのCRUD – トップページ ▪ 管理者アカウントの管理機能 – 管理者アカウントを作れるアカウント (super_admin) – メディア実績とプレスリリースを作成・編集できるアカウント (editor) – メディア実績とプレスリリースを承認・公開できるアカウント (authorizer) ▪ その他のページは静的でOK（HTMLの直書きコーディング） – 会社概要 – サービス内容 – メンバー紹介 – 求⼈情報 ▪ インターン学⽣さんへの教育的観点からも、RailsとAWS、with-server(?)とserverlessの 両⽅を触れ、⾃分で作ったものを世に公開できる経験はとても良いと思った – ⼩林とインターンの学⽣さんの2⼈プロジェクトとしてスタート
14. + app + models - admin_user.rb - press_release.rb - media_record.rb + controllers + admin - home_controller.rb - admin_users_controller.rb - press_releases_controller.rb - media_records_controller.rb - publishes_controller.rb - home_controller.rb - company_info_controller.rb - members_controller.rb - careers_controller.rb - services_controller.rb - press_releases_controller.rb - media_records_controller.rb + services - s3_publisher.rb Railsアプリの構成
15. Railsアプリの構成 + app + models - admin_user.rb - press_release.rb - media_record.rb + controllers + admin - home_controller.rb - admin_users_controller.rb - press_releases_controller.rb - media_records_controller.rb - publishes_controller.rb - home_controller.rb - company_info_controller.rb - members_controller.rb - careers_controller.rb - services_controller.rb - press_releases_controller.rb - media_records_controller.rb + services - s3_publisher.rb • admin_userはdeviseのモデル • press_releaseとmedia_recordは ActiveRecordのモデル
16. Railsアプリの構成 + app + models - admin_user.rb - press_release.rb - media_record.rb + controllers + admin - home_controller.rb - admin_users_controller.rb - press_releases_controller.rb - media_records_controller.rb - publishes_controller.rb - home_controller.rb - company_info_controller.rb - members_controller.rb - careers_controller.rb - services_controller.rb - press_releases_controller.rb - media_records_controller.rb + services - s3_publisher.rb • /admin 以下はdeviseの認証を 通してアクセス • 3つのcontrollerは各モデルの CRUDを担当 • publishes_controller はS3への デプロイ処理(s3_publisher)を 呼び出す処理を担当
17. Railsアプリの構成 + app + models - admin_user.rb - press_release.rb - media_record.rb + controllers + admin - home_controller.rb - admin_users_controller.rb - press_releases_controller.rb - media_records_controller.rb - publishes_controller.rb - home_controller.rb - company_info_controller.rb - members_controller.rb - careers_controller.rb - services_controller.rb - press_releases_controller.rb - media_records_controller.rb + services - s3_publisher.rb • ⼀般ユーザ向けのページ • 動的にページの内容が変わるのは • トップページ • メディア実績⼀覧・詳細 • プレスリリース⼀覧・詳細 • その他は静的なので純粋な HTML(haml)/JS/CSS コーディング
18. first_5_press_releases = PressRelease.where(status: :published).first(5) first_5_media_records = MediaRecord.where(status: :published).first(5) renderer = ActionView::Base.new("#{Rails.root}/app/views/") renderer.assign(press_releases: first_5_press_releases) renderer.assign(media_records: first_5_media_records) html = renderer.render(template: "home.html.haml", layout: "layouts/application.html.haml") s3_client = Aws::S3::Client.new s3_client.put_object( acl: "private", body: html, bucket: "stg-cosmos-assets", content_type: "text/html; charset=UTF-8", cache_control: "no-store, no-cache", key: "index" ) s3_publisher.rb （トップページの例）
19. AWS 閲覧 https://emerada.co.jp ユーザ AWS側の構成 CloudFront (CDN) Route53 S3 ▪ S3, CloudFront, Route53という 極めてシンプル構成 ▪ co.jpドメインはお名前.comで購⼊ ▪ S3内の各オブジェクトはCloudFrontを 経由してのみアクセス許可 （S3へのダイレクトアクセスは不許可）
20. CloundFrontからのみ許可 ▪ CloudFrontの画⾯からorigin access identity(OAI) を作成 ▪ そのOAIからのみアクセスを許可するbuket policyをS3に設定する https://aws.amazon.com/premiumsupport/knowledge- center/cloudfront-access-to-amazon-s3/
21. という感じでできあがり。ね？簡単でしょ？ emerada.co.jp
22. AWS 閲覧 https://emerada.co.jp 社員 コンテンツの 管理 ユーザ HTMLを配置する 完全serverless CMSという野望 CloudFront (CDN) API Gateway AWS Labmda Amazon DynamoDB
23. AWS 閲覧 https://emerada.co.jp 社員 コンテンツの 管理 ユーザ HTMLを配置する 完全serverless CMSという野望 CloudFront (CDN) API Gateway AWS Labmda Amazon DynamoDB コンテンツの 管理側もserverlessにすること が可能︕ ↓ 完全serverless CMS 合⾔葉は NO MORE WORDPRESS!! オープンソースプロジェクトとしてやりた いと思ってる
24. まとめ ▪ 電⾞アプリで培ったserverless技術を駆使してなんちゃってserverless CMSを 構築しました ▪ RailsとAWS、with-serverとserverlessの両方を体験できる良いプロジェク トとだったと思っている ▪ 完全serverless CMSという構想のご紹介 ▪ 次回 – Railsとkubernetesについて︖ ▪ ご意⾒、ご感想、ご質問、飲みのお誘い、猫・⽝・トカゲなど⾃慢のペッ ト写真は是⾮twitterへリプください @free_world21