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
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
Introduce Hono CLI
yusukebe
6
2.7k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
210
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
品質ワークショップをやってみた
nealle
0
510
Cursorハンズオン実践!
eltociear
2
1.1k
株式会社 Sun terras カンパニーデック
sunterras
0
340
All About Angular's New Signal Forms
manfredsteyer
PRO
0
180
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
150
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
240
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
オープンソースソフトウェアへの解像度🔬
utam0k
16
3k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Code Reviewing Like a Champion
maltzj
526
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
RailsConf 2023
tenderlove
30
1.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Site-Speed That Sticks
csswizardry
13
910
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A designer walks into a library…
pauljervisheath
209
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.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でも作ったがパズルのようでしんどい