Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AWS Dev Day 2021「プログラミング学習サービスの これまでを支えてきた技術と、 これからを創っていく技術」株式会社Progate(プロゲート)/ AWS Dev Day2021

Progate
PRO
September 29, 2021
840

AWS Dev Day 2021「プログラミング学習サービスの これまでを支えてきた技術と、 これからを創っていく技術」株式会社Progate(プロゲート)/ AWS Dev Day2021

AWS Dev Day2021 C-1で講演した際のスライドです。

🔸P36で紹介しているTech Blogはこちら
https://tech.prog-8.com/entry/2021/03/17/080000

🔸P58で紹介しているサイトはこちら
https://bit.ly/progate-aws-devday-2021

==================
✨セッション概要:
Progateでは過去7年に亘ってプログラミング学習サービスを提供してきました。
これまでのサービス提供の中で、自由に入力されたコードを実行・判定するような複雑なシステムをAWSを用いて安定的に提供してきました。
また、これからはさらに一歩進んだ学習体験を提供できるような新構想も検討中です。
本セッションでは、これまでのProgateを支えてきた既存事業のアーキテクチャの進化と、スピーディに新規事業を立ち上げる上でのAWSの活用の仕方についてお話ししたいと思います。

✨当日の登壇者プロフィール:
前田 和樹 氏:リクルートテクノロジーズにてインフラ・クラウドエンジニアとして、インフラ基盤運営や開発基盤チームのリード、クラウド基盤更改プロジェクトのPMなどを経験した後、事業開発チームにて基盤の刷新や開発ディレクションを経験。2020/9より現職。エンジニアマネージャーとして組織構築・運営に携わる。AWS Community Builders Member / AWS Startup Community Core Member

島津 真人 氏 : NHK大学ロボコンで回路担当として、世界大会に出場。東大大学院では不揮発性メモリ向けファイルシステムの研究。Google にてソフトウェアエンジニアとして5年間 Chrome の Service Worker の開発を行い、チームのテックリードを経験したのち、2021年4月より現職。ブラウザ開発の知見を活かしたパフォーマンス改善や演習の実装の提案などを行いつつ、新規プロダクトの開発チームのテックリードを務める。
==================
 

🌟Progateはプログラミング教育の課題を解決し、
“創れる人”を生み出す事に情熱を注ぐ仲間を求めています!

ご興味もっていただいた方はぜひご応募ください!

すぐに転職をお考えでなくても、
まずは気軽にカジュアル面談も可能です。

▼Google、Niantic、リクルート、ミクシィなど様々な経歴を持つ
エンジニアインタビュー記事集(随時掲載)
https://www.recruit.prog-8.com/

▼Progateエンジニア向け会社紹介資料/ about Progate engineer
https://speakerdeck.com/progate/about-progate-engineer

▼Tech Blog
https://tech.prog-8.com/

▼Wantedly ストーリー
https://www.wantedly.com/companies/progate/feed

▼Progateコース一覧
https://prog-8.com/courses

▼Progate Journey
https://journey.prog-8.com/

▼最新ニュース
https://prog-8.com/about/news?page=1&category=all

▼Progate会社紹介資料/ We are hiring!
https://speakerdeck.com/progate/we-are-hiring

Progate
PRO

September 29, 2021
Tweet

