Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
個人でWebサービスを開発する際のWeb技術紹介
Search
koda
January 19, 2019
Technology
1
98
個人でWebサービスを開発する際のWeb技術紹介
2019-01-19 GDG信州でLTした資料です。
koda
January 19, 2019
Tweet
Share
More Decks by koda
See All by koda
Lambda___Hono_で_OpenAI_の_LINE_Chatbotを作ってみた.pdf
koda
0
100
Cloudflare Workers で OpenAI の LINE Chatbotを作ってみた
koda
0
1.5k
DevFest 2020 Ja - GitLab Review Apps with GKE
koda
2
160
Knowledge作ったよ
koda
0
270
DevFest in Shinshu 2019 - Abount DevOps in GCP
koda
0
490
Kubernetes_Hands-on.pdf
koda
3
830
Docker hands on
koda
1
520
DAP+Dockerで簡単環境構築
koda
0
260
Other Decks in Technology
See All in Technology
Road to SRE NEXT@仙台 IVRyの組織の形とSLO運用の現状
abnoumaru
0
390
Keynote - KCD Brazil - Platform Engineering on K8s (portuguese)
salaboy
0
120
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
4.9k
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
240
17年のQA経験が導いたスクラムマスターへの道 / 17 Years in QA to Scrum Master
toma_sm
0
400
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
210
AIエージェント完全に理解した
segavvy
4
270
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
430
Amazon GuardDuty Malware Protection for Amazon S3を使おう
ryder472
2
100
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
220
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
We Have a Design System, Now What?
morganepeng
51
7.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Site-Speed That Sticks
csswizardry
4
450
Automating Front-end Workflow
addyosmani
1369
200k
Scaling GitHub
holman
459
140k
Done Done
chrislema
183
16k
Speed Design
sergeychernyshev
28
860
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Transcript
Web技術紹介 個人でWebサービスを開発する際の 2018-01-19 GDG信州 / GCPUG信州 KODA (@koda3t)
自己紹介 KODA (@koda3t) • 「Web」とか「Cloud」とかの技術者 • 某メーカーの中でアプリ開発 • 家で自分が使いたいなというサービスを創るのが趣味 ◦
OSSで情報共有サービスの「Knowledge」を公開 • プログラミングと温泉を愛してます • 地方在住(長野県)
宣伝 OSSの情報共有サービス「Knowledge」 • 技術を気軽に共有してスキルアップする風土を醸成したくて、作成したサービス • 意外と評判が良かったので OSSで公開 • 多くの組織で利用されているっぽい •
最近は別のサービスを作っているので、更新をサボリ気味 (今作ってるものが終わったら復帰)
20,000 総ダウンロード数: 以上
Webサービス構築の技術
個人開発 してますか?
今日の発表の目的 • 私の個人開発をしている中での知見を共有 • やってみたいなと思っている人の参考に • 仲間を増やしたい • こんな方法もあるよ!というフィードバック欲しい •
多くの人がコーディングしやすい組み合わせを模索中
個人開発 • 好きなことができる ◦ 仕様は自分で決める ◦ 忖度しなくて良い • 車輪の再開発もできる ◦
不効率な事でも試せる • アウトプットできる ◦ 個人の認知度が向上 圧倒的なスキルアップ
個人開発の課題 • 圧倒的に時間が無い • 圧倒的にやることが多い ◦ デザイン ◦ フロントエンド開発 ◦
バックエンド開発 ◦ インフラ構築 ◦ テスト ◦ 作ったものの宣伝 ▪ KPI監視も
個人開発の課題 • 圧倒的に時間が無い • 圧倒的にやることが多い ◦ デザイン ◦ フロントエンド開発 ◦
バックエンド開発 ◦ インフラ構築 ◦ テスト ◦ 作ったものの宣伝 ここの部分をどうしているか Appendixに、その他の部分で私が何を使っているかを掲載しています。 時間があればそれも説明します。
インフラの効率化 • 開発環境(ローカル)も本番環境もDocker化しよう! • Docker + Docker-compose ◦ 最近の開発は frontend
/ backend / batch / database / redis と複数のコン テナを起動して行う事が多いので、Docker化してDocker-composeでまとめ て起動する ◦ 本番環境も普段開発で使っているものをそのまま起動すればOK! ◦ Docker-compose から Kubernetes(k8s) への変換ツールもあるので、大規 模にサービス展開する場合は、Kubernetesでオーケストレーションすると良 さげ(→Kubernetes勉強中)
例:Knowledgeの構成
例:Knowledgeの構成 ローカル開発でもそっくり同じ 構成
Dockerを利用した本番環境の構築 • 利用しているIaaSをたまに変更する • Docker-composeで起動するだけなので移行が超絶簡単 ◦ ベンダーロックインされない 別のIaaS 2014年 2016年
2017年 2017年10月 30分 従量課金 サーバーの乗り換えの所要時間:
テストの効率化(CI環境) • 個人開発でもCIは回そう • オススメはGitLab.com (+GitLabCI) ◦ Privateなリポジトリ無制限 + CIが付いてくる
◦ 業務でもGitLabを使っているため、GitHubより慣れた ◦ 意外とCIの設定は癖があるので、業務で使っているものと同じにしておいた 方が良い ◦ GitHub+Travis CI,Circle CIを使っていたけどはGitLabに落ち着いた感じ
テストの効率化(開発スタイル) • できる限りテストを書くために、以下のような開発スタイル • 作る機能をIssue登録 • そのIssueの対応を始める前にMerge requestを作る ◦ GitLabのCreate
merge requestボタンを押す(ブランチとMRを作成) • CIでコードスタイルや自動テストを実施し、失敗したらマージしない ◦ 個人開発といえど品質はある程度確保するようにしている 便利!
テストの効率化(テスト自働化?) • ぶっちゃけ「テストコードを書く!」といってもダレる ◦ 面倒だし楽しくない • そんなわけで品質はそこそこにテストな環境を公開する • テストな環境は、皆に公開する •
そこで発生したエラーをSentryで収集する ◦ テストしてもらうスタイル • エラーはできる限り早く直す(win-win)
Sentryって? • Sentryとは. 様々な言語から送信されたイベントログを表示してくれるやつ • OSSで公開されている • サービスでも提供されている • 作ったものを社内で使うことも考えて、全てオンプレで閉じた環境も構築できるよう
に周辺のツールを選択している ◦ 自由にCloudのServerlessなものが使える環境がうらやましい、、、 ◦ お金がかからないことも重要 • 自分のサーバーに立てて使っている(もちろんDockerで)
Sentryの利用 import Vue from 'vue' import * as Sentry from
'@sentry/browser' import { getConfig } from '@/api/system' import logger from '@/util/logger' let sentry = { init: () => { return getConfig().then(result => { logger.debug('config:' + JSON.stringify(result.data)) if (result.data.sentry && result.data.sentry.dsn) { logger.info('set up sentry. dsn:' + result.data.sentry.dsn) Sentry.init({ dsn: result.data.sentry.dsn, integrations: [new Sentry.Integrations.Vue({ Vue })] }) sentry.captureMessage = Sentry.captureMessage.bind(Sentry) } }) }, captureMessage: (str) => {} } export default sentry • Frontend(browser)では'@sentry/browser'を読み込んで設定しておくだけ この例では、backendでon/offを切り替えられるようにしている Backendも似たような感じで簡単に使える(割愛)
デモ - Docker化された開発環境の起動 - ブラウザでアクセス - SentryとMailDev (時間があれば)
まとめ • 個人開発をやりやすい組み合わせを模索し、情報をシェアしていこう! ◦ 最近はサービス作るさいの構成要素が多すぎる(Appendix参照) • できるだけ簡単に便利なWebサービスをどんどん作っていこう!!
ありがとうございました https://information-knowledge.support-project.org KODA @koda3t
Appendix 最近作っているサービスの基盤
Frontend • Vue + Vuex ◦ Reactと迷ったのだけど、Vueの方が学習コストが低かったので • Vuetify ◦
そろそろちゃんとMaterial Designで作ってみたい(Bootstrap飽きた) • Babel + ES6 + (JSDoc) ◦ Typescriptと迷ったけど、個人の開発であれば「型」が無くても平気 ◦ 型定義のようなチェックが欲しい箇所は、JSDocをちゃんと書く(VScodeで チェックできるらしい) • Stylus ◦ Sassより良いと評判なので(あんまり使いこなせてない)
Frontend • Standard ◦ コードスタイルはStandardが慣れると楽 • Jest + Cypress ◦
e2e test は Nightwatch を少し使って、大変だったので Cypress を使ってみ る(使いこなせてない / Cypressもやっぱり大変そう) • PWA ◦ Vue cliでセットアップだけ完了(インストールしただけ)
Backend • Node.js + Express ◦ Front がJavascriptなので、同じ言語で開発の方がやっぱり楽 • Babel
+ ES6 + (JSDoc) + Standard.js ◦ コーディングのスタイルはフロントもバックも同じ • Restful API ◦ GraphQLが流行り始めているが、今の所はRESTで充分かな • OAuth ◦ 最近は他のサービスと連携する事が多いので、連携先のサービスのOAuth で認証する(結局連携するために必要だし) ◦ 連携が必要なければ Firebase が良いと聞く
Backend • Sequelize ◦ ORMapping / 昔は微妙だったけど、安定してきた ◦ パフォーマンスの確保のため、生のSQLを書くことが多い ▪
ER図をちゃんと書きたい派 • ULID ◦ データの主キーは分散できるようにUUIDに似たULIDを使う(時刻情報を 持ってる) • Jest ◦ バックエンドの方は、ちゃんとテストを書いている
その他 • Docker + Docker-compose ◦ 最近の開発は frontend / backend
/ batch / database / redis と複数のコン テナを起動して行う事が多いので、Docker化してDocker-composeでまとめ て起動する ◦ Docker-compose から Kubernetes(k8s) への変換ツールもあるので、大規 模にサービス展開する場合は、Kubernetesでオーケストレーションすると良 さげ(→Kubernetes勉強中)
その他 • PostgresSQL、MySQL ◦ PostgreSQLのほうが採用することが多い(個人的な趣味 • Redis ◦ セッションとかの保持に便利 •
Sentry ◦ アプリのクラッシュ情報の収集などで利用 • Maildev ◦ 開発用のメールサーバー(外部に送らない / ブラウザで内容確認)
その他 • Let's Encrypt ◦ 個人のサービスのhttps化 • Cloud Flare ◦
CDNだけど、ReverseProxyのように使っている
開発ツール • Visual Studio Code ◦ 昔はATOM(GitHub)とBrackets(Adobe)でいろいろ迷ったけど、Javascript の開発なら、Visual Studio Codeが一番書きやすい
• A5M2 ◦ ER図のエディタ / Windowsでしか動かないのがネックだけど、これを超える ものが見つけられない(誰かオススメあったら教えて!) • DBeaver ◦ DBの中身確認(いろんなDBに接続できて便利) • Postman ◦ Web APIの動作確認
開発ツール • Metabase ◦ KPIの可視化(データベースの情報の可視化) ◦ OSS • Matomo ◦
Google Analyticsのようなもの(オンプレでホストできる) ◦ OSS