Tweet
Tweet

Slide 1

Slide 1 text

©2023 Kyash Inc. ©2023 Kyash Inc. 情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP 2023.03.28 Jun Watanabe @rela1470 10分でつくる社内Webツール

Slide 2

Slide 2 text

©2023 Kyash Inc. ©2023 Kyash Inc. 情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP 2023.03.28 Jun Watanabe @rela1470 10分でつくる社内Webツール

Slide 3

Slide 3 text

©2023 Kyash Inc. ©2023 Kyash Inc. 情シスSlack4周年・BTAJP1周年記念イベント #BTAJP #BTCONJP 2023.03.28 Jun Watanabe @rela1470 25分でつくる社内Webツール

Slide 4

Slide 4 text

©2023 Kyash Inc. ©2023 Kyash Inc. 4 4 ここから先、ほとんど投影しなかった 幻の資料です🙇

Slide 5

Slide 5 text

©2023 Kyash Inc. 5 Kyash, Inc.

Slide 6

Slide 6 text

©2023 Kyash Inc. ©2023 Kyash Inc. Jun Watanabe @rela1470 6 6 Kyash, Inc. Information System & Security Team Corporate Engineering #Sauna #PHP #Okhotsk

Slide 7

Slide 7 text

©2023 Kyash Inc. ©2023 Kyash Inc. 7 7 コード書いてますか?

Slide 8

Slide 8 text

©2023 Kyash Inc. ©2023 Kyash Inc. 8 8 GAS? Zapier等の自動化?

Slide 9

Slide 9 text

©2023 Kyash Inc. ©2023 Kyash Inc. 9 9 もう少し背伸びして社内Webツールを!

Slide 10

Slide 10 text

©2023 Kyash Inc. ©2023 Kyash Inc. 10 10 Kyashでの活用例

Slide 11

Slide 11 text

©2023 Kyash Inc. Kyashでの活用例 プロダクト管理画面 11 ［ 図やグラフ等を入れる範囲 ］ 上下左右に適度な余白を とることを推奨します カラムの分け方に合わせて ガイドを活用しましょう

Slide 12

Slide 12 text

©2023 Kyash Inc. Kyashでの活用例 オフィスの 入退室システム管理 12 ［ 図やグラフ等を入れる範囲 ］ 上下左右に適度な余白を とることを推奨します カラムの分け方に合わせて ガイドを活用しましょう

Slide 13

Slide 13 text

©2023 Kyash Inc. Kyashでの活用例 PPAP対策ツール 13 ［ 図やグラフ等を入れる範囲 ］ 上下左右に適度な余白を とることを推奨します カラムの分け方に合わせて ガイドを活用しましょう

Slide 14

Slide 14 text

©2023 Kyash Inc. Kyashでの活用例 Zoomのバーチャル背景 作成ツール 14 ［ 図やグラフ等を入れる範囲 ］ 上下左右に適度な余白を とることを推奨します カラムの分け方に合わせて ガイドを活用しましょう

Slide 15

Slide 15 text

©2023 Kyash Inc. 15 今回の ゴール 1. 社内Webページが公開できている a. 社内メンバーであることが担保できる b. 社外の人から見えないようになっている 2. できるだけ運用コストがかからないようにする a. マネージド b. サーバーレス Today’s Goal

Slide 16

Slide 16 text

©2023 Kyash Inc. 16 今回の技術スタック Bref Serverless AWS OpenID Provider 1 2 3

Slide 17

Slide 17 text

©2023 Kyash Inc. 17 AWS 前提条件 1. ALBをhttpsで出せる a. Route53とかで適当なDomainが登録できる b. ACMとかでSSL証明書が出せる c. VPCのSubnetからInternetに出れる AWS Conditions ※初心者チュートリアル https://dev.classmethod.jp/articles/creation_vpc_ec2_for_beginner_1/ https://dev.classmethod.jp/articles/aws-web-server-https-for-beginner/

Slide 18

Slide 18 text

