LaravelでHTTPS対応する正しいやり方

正しいやり方

1. HTTPSを強制する場合はWebサーバ側で対処する。HTTPから強制リダイレクトしてもいいし、HTTPは閉じてしまってもいい。
2. HTTPSを強制する場合、もしくはHTTPSをデフォルトにしたい場合はAPP_URLをhttps://...にする。
3. リバースプロキシ下で動かす場合、HTTPSでのアクセスか正しく判別できるようTrustProxiesを設定する。

これだけでいい。

間違ったやり方

よく以下のような方法を見かけるが、これらは必要ない。

• Laravel側でHTTPSでのアクセスか判別する。
• Laravel側でhttps://...にリダイレクトする。
• URL::forceScheme()やsecure_url(), secure_asset()でURLを強制的にhttps://...にする。

なぜ上記のやり方をする必要がないのか

Laravelは基本的には自動で、リクエストを見てHTTPSでのアクセスか判別し、出力するURLを調整している。

artisanコマンドからの実行などリクエストがない場合は、APP_URLを見てHTTPSにするか決めている。

リバースプロキシ下でHTTPSでのアクセスかの判別が難しい場合は、TrustProxiesで対応できるようになっている。

そのため上記の方法でわざわざアプリケーションをHTTPSでだけ動作するよう強制する必要はない。

じっさい上記の方法を使うと、開発環境で動かすような場合に不便になり、その回避のためにリダイレクトやURL::forceScheme()をproductionでだけ動かすようにするなど追加の変更が必要になってしまう。secure_url(), secure_asset()に至っては、簡単な回避方法はない。

