Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Laravelでサービスを作った時にやったこと

4174f12044e16d1052d28c5aff4ad71c?s=47 dala00
April 23, 2019

 Laravelでサービスを作った時にやったこと

4174f12044e16d1052d28c5aff4ad71c?s=128

dala00

April 23, 2019
Tweet

Transcript

  1. Laravelでサー ビスを作った 時にやった こと

  2. 自己紹介 Twitter: dala00 個人で色々とサービスを作っている(去年は5つ+α、今年も1つ) PHPメインだけどNode.js、Elixir、Firebase等何でも使ってリリースしたりする

  3. 作ったもの CrieitというQiitaのようだけど ポエムでも何でも書ける記事投稿サービス • Laravel • Vue.js • Bootstrap Material

    Design
  4. 開発環境構築

  5. docker-compose.yml いくつかのプロジェクトがあると バージョンが変わって辛いため

  6. Vue.jsとの連携

  7. 全体を囲んでどこにでも コンポーネントを置けるようにする • scriptタグはappの外だけ使える

  8. jsonにすれば直接コンポーネントにデータを渡せる

  9. Vue.js表記の埋込エラー HTML上や、コンポーネントの属性にVue.jsのコンポーネントが埋め込まれるとエラーに なる <span>{</span>{ aaaa }<span>}</span> のようにして更にエスケープする、などが必要

  10. 本番用ビルド • yarn prodでリリースビルド • mix.version()でバージョニング • commitしちゃう(css, js, mix-manifest.json)

    • 本番で不具合があった時一瞬で戻せる(ビルド不要) • 本番でNode動かす必要がない 個人開発だったらこれで十分かも
  11. 本番のインフラ

  12. サーバー Google Compute Engine(f1-micro) DBもCloud SQLを使わず同じサーバーにインストールしているので無料運用。 ただしメモリ600MBくらいしかない…。

  13. SQLはシンプルにする • 基本的に SELECT * FROM table WHERE インデックスついてるカラム =

    value ORDER BY インデックスついてるカラム のような形 • JOINしない→LaravelのEager loadingが勝手にいい感じにしてくれる • Debugbarでクエリを見る • サブクエリ、UNION、怪しい関数などはとにかく使わない。ORMやMySQL自体に 便利なものが色々あるからと言って適当に使うのは危険。 • 複雑ならキャッシュする →はてなブックマークのテクノロジーでトップになっても問題なく動くくらい(ただ、意外と アクセスは多くないというのもある)
  14. キャッシュの方法

  15. ページをCDN配信する

  16. Cloudflare 画像やhtmlなどの静的コンテンツを無料でCDN配信してくれる。(DNSサーバーを Cloudflareに変えるだけなので非常に簡単) コンテンツをCloudflare側にキャッシュし、閲覧者の近くのサーバーから配信してくれる のでめちゃくちゃ閲覧速度が速くなる。 → LaravelのページはPHPのためキャッシュが無効になっているが、設定を変えれば CDNで配信することもできる

  17. 記事ページだけ対応してみた 元々1秒位かかっていた(リージョンが遠い関係もある)

  18. ページルールを設定 Cloudflare側にURLを設定すればそのURLをキャッシュしてくれる。 ただし、レスポンスヘッダをみてキャッシュすべきかどうかも判断しているため、これだけ だとまだキャッシュしてくれない。

  19. CDN用のmiddlewareグループ • NoCookieを追加 • StartSession, ShareErrorsFromSession, VerifyCsrfTokenを削除

  20. • RouteServiceProvider.php cdn.phpで設定できるように

  21. ルーティングを書く

  22. 認証状態によって表示を変える • セッション無効にしてるので不可能 • セッション有効でも可能だが個人情報がキャッシュされてしまう • ログイン状態はVuex StoreやlocalStorageにいれてVueコンポーネント側で処理 する •

    認証状態以外に必要なデータがあればAPIで取ってくる
  23. None
  24. PUSH通知 https://github.com/Paragraph1/php-fcm

  25. やろうと思って諦めたこと

  26. リアルタイム投稿 Scrapboxのように、入力中の内容を公開し、リアルタイムで他の閲覧者が見ることがで きる。 → WebSocketが必要

  27. WebSocket Pusher.comと連携したりしてパフォーマンス的に不安な気がした。 → とりあえずFirebaseのRealtime databaseで対応した。   サーバー側に負荷もない。

  28. 現在のWebSocket https://github.com/beyondcode/laravel-websockets ・Pusherを経由しないで直接Laravel側と繋げるっぽいのでとても良さそう。

  29. まとめ • やっぱり何でも最初から揃っているというのは最高 ◦ なにか必要になった時にハマることも少なくすぐ導入できる ◦ 最近Expressでも作ったがパズルのようでしんどい