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
97
個人で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
コード品質向上で得られる効果と実践的取り組み
ham0215
1
200
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
380
問題解決に役立つ数理工学
recruitengineers
PRO
6
1.2k
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
320
PHPStan をできる限り高速化してみる
colopl
0
250
ClineにNext.jsのプロジェクト改善をお願いしてみた / 20250321_reacttokyo_LT
optim
1
1.3k
技術好きなエンジニアが _リーダーへの進化_ によって得たものと失ったもの / The Gains and Losses of a Tech-Enthusiast Engineer’s “Evolution into Leadership”
kaminashi
0
200
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
Redefine_Possible
upsider_tech
0
220
年末調整プロダクトの内部品質改善活動について
kaomi_wombat
0
190
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
130
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
19
18k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How GitHub (no longer) Works
holman
314
140k
Optimizing for Happiness
mojombo
377
70k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
RailsConf 2023
tenderlove
29
1k
For a Future-Friendly Web
brad_frost
176
9.6k
Into the Great Unknown - MozCon
thekraken
36
1.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
18k
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