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
Laravelでサービスを作った時にやったこと
Search
dala00
April 23, 2019
Programming
1
810
Laravelでサービスを作った時にやったこと
dala00
April 23, 2019
Tweet
Share
More Decks by dala00
See All by dala00
Freelance Talk Session Kansai
dala00
0
49
A-FrameでWebVR
dala00
1
200
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
0
1.8k
Laravel + Vue.jsでサービスを作成&運営してみて
dala00
1
550
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
67
Other Decks in Programming
See All in Programming
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
310
CSC305 Lecture 05
javiergs
PRO
0
210
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
790
CSC509 Lecture 01
javiergs
PRO
1
440
スマホから Youtube Shortsを見られないようにする
lemolatoon
4
1.2k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
170
Catch Up: Go Style Guide Update
andpad
0
210
Devvox Belgium - Agentic AI Patterns
kdubois
1
100
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
220
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
970
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
450
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Unsuck your backbone
ammeep
671
58k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Transcript
Laravelでサー ビスを作った 時にやった こと
自己紹介 Twitter: dala00 個人で色々とサービスを作っている(去年は5つ+α、今年も1つ) PHPメインだけどNode.js、Elixir、Firebase等何でも使ってリリースしたりする
作ったもの CrieitというQiitaのようだけど ポエムでも何でも書ける記事投稿サービス • Laravel • Vue.js • Bootstrap Material
Design
開発環境構築
docker-compose.yml いくつかのプロジェクトがあると バージョンが変わって辛いため
Vue.jsとの連携
全体を囲んでどこにでも コンポーネントを置けるようにする • scriptタグはappの外だけ使える
jsonにすれば直接コンポーネントにデータを渡せる
Vue.js表記の埋込エラー HTML上や、コンポーネントの属性にVue.jsのコンポーネントが埋め込まれるとエラーに なる <span>{</span>{ aaaa }<span>}</span> のようにして更にエスケープする、などが必要
本番用ビルド • yarn prodでリリースビルド • mix.version()でバージョニング • commitしちゃう(css, js, mix-manifest.json)
• 本番で不具合があった時一瞬で戻せる(ビルド不要) • 本番でNode動かす必要がない 個人開発だったらこれで十分かも
本番のインフラ
サーバー Google Compute Engine(f1-micro) DBもCloud SQLを使わず同じサーバーにインストールしているので無料運用。 ただしメモリ600MBくらいしかない…。
SQLはシンプルにする • 基本的に SELECT * FROM table WHERE インデックスついてるカラム =
value ORDER BY インデックスついてるカラム のような形 • JOINしない→LaravelのEager loadingが勝手にいい感じにしてくれる • Debugbarでクエリを見る • サブクエリ、UNION、怪しい関数などはとにかく使わない。ORMやMySQL自体に 便利なものが色々あるからと言って適当に使うのは危険。 • 複雑ならキャッシュする →はてなブックマークのテクノロジーでトップになっても問題なく動くくらい(ただ、意外と アクセスは多くないというのもある)
キャッシュの方法
ページをCDN配信する
Cloudflare 画像やhtmlなどの静的コンテンツを無料でCDN配信してくれる。(DNSサーバーを Cloudflareに変えるだけなので非常に簡単) コンテンツをCloudflare側にキャッシュし、閲覧者の近くのサーバーから配信してくれる のでめちゃくちゃ閲覧速度が速くなる。 → LaravelのページはPHPのためキャッシュが無効になっているが、設定を変えれば CDNで配信することもできる
記事ページだけ対応してみた 元々1秒位かかっていた(リージョンが遠い関係もある)
ページルールを設定 Cloudflare側にURLを設定すればそのURLをキャッシュしてくれる。 ただし、レスポンスヘッダをみてキャッシュすべきかどうかも判断しているため、これだけ だとまだキャッシュしてくれない。
CDN用のmiddlewareグループ • NoCookieを追加 • StartSession, ShareErrorsFromSession, VerifyCsrfTokenを削除
• RouteServiceProvider.php cdn.phpで設定できるように
ルーティングを書く
認証状態によって表示を変える • セッション無効にしてるので不可能 • セッション有効でも可能だが個人情報がキャッシュされてしまう • ログイン状態はVuex StoreやlocalStorageにいれてVueコンポーネント側で処理 する •
認証状態以外に必要なデータがあればAPIで取ってくる
None
PUSH通知 https://github.com/Paragraph1/php-fcm
やろうと思って諦めたこと
リアルタイム投稿 Scrapboxのように、入力中の内容を公開し、リアルタイムで他の閲覧者が見ることがで きる。 → WebSocketが必要
WebSocket Pusher.comと連携したりしてパフォーマンス的に不安な気がした。 → とりあえずFirebaseのRealtime databaseで対応した。 サーバー側に負荷もない。
現在のWebSocket https://github.com/beyondcode/laravel-websockets ・Pusherを経由しないで直接Laravel側と繋げるっぽいのでとても良さそう。
まとめ • やっぱり何でも最初から揃っているというのは最高 ◦ なにか必要になった時にハマることも少なくすぐ導入できる ◦ 最近Expressでも作ったがパズルのようでしんどい