Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Laravelでサービスを作った時にやったこと
dala00
April 23, 2019
Programming
1
580
Laravelでサービスを作った時にやったこと
dala00
April 23, 2019
Tweet
Share
More Decks by dala00
See All by dala00
Freelance Talk Session Kansai
dala00
0
27
A-FrameでWebVR
dala00
1
140
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
0
1.3k
Laravel + Vue.jsでサービスを作成&運営してみて
dala00
1
410
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
42
Other Decks in Programming
See All in Programming
クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website
clockmaker
2
1.7k
Let's make a contract: the art of designing a Java API
mariofusco
0
160
Cloud-Conference-Day-Spring Cloud + Spring Webflux: como desenvolver seu primeiro microsserviço reativo em Java?
kamilahsantos
1
150
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
3.2k
Android入門
hn410
0
310
Viteはいいぞ/Vite is Good
dojineko
1
110
Reactive Microservices with Spring Boot and JHipster - Spring I/O 2022
mraible
PRO
1
150
競プロへの誘 -いざな-
u76ner
0
380
코드 품질 1% 올리기
pluu
1
1k
Nix for Scala folks
kubukoz
0
130
Quartoを使ってみませんか / quarto_get_started
s_uryu
2
400
バンドル最適化マニアクス at tfconf
mizchi
4
2.3k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Building Your Own Lightsaber
phodgson
94
4.6k
Web development in the modern age
philhawksworth
197
9.3k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Side Projects
sachag
449
37k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
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でも作ったがパズルのようでしんどい