©2023 Kyash Inc. Brefとは?　 https://bref.sh/ AWS LambdaでServerlessフレームワークを使ってPHPアプリケーションを実行させる LambdaはJava、Go、PowerShell、Node.js、C#、Python、Rubyに対応している PHPは公式では非対応なのでBrefでイチから環境構築を行う AWS LambdaでWebサイトを簡単に作れるツール 18 $_SERVER['HTTP_X_AMZN_OIDC_DATA']

Slide 19

Slide 19 text

©2023 Kyash Inc. 19 Bref 前提条件 1. Brefが動く 2. PHPとComposerが動く 3. Serverless Frameworkが動く 4. Node.jsが動く 5. AWSリソースにアクセスできる Bref Conditions ※初心者チュートリアル https://dev.classmethod.jp/articles/serverless-first-serverlessframework/

Slide 20

Slide 20 text

©2023 Kyash Inc. 20 OpenID 前提条件 1. OpenID Providerが準備できている a. OneLoginとかが...いいんじゃないかな... OpenID Conditions

Slide 21

Slide 21 text

©2023 Kyash Inc. ライブコーディング composer require bref/bref composer require firebase/php-jwt ./vendor/bref/bref/bref init Brefとphp-jwtの初期設定 21

Slide 22

Slide 22 text

©2023 Kyash Inc. ライブコーディング serverless.yml service: アプリ名 今回は corp-engr provider:region: AWSのリージョン 今回は ap-northeast-1 functions: エンドポイント名 今回は web serverlessの設定 22

Slide 23

Slide 23 text

©2023 Kyash Inc. ライブコーディング 初回) serverless deploy 2分くらいかかります 2回目以降) serverless deploy function --function web デプロイ 23

Slide 24

Slide 24 text

©2023 Kyash Inc. ライブコーディング スキーム: インターネット向け IP address: IPv4 VPC,アベイラビリティーゾーン: インターネットに出れるものを設定 セキュリティグループ: インバウンドの443を許可 リスナー: https (443) ターゲットグループ: Lambda関数に向けたものを用意 証明書の設定: 自分のドメインに適した証明書 ALBの作成 24 ※初心者チュートリアル https://dev.classmethod.jp/articles/alb-route53-acm-build/

Slide 25

Slide 25 text

©2023 Kyash Inc. ライブコーディング レコードタイプ: A エイリアス: ON トラフィックのルーティング先: ALBのエイリアス Route53で証明書対応 25

Slide 26

Slide 26 text

©2023 Kyash Inc. ライブコーディング トリガーを追加 トリガーの設定>ALB パス: * LambdaにALBトリガーを追加 26

Slide 27

Slide 27 text

©2023 Kyash Inc. ライブコーディング OpenID Provider側で設定 OneLoginの場合 Configuration>Login URL: https://example.com/ Redirect URI’s: https://example.com/oauth2/idpresponse SSO>Token Endpoint: POST OpenID Connectの設定 27

Slide 28

Slide 28 text

©2023 Kyash Inc. ライブコーディング アクションの追加>認証 認証: OIDC スコープ: 'openid' or ‘openid groups’ ←認可もする場合 OneLoginの場合 発行者: /oidc/2 認証エンドポイント: /oidc/2/auth トークンエンドポイント: /oidc/2/tokenユーザー情報エンドポイント: /oidc/2/me ALBにOpenID Connectの設定を入れる 28

Slide 29

Slide 29 text

©2023 Kyash Inc. ライブコーディング $_SERVER['HTTP_X_AMZN_OIDC_DATA'] ドット区切りでヘッダのJSON、ペイロード、署名がそれぞれbase64エンコードされている この時点でペイロードjsonにそれらしき情報が入っているが、 まだ検証できていないので信頼しては駄目! OpenID Connectのユーザークレームヘッダを使う 29

Slide 30

Slide 30 text

©2023 Kyash Inc. ライブコーディング php-jwt::decode public-keyのURLは https://public-keys.auth.elb.ap-northeast-1.amazonaws.com/{$oidc->kid} $jwt = JWT::decode($oidc, new Key($key, $header->alg)); JWTの正当性検証 30 ※公式マニュアル https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/listener-au thenticate-users.html

Slide 31

Slide 31 text

©2023 Kyash Inc. ©2023 Kyash Inc. Thank you 2023.03.28 jun.watanabe @rela1470 31