Transcript

  1. プログラミング学習サービスの
    これまでを支えてきた技術と、
    これからを創っていく技術

    View Slide

  2. ● 自己紹介
    ● Progateについて
    ● 「これまで」を支えてきた技術
    ● 「これから」を創っていく技術
    Index

    View Slide

  3. 自己紹介

    View Slide

  4. 登壇者の紹介
    前職リクルートにてSREやPMなど
    に従事。 現在、「Engineer
    Function」のマネー ジャーを担う。
    AWS Community Builder Member
    新規サービス企画・開発のチームのテック
    リード。
    前職は Google のChromeチームで
    Software Engineer として勤務。
    STEP教育コースの講師も行っていた。
    前田 和樹

    Kazuki Maeda
    島津 真人

    Makoto Shimazu

    View Slide

  5. Progateについて

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. 「これまで」を支えてきた技術

    View Slide

  13. 「これまで」のサービス提供の
    難しいポイント

    View Slide

  14. 「これまで」のサービスを提供する上での難しいポイント
    ● ポイントに絞った学習
    ● ユーザーのコードを「実行」する
    ● ユーザーのコードを「判定」する
    ● グローバル展開対応

    View Slide

  15. 「これまで」のサービスを提供する上での難しいポイント
    ● ポイントに絞った学習
    ● ユーザーのコードを「実行」する
    ● ユーザーのコードを「判定」する
    ● グローバル展開対応

    View Slide

  16. InputとOutputの学習設計
    学んだ内容をすぐにアウトプットできる学習設計

    View Slide

  17. ステップバイステップの演習
    レッスンを進めるごとにできることが積み上がっていく学習設計

    View Slide

  18. 「これまで」のサービスを提供する上での難しいポイント
    ● ポイントに絞った学習
    ● ユーザーのコードを「実行」する
    ● ユーザーのコードを「判定」する
    ● グローバル展開対応

    View Slide

  19. ブラウザ上で動くエディタ・ターミナル・ブラウザ

    View Slide

  20. コードの実行
    Docker
    Docker
    Web Server
    コード実行システム
    ユーザーごとに個別のコード実行環境を提供している

    View Slide

  21. 「これまで」のサービスを提供する上での難しいポイント
    ● ポイントに絞った学習
    ● ユーザーのコードを「実行」する
    ● ユーザーのコードを「判定」する
    ● グローバル展開対応

    View Slide

  22. コードの判定
    Docker
    Docker
    Web Server
    コード実行システム
    コード判定システム

    View Slide

  23. 独自の判定ロジック
    書かれているコードは
    想定通り?

    View Slide

  24. 独自の判定ロジック
    書かれているコードは
    想定通り?
    コードの実行結果は
    正しい?

    View Slide

  25. 独自の判定ロジック
    書かれているコードは
    想定通り?
    コードの実行結果は
    正しい?
    テストは通る?

    View Slide

  26. 独自の判定ロジック
    書かれているコードは
    想定通り?
    コードの実行結果は
    正しい?
    テストは通る?
    生成されたHTMLと
    見本との差異は?

    View Slide

  27. 独自の判定ロジック
    書かれているコードは
    想定通り?
    コードの実行結果は
    正しい?
    テストは通る?
    生成されたHTMLと
    見本との差異は?
    レッスンに応じて結果を多角的に判定する独自の判定ロジック

    View Slide

  28. 「これまで」のサービスを提供する上での難しいポイント
    ● ポイントに絞った学習
    ● ユーザーのコードを「実行」する
    ● ユーザーのコードを「判定」する
    ● グローバル展開対応

    View Slide

  29. コンテンツの多言語対応

    View Slide

  30. コード実行システムをグローバルに配置
    Web Server
    コード実行システム
    よりユーザーに近いロケーションでコードの実行が可能

    View Slide

  31. 「これまで」のサービスを
    構成しているアーキテクチャ

    View Slide

  32. 「これまで」のサービスを提供しているアーキテクチャ

    View Slide

  33. 基本的なWeb構成
    Webのレイヤは標準的な構成
    (ALB + EC2(ASG) + RDS + Redis)
    Github + CircleCI でCI/CD

    View Slide

  34. ユーザーのコード実行システム
    ユーザーのコードを実行する環境を
    EC2にホストしたDocker swarm clusterで実現
    (現在別の技術への置き換えを検証中)
    このコンポーネントを複数 Regionに配置

    View Slide

  35. アーキテクチャ進化の一例
    クライアントサイドのログを収集する基盤は
    マイクロサービス化して ECS Cluster(Fargate)で構築
    →TechBlogで詳細解説しています!
     https://tech.prog-8.com/entry/2021/03/17/080000

    View Slide

  36. マネージドサービスの活用
    学習体験をトラッキングするためのログ基盤は
    Amazon Kinesis Data Firehose + AWS Lambda +
    Athena で構築
    →サービス改善に役立てることを目指しています!

    View Slide

  37. AWSを活用していたからできたこと
    ● 枯れた技術を用いた安定したサービス提供と、アップデートの早い豊富なマ
    ネージドサービスを用いたスピーディな新規開発
    ○ メインのWebシステムはEC2ベースの枯れた技術を選定していますが、非常に安定的に
    サービス提供を行うことができています
    ○ データストリームやChatOpsなど新規に構築する機能はマネージドサービスを活用し、ス
    ピーディに開発できています

    View Slide

  38. Progateのこれから

    View Slide

  39. View Slide

  40. これまで

    View Slide

  41. これから

    View Slide

  42. 「これから」を創っていく技術

    View Slide

  43. これからやっていきたいこと
    最短で「創れる人」になってもらうための、
    プログラミング学習における「知の高速道路」を整備していきたい。
    ・基礎的なプログラミングを躓くことなくきちんと体験できる環境
    ・いろいろなコードを書いてみたり、作業をする試行錯誤の中で
     必要な知識や経験を身につけてもらえるような演習体験
    43

    View Slide

  44. 創れる人
    Progate が提供できているもの・したいもの
    スキル
    学習量
    現状のProgateの
    カバー範囲

    View Slide

  45. 創れる人
    Progate が提供できているもの・したいもの
    スキル
    学習量
    現状のProgateの
    カバー範囲

    View Slide

  46. Quest
    デバッグ問題
    「バグがあるので直してください」
    アルゴリズム問題(TSP)
    「すべての地点を一筆書きできる
     短い経路を見つけてみましょう」

    View Slide

  47. これまでとの違いは?
    ・課題(バグを直す)をどう対処するか、
     手順を自分で考える必要がある
    ・ヒントは与えられ、自分で検索しながら
     学習していくスタイル

    View Slide

  48. 創れる人
    Progate が提供できているもの・したいもの
    スキル
    学習量
    現状のProgateの
    カバー範囲
    Quest

    View Slide

  49. 創れる人
    Progate が提供できているもの・したいもの
    スキル
    学習量
    現状のProgateの
    カバー範囲
    Path
    Quest

    View Slide

  50. 実践的な、試行錯誤しながら学べる演習とはなにか?
    普段僕たちが行っているような開発が出来るまでに
    何を経験する必要があるだろうか?

    View Slide

  51. 実践的な、試行錯誤しながら学べる演習とはなにか?
    問題の分割
    ツールの操作
    普段僕たちが行っているような開発が出来るまでに
    何を経験する必要があるだろうか?
    プログラミングももちろんだけど、
    それ以外にもたくさんの要素がある!
    デバッグ
    エラーの分析
    コードの理解
    環境構築
    きれいな
    コーディング

    View Slide

  52. 実践的な、試行錯誤しながら学べる演習とはなにか?
    問題の分割
    ツールの操作
    普段僕たちが行っているような開発が出来るまでに
    何を経験する必要があるだろうか?
    プログラミングももちろんだけど、
    それ以外にもたくさんの要素がある!
    デバッグ
    エラーの分析
    コードの理解
    環境構築
    きれいな
    コーディング
    それってどんな演習なら体験できる?
    🤔

    View Slide

  53. 問題の分割
    ツールの操作
    普段僕たちが行っているような開発が出来るまでに
    何を経験する必要があるだろうか?
    プログラミングももちろんだけど、
    それ以外にもたくさんの要素がある!
    デバッグ
    エラーの分析
    コードの理解
    環境構築
    きれいな
    コーディング
    それってどんな演習なら体験できる?
    🤔
    →鋭意作成中!

    View Slide

  54. 作っているものの一例:ユーザー体験のサポートのためのコマンドラインツール
    - 補助輪としてユーザー体験を支えるツール
    - ユーザーさんが簡単に環境構築できるようサポート
    - テストを走らせる
    - Go を採用
    - クロスコンパイルが簡単
    - バックエンドとの通信のための gRPCのサポートが充実している
    - Cobraのようなコマンドラインツールをつくる使い勝手のよいライブラリもある

    View Slide

  55. 作っているものの一例:コンテンツ管理システム
    - エンジニアとしては、カスタマーとしてユーザーさんの他に
    社内のコンテンツプランナーやi18nチームもいる
    コンテンツ配信
    システム
    コンテンツプランナー
    i18nチーム
    ユーザーさん
    入稿するデータが特殊。
    ・演習のページ
    ・ユーザーさんが触るソースコード
    ・判定システム

    View Slide

  56. Progate では、2つの軸を据えてプロダクト開発を行っています。
    ・躓くことなくプログラミングの世界に触れることができるプロダクト
    ・「創れる人」になるための力をつけることができるプロダクト
    Progate エンジニアチームとしては、
    よりよいユーザー体験を提供するために、必要な技術的な課題を
    日々解いています。

    View Slide

  57. ● エンジニアのインタビュー記事やイベントレポートなど掲載
    ● 是非一度ご覧ください!
    \積極採用中!/
    57
    採用特設サイトを公開しています!
    https://bit.ly/progate-aws-devday-2021

    View Slide

  58. Progate エンジニア 採用情報 


    View Slide