gtb_presen

Transcript

3. ラテン語で「物々交換」という意味の「 Barter」が由来です。 コミュニティ内の交流が円滑をすることが目的なので、ナチュラル且つ「つな がり」を意識した配色とデザインにしました。 フォントは親しみやすく、遠目にみてもわかりやすい「うずらフォント」を利用し ました。 ロゴ編 3
4. メインカラーは、居心地がよい穏やかなグリーンにしました。 黒を使う場合は、グレーを使うことによってやさしさが損なわれないように 気を付けました。 カラー編 4
6. 使った技術 • フロントエンド ◦ Vue.js（JavaScript） ◦ Vuetify ◦ VueRouter • バックエンド ◦ Go言語 ◦ gorilla ◦ gorm ◦ jwt-go • インフラ ◦ ConoHaVPS ◦ nginx ◦ MariaDB • その他 ◦ git（GitHub） ◦ ESLint ◦ GitHub Actions ◦ GitHub Wiki ◦ Netlify ◦ ZenHub Renée French 6
7. フロントエンド • Vue.js（JavaScript） • Vuetify ◦ Vueアプリケーションで使える UIフレームワーク。簡単に「美しくモダンな UIデザイン」を実装することが 可能*1。 • VueRouter ◦ ルーティングを制御するための公式プラグイン *2。 7 *1 Vuetifyアプリを作成するための環境設定 https://rightcode.co.jp/blog/become-engineer/vuetify-create-application-environment （2020/05/28 アクセス） *2 今さら聞けない？Vue Router https://qiita.com/hshota28/items/765cf903f055754f7557 （2020/05/28 アクセス） GitHubリポジトリ
8. バックエンド • Go言語 ◦ 2009年にGoogleで開発されたコンパイル言語。 • gorilla/mux ◦ 軽量なWEBツールキット。ツールご毎にリポジトリが切られているため使用しない機能はインストール が不要。gorilla/muxはルーティングを提供。 • gorm ◦ ORM（オブジェクト関係マッピング）。カラムの中身は作ってくれない。 • jwt-go ◦ Go言語でJWT（JSON Web Token）を取り扱うためのライブラリ。 8 GitHubリポジトリ
9. データベース設計 9 ユーザを管理するテーブル ユーザを管理するモデル
10. データベース設計 10 ポイント履歴を管理するテー ブル ポイント履歴を管理するモデル
11. JWT（JSON Web Token） • 属性情報（Claim）をJSONデータ構造で表現したトークンの仕様*3。 • 署名、暗号化ができる。 • <ヘッダ>.<ペイロード>.<署名>で構成。 11 • 属性情報（Claim）の一部*4 ◦ sub ・・・ ユーザの識別子 ◦ name ・・・ フルネーム ◦ exp ・・・ 有効期限 ◦ iat ・・・ 発行した日付 *4 JSON Web Token (JWT) https://openid-foundation-japan.github.io/draft-ietf-oauth-json-web-token-11.ja.html （2020/05/28 アク セス）
12. JWT（JSON Web Token） 12 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1OTA3MTIwMTMsImlhdCI6IjIwMjAtMDUtMjlUMDg6Mj Y6NTMuNTQzNDcyKzA5OjAwIiwic3ViIjoxfQ.YkmabphLOip01LvajfO4wmdoRIIA2E6Y4Kl9oWk0qRc eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 . eyJleHAiOjE1OTA3MTIwMTMsImlhdCI6IjIwMjAtMDUtMjlUMDg6MjY6NTMuNTQzNDcyKzA5OjAwIiwic3ViIjo xfQ . YkmabphLOip01LvajfO4wmdoRIIA2E6Y4Kl9oWk0qRc これを戻すと • ログイン成功時に返すJWTの例 分割
13. JWT（JSON Web Token） 13 JWT.io*5でデバッグ。 *5 JWT.io https://jwt.io/ （2020/05/28 ア クセス）
14. 14 バックエンドのディレクトリ構成 Makefile ・・・ Makefile go.mod ・・・ 依存関係のパッケージを管理* go.sum ・・・ パッケージごとのチェックサムを管理 *6 main.go ・・・ エントリポイントを管理 pkg ・・・ パッケージを管理 　auth ・・・ 認証を管理 　db ・・・ データベース操作を管理 　handler ・・・ ハンドラを管理 　model ・・・ データベースのモデルを管理 *6 Golangのパッケージ完全に理解した←わかってない https://note.crohaco.net/2019/golang-package/（2020/05/28 アクセス）
15. インフラ関連 15 • NginxによるWebサーバ機能の実装 ◦ Vue.jsで作成したWebページを公開できるよう、設定変更を行った。 • オレオレ証明書を用いたSSL機能の実装 ◦ httpsでアクセスできるようにはできたが、ドメイン取得までは行わなかったので、 　　証明書エラーまでは取り除けなかった。 • MariaDBを用いたデータベースの実装 ◦ 今回は実装に至らなかったが、このサービスで使用できる仮のテーブルの作成。
16. その他 • git（GitHub） • ESLint ◦ JavaScriptのための静的検証ツール *7。コーディング規約に準じていないとエラーを出す。スタイルは Airbnbスタイルにした。commit時に自動整形する。 • GitHub Actions ◦ CI/CDツール。今回は、フロントエンド開発でのみ使用。 GitHubにpushすると自動でビルドし、 Netlifyへ デプロイする。高速でビルドするために、依存関係をキャッシュするようにした。 • GitHub Wiki ◦ VSCodeの設定やPR中のコードを手元でレビューする方法を記述。 • Netlify ◦ 静的サイトをホスティングするための Webサービス。 • ZenHub ◦ Issueをチケットとしてカンバン方式で進捗を管理できるプロジェクト管理ツール。 *8 16 *7 ESLint最初の一歩 https://qiita.com/mysticatea/items/f523dab04a25f617c87d（2020/05/28 アクセス） *8 「ZenHub×GitHub」を軸としたアジャイルプロセスの作り方 https://codezine.jp/article/detail/11346 （2020/05/28 アクセス）
17. GitHub Actions • キャッシュ ◦ キャッシュの設定をすることで、2分31秒→1分23秒に短縮。 17 キャッシュなし キャッシュあり
18. 苦労した点（フロントエンド） • HTML/CSSが言うことを聞いてくれない。 • サーバサイドとの連携が途中までしか出来なかった。 • ローカルで開発した時とサーバに上げたときでなぜかレイアウトが違った。（もしかした ら、違うやつをアップした可能性があるかも …） 18
19. 苦労した点（バックエンド） • 本格的なバックエンド開発は初めてだったので、色々苦労した。 • ORM（gorm）が言うことを聞いてくれなかった。（SQLを直で書いたほうが楽なのにという気持ち になった） • Go言語のディレクトリ構成のベストプラクティスが分からなかったので、適当に調べ て、取り敢えずそれっぽいディレクトリ構成にした。 19
20. 苦労した点（その他） • gitでコンフリクト祭りの開催。 • ESLintの設定いらなかったかも。 20
21. 21 ご清聴ありがとうございました