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

自己紹介 Twitter: dala00 個人で色々とサービスを作っている（去年は５つ＋α、今年も１つ） 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のコンポーネントが埋め込まれるとエラーに なる {{ aaaa }} のようにして更にエスケープする、などが必要 

本番用ビルド ● 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で配信することもできる 

記事ページだけ対応してみた 元々１秒位かかっていた（リージョンが遠い関係もある） 

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

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

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

ルーティングを書く 

認証状態によって表示を変える ● セッション無効にしてるので不可能 ● セッション有効でも可能だが個人情報がキャッシュされてしまう ● ログイン状態はVuex StoreやlocalStorageにいれてVueコンポーネント側で処理 する ● 認証状態以外に必要なデータがあればAPIで取ってくる 

No content

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でも作ったがパズルのようでしんどい