Laravelの設定ファイル(config/*.php)のキャッシュ関係の仕様を簡単に

php artisan config:cacheでデフォルトではbootstrap/cache/config.phpにconfig/*.phpから読み込まれた設定のキャッシュが生成される。

config:cacheは最初にconfig:clearするため、再実行した場合はキャッシュが再生成される。

config:clearは単純にbootstrap/cache/config.phpを削除する。

config:cacheを実行していない環境で勝手に設定がキャッシュされ、.envの変更が反映されなくなることは基本的にない。

例外として、php artisan optimizeが内部でconfig:cacheも叩いているので、これを使ってしまった可能性が一つ。

もう一つ、php artisan serveで動かしている場合、バグにより設定のキャッシュとは無関係に.envの変更が反映されない。参考

ということでまとめると、

• 本番環境・ステージング環境等ではconfig:cacheをデプロイごとに自動で実行する。
• 開発環境で間違ってconfig:cacheしてしまった場合はconfig:clearするだけでいい。
• php artisan serveで開発してる場合はあきらめて.envの更新ごとにサーバを再起動する。
  • あるいは、artisanを通さず普通にphp -S 127.0.0.1:8000 server.phpする。

これだけ覚えておけばよさそう。それでも引っかかる場合は、別のキャッシュが効いているのかも。

IE以外のブラウザではもうES2015は十分サポートされているようだ

FRONTEND CONFERENCE 2019のモダンJavaScript再入門で聞いた、"本セッションで紹介した内容は、IE以外のブラウザではネイティブサポートされている"が気になり、以下のようなコードを書いて試してみた。

https://gist.github.com/magai/467c80989769d5f58ad02bdc7d78b4f6

じっさいに使いそうな機能をざっと試してみたが、確かにFirefox, Chromeでは普通にサポートされていた。IEではcosnt, let, getter, setter, forEachあたりはサポートされていて、それはそれで意外だったがやはり全体的には厳しい感じ。EdgeはさすがにIEより多く、上で試した分はほぼ実装されていた。抜けていたのはスプレッドプロパティ。

今までも割とそうしてたけど、普段Firefoxで軽くコードを試すようなときはES2015以降の構文も気にせず使ってよさそう。

とはいえプロダクションコードはまだまだBabel通さないとかな……。

FRONTEND CONFERENCE 2019行ってきたので雑な感想

最近の案件でVueでSPAに入門して、設計どうしたらいいかさっぱりで困ったので、ヒントでもないかなーと行ってみた。

あと関西でやってくれるカンファレンスとても助かるのでできるだけ行きたいよね。

もっとデザイン寄りかなーと思ってたけど、思ってたよりプログラマ寄りというか、そんな感じだった。まあそもそも俺が選んだセッションがプログラマ寄りだったのもある。

セッション・LTの感想

各セッションのスライドは以下にいい感じでまとめられていた。

https://qiita.com/chieeeeno/items/33969dca006681e9be68

LTのスライドに関しては上記ページになかったので、ここからリンクしてある。またセッションのスライドのうちA-5についても上記ページにないためリンクした。

A-1 モダンJavaScript再入門

タイトル通りの話。VueでSPAやったときは一応ES2015で書いたけど、十分理解できているかというとそうでもなかったので。

Computed properties, 分割代入、別名つけての分割代入あたりは知らなかった。

個人的にいちばん気になったのは、紹介されているシンタックスがIE以外のブラウザではすでに一通り動作するというあたり。そういえばちょっとした動作確認するときに雑にconstとかアロー演算子使ってたけど、Firefoxでは動いてたな。

A-2 ディレクトリ構成ベストプラクティス 〜 Angularアプリを作り続けてわかったこと

Angularの人によるプロジェクトのディレクトリ構成の話。とはいえAngularに限った話ではなく。さらに言うならおそらくフロントエンドに限らずサーバサイドでも普通に通用する話だったかと。

ドメインごとにディレクトリ作るか、レイヤー(セッションではタイプと呼ばれていたけど)ごとに作るか。どっちもつらみがあり、特に大規模になるとつらいとのこと。

登壇者が辿り着いたベストプラクティスは割とシンプルに、あまり細かすぎない程度にレイヤーで分ける感じ。サーバサイドのフレームワークでよくあるのに近いかな、って感じで個人的には納得。

このセッションは話もとてもうまかった。が、内容しっかりしてる割にスピードあったのでついていくのが大変だった。

C-3 レガシーなフロントエンドをリプレイスする

A-2もそうだけど、このセッションもなにが問題なのかを説明するのがすごくうまかった。

Angular 1とVueが混在するとか、とにかく作ったかのようなレガシーっぷりがウケた。そんなレガシーを作り出してしまう環境から、どうやってしっかりリプレースする流れに持って行ったのかが気になるところ。

A-4 2019年のUIパフォーマンス

フロントエンドの表示のパフォーマンス周りの、多分基本的な話。なぜ多分かというとこの辺さっぱりなので基本的な話なのかの判断もつかないから。

小手先の話ではなく、そもそもライブラリは常に改善されているから最新版を使おうとか、ロードされるコードのサイズ自体を減らしていこうとか、本質的なところでどうこうしようという話だった。

コードの遅延ロード周りとかもいろいろあるっぽくて、ハイドレーションという初めて聞く手法もあるようで、この辺も相当奥が深そう。

なお登壇者によるハイドレーションのサンプルがここに。

https://github.com/jlkiri/partial-hydration-example

A-5 AWSを活用したフロントエンド開発

すぐ満席になっていたということもあり、早めの開始。それにしても終わるのが早くてちょっとびっくりだった。

スライド公開されてないのかな？　サーバサイドはAWSの各種サービスで置き換えられるから、フロントエンドだけでけっこうなところまで開発できちゃうよ、的な、サーバサイドの人間としては危機感感じるような話だった。

とはいえサーバサイドを自前で実装・運用しないで作るっての正直面白すぎるんで一回試してみたい。紹介されていたサービス周り確認したいのでスライド公開希望……。

2019-11-05 15時追記

スライド発見したのでリンクしておく。

https://speakerdeck.com/maeda/awswoyong-itahurontoendokai-fa

A-6 私たちはなぜ SPA で開発するのか

A-5がかなり早く終わったこともあり待ち時間が長く、登壇者の方がその間にOSS活動されてたのがとても印象的だった。

単純にSPAで開発する理由あまりわかってないので聞いてみたが、かなりしっかりした内容の話だった。あとこの方もまた話がうまかった。

A-7 フロントエンドエンジニアのためのセキュリティ対策

セキュリティ好きなので。最初は基本的な話になるのかな、と思いきや、最終的にはCSPの新しめの機能でDOM Based XSSがかなりのところまで回避できるようになるぞ、という、知らなかったエキサイティングな話になった。

CSPのTrusted Types, Perlでもtaintモードとかあったねー、みたいな感じのあれだと思うけど、これブラウザ側でサポートされれば、DOM Based XSSの回避もサーバサイドでのXSSの回避と同じくらい簡単になりそう。すごい。

つーかすでにPolyfillで動くという話なので、試さなくては。

LT-1 脊髄反射でプロダクト作ることの学びとススメ

https://www.notion.so/2019-7cbaa8438e6746029172267e50f9c5fa

小さなプロダクトをいろいろ作ってる方の話。小さなプロダクト、工数少ない割に学べること多いよー、みたいなこと言ってたのがとても興味深かった。

LT-2 Angularはいいぞ！フレームワークにAngularを採用した理由

https://slides.com/yayoimatsuoka/frontend-kansai-2019

Angularは作法が多いけど、そこがいいんだよー、という話。Vueは仕事で使って、ReactはチュートリアルくらいやったけどAngularはさっぱりなんで、ちょっと試したい。

A-2でもAngularのチュートリアル、内容がガチでいいよって話聞いたし。

LT-3 TypeScriptでHTTPリクエストを型安全にする方法

https://docs.google.com/presentation/d/1OoceK0kGSQ9N0l6q-d1UK3zo2gmImwDNKgSfBp8bkOg/edit#slide=id.g6f5b5c2297_0_147

このLTがまたすごかった。話がうまくて、内容もすごい。

せっかくTypeScript使っていても、axiosでHTTPリクエストすると戻ってくるデータが型なくてつらいので、型を簡単につけられるラッパ作りました、って話なんだけど、VS Codeでの補完のデモがほんといい感じで……。

そのライブラリは以下。TypeScript入門したら、試してみよう。

https://github.com/aspidajs/aspida

LT-4 コンポーネント管理の失敗と今後のやっていき

https://speakerdeck.com/yahooshiken/konponentoguan-li-falseshi-bai-tokorekarafalseyatuteiki

内容的にはちょうどC-3と同じ系統。ただしデザイン寄り、という感じ。

ボタンのデザインがぜんぜん共通化されていないという状況を、スクリーンショット撮ってまとめて問題意識を共有していく、というのはほんと理想的なやり方っぽい。見える化大事だよね……。

登壇者の方には懇親会でもためになる話を聞かせてもらいました。

LT-5 Automatic Test for Frontend Side

SeleniumやAppiumでのUIの自動テストの話。AIによる要素セレクタがあるっぽい？　スライドが軽くアニメーションしてかっこよかったのとそれくらいしか覚えてない……。

運営の混乱

セッション自体の進行には俺の見た限り問題なかったものの、細かいところでいろいろ気になった。

• 部屋番号がわかりづらかった。B05とB06をつなげてB5(ここで0落とすのも)として使っていたようだが、これがわかるまでちょっと困った。
• セッションのABCDと部屋番号の対応もわかりづらかった。パンフレットは色でだけ対応が載っている。上の問題とあいまってか、Twitterでハッシュタグを間違えていた人もいた。
• プレミアムチケットでの優先席の指定が、事前の連絡ではGoogleフォームでの登録となっていたがそちらがスタッフから確認できるようになっておらず、会場で再度選択しなければならなかった。ま
• その他優先席周りは混乱が多かった。特に立ち見が出る中、優先席に空きがあるのはなんとも言えない気分。
• FRONTEND CONFERENCEに限らず割とどこでもそうだけど、休憩が席確保のためにじっさいには取れない状態なのはなんとかして欲しい。この手のカンファレンスは、全席指定にした方がいいんじゃないかと思う。

個人的な反省

懇親会で仕事くれくれしてしまったのは最悪だった。次からはしません……。

総括

なんか段々テンション下がっていく感想になってしまったけど、基本的にはとても楽しめた。わからないことが多い分学べたことも多かったし。

次も関西でやってくれるならぜひ行きたい。

［募集終了しました］2019年11月以降のフルリモートのPHPのお仕事を募集しています

仕事数ヶ月分埋まったので、募集終了です。ありがとうございました。

---

とりあえず自己紹介

• 私は神戸在住の個人事業主でやっているプログラマです。よろしくお願いします。
• ここ5年ほどは仕事ではPHPを書いています。最近はLaravelをかなりやっていて、1人月未満～6人月程度の小さなものですが、5件ほどやりました。
• Webアプリケーション開発のお仕事を請負でいただくことが多いです。基本的に一人ですべて、要件定義、設計、実装、テスト、サーバへの設置までやっています。ただしデザイン、HTML・CSSコーディングはやっていません。
• 一人で一通りやっていることもあり、JavaScriptやSQLも最低限できます。
• 特別すごいプログラマというわけではありませんが、普通のことを普通よりちょっとくらいはいい感じにできる自信があります。

どういう仕事を募集しているか

• フルリモートのPHPのお仕事を募集しています。神戸近辺であれば面談、打ち合わせ行けます。
• 単価は50万/月程度いただきたいですが、その他の条件次第で応相談です。もちろん50万以上いただけるのなら大変嬉しいです。
• PHPでLaravelのお仕事や、VueでSPAなお仕事が嬉しいですが、基本的になんでもやります。使う技術に強いこだわりはなく、やっていれば割となんでも楽しめる方です。
• 速度最優先ではなく自動テストを書く程度の余裕があるお仕事だと嬉しいです。テスト駆動で開発したいので。
• GitHubでissue管理して、Pull Requestでマージしていくようなモダンなフローでの開発ができれば嬉しいですが、今後その辺を進めていきたい、あるいは導入していって欲しい、みたいな感じでも問題ありません。

ご興味のある方は、以下のメールアドレス、Twitterアカウントからご連絡ください

xxmagai@gmail.com

https://twitter.com/xxmagai

SynologyのNASのファームウェアのマイナーバージョンの更新を手動でする場合の注意

メジャーバージョンなら、あるいは多分自動更新とかでも問題ないと思うのだが、マイナーバージョンアップをインターネットにつないでいない場合に自分でダウンロードしてきて更新する場合にちょっと引っかかったのでメモ。

メジャーバージョンの.patファイルは、 https://www.synology.com/ja-jp/support/download から普通に探してダウンロードできるのだが、マイナーバージョンの場合は、「すべてのダウンロード」から criticalupdate/ に移動して、そこから探さないといけないようだ。

まあ、それだけの話なのだが。

ちなみに6.2.2-24922のようなバージョンがメジャーで、後ろにもう一つついている6.2.2-24922-3のようなバージョンがマイナー。

Anker SoundCore Ace A1買ったので感想

前から寝室で使う用の小さくてバッテリー駆動のBluetoothスピーカー欲しかったのだが、安くてよさそうなのがセールやってて2000円切ってたので買った。

決め手の一つが防水ついてないこと。防水つけるとどう考えても音質・入出力・操作性に影響するので、防水いらないならない方が多分いいし。

具体的な用途としては、

• 寝室で枕元に置いて、
• 週3～4日、1日あたり1～2時間、
• スマホからBluetoothで音楽をかける。

という感じで、感想としては、

• 音質なかなかいい。低音もサイズの割に出てる。
• モノラルなのはいいが、ステレオ左右に振りまくる曲で聞こえ方が不自然なのは残念。仕方ない気もするが。
• 再生中にホワイトノイズあり。
• Bluetooth接続が切れてからしばらく(10分くらい？)すると電源が自動で切れる。
• 起動・終了音大きめ。不快な音ではないが。まあ終了は、自動オフの場合は鳴らないのでまだマシ。
• ボタンちょっと押しにくい。その上起動が電源ボタン長押しなのでちょっと面倒臭い。終了はやはり自動オフでいいので気にならないが。

という感じで、値段考えるとかなり満足。

なおだいぶ前に買ったこちらからの乗り換え。こっちも今は3000円くらいになってるけど、購入時は2000円くらいだったはず。

https://www.amazon.co.jp/gp/product/B005T1445M/

これにいくつか不満点があり、Ace A1では一通り解消された。

• Bluetoothなくて有線でつなぐしかなかった。
• 横長が枕元のスペース的に邪魔だった。
• 充電が(多分)mini USB...

音質はどちらも違いはあれど大差なしな感じ。