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
800
Laravelでサービスを作った時にやったこと
dala00
April 23, 2019
Tweet
Share
More Decks by dala00
See All by dala00
Freelance Talk Session Kansai
dala00
0
48
A-FrameでWebVR
dala00
1
190
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
0
1.8k
Laravel + Vue.jsでサービスを作成&運営してみて
dala00
1
540
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
66
Other Decks in Programming
See All in Programming
ReadMoreTextView
fornewid
1
480
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
100
WindowInsetsだってテストしたい
ryunen344
1
190
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
エラーって何種類あるの?
kajitack
5
300
GraphRAGの仕組みまるわかり
tosuri13
7
480
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
880
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
510
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
180
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Six Lessons from altMBA
skipperchong
28
3.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Faster Mobile Websites
deanohume
307
31k
How GitHub (no longer) Works
holman
314
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Documentation Writing (for coders)
carmenintech
71
4.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Bash Introduction
62gerente
614
210k
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でも作ったがパズルのようでしんどい