今日からはじめるコンテナ技術を使ったWebサービスのつくりかた

あくまでも個人の見解です。

Transcript

1. 今日からはじめるコンテナ技術を 使った Web サービスのつくりかた I&I 室　もりこ 1
2. 自己紹介 名前：もりこ（ういち） I ＆I 室での役割：開発に関連する全て 趣味 音楽：ギター（アコギもエレキも）、たまにライブ見に行く 酒：日本酒、ビール 2
3. 今回の目的 モダンな技術に触れてもらう FastAPI とReact について何となく理解できるようになる 自分たちの作りたいものがサーバレスで提供できるようになる 3
4. 今回やらないこと Docker のインストール方法 コンテナ技術、FastAPI 、React の詳しい説明 コードの解説 4
5. 座学（簡単に） 5
6. はじめに 皆さんが普段使っているアプリ 気がついたら UI が変更されていたり、機能が追加され てませんか？ 6
7. 現在の Web 業界 競合他社が増え、魅力的なサービスをどこよりも速く提供することが 求められるようになり、時代に応じて新しい開発手法や考え方、技術 が用いられるようになりました。 ex) アジャイル開発、スクラム、コンテナ技術、CI/CD 、Kubernetes 、マイクロサービス化etc その中でコンテナ技術は、特にマストな技術と考えフォーカスを当て ています。 7
8. コンテナ技術とは アプリケーションの実行に必要な環境をコンテナという1 つの塊にし て、アプリケーションを実行すること。 導入している企業： LINE ヤフー、メルカリ、楽天モバイル、サイバーエージェント...etc なぜ学ぶのか 流行りの技術に触れてほしい 色んな企業で採用されているから 8
9. メリット 可搬性 OS に依存しないので、どんな環境でも同じように実行ができる ※アーキテクチャには依存する CI/CD との相性が良い 実行環境がコンテナ化されるので、ブルーグリーンデプロイをし やすい デメリット 教育コスト高め 9
10. システム構成 ゴールはこういう構成になります。 ⾃分 docker-compose React container FastAPI container PostgreSQL container API Request/Response CRUD execute 10
11. 実習 11
12. Todo アプリを立ち上げよう 1/6 以下のURL からソースをクローンしてくる git clone https://github.com/m8i-51/growing プロジェクトのディレクトリに移動する cd growing 12
13. # Todo アプリを立ち上げよう 2/6 以下のファイルに実行権限を与える Linux の人 chmod +x project/backend/entrypoint.sh Windows の人（※動作未確認） icacls entrypoint.sh /g ユーザー名:RX コンテナ達をビルド docker-compose up -d 13
14. Todo アプリを立ち上げよう 3/6 コンテナが正常に起動しているか確認する docker-compose logs web 実行結果↓ web-1 | waiting for postgres server web-1 | Connection Successfully web-1 | INFO: Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit) web-1 | INFO: Started reloader process [1] using statreload web-1 | INFO: Started server process [13] web-1 | INFO: Waiting for application startup. web-1 | INFO: Starting up... web-1 | INFO: Application startup complete. web-1 | INFO:uvicorn.error:Application startup complete. 14
15. Todo アプリを立ち上げよう 4/6 正常に起動されていたらテーブルを作成する docker-compose exec web python app/db.py ※正常に動作していれば何も返って来ないはず 15
16. Todo アプリを立ち上げよう 5/6 テーブルが作成されたか確認する docker-compose exec web-db psql -U postgres postgres-# postgres=\c dev_db dev_db-# dev_db=\dt List of relations Schema | Name | Type | Owner --------+-------------+-------+---------- public | textsummary | table | postgres (1 row) 16
17. Todo アプリを立ち上げよう 6/6 これで準備が整いました。 以下のURL にアクセスするとTodo アプリが表示されるはず http://localhost:3007/ 17
18. 課題 18
19. 課題 これであなたはReact + FastAPI + PostgreSQL を用いたアプリ開発の スタートラインを切ることができました。 現状、Todo アプリにはタスクの編集と削除しか実装されていません。 そこで、みなさんには今から課題を出します。 19
20. 課題 ( 宿題 ) タスクの複製機能を実装 提出先： クローンしてきたリポジトリに自分のブランチを作成し提出 みなさんのソース読ませてください 20
21. 質疑・応答 何かありますか？ 21
22. 次回予告 Todo アプリを AWS の各サービスを活用して公開 長くなるのでオンデマンド形式にしようと思ってます。( 鋭意製作中 ) 22
23. おつかれさまでした 23