技術メモ

VagrantでWebプッシュをやってみた話

先日リリースしたSeekUpsというWebアプリですが、Webプッシュというのを実装しています。Webプッシュって何？って方もいるかもしれないので説明しておくと、スマホアプリのプッシュ通知ってありますよね？ぴこんって出てくるやつ。あれのWebブラウザ版です。こっちはPCでもスマホでも受け取ることができます。
詳しい説明は省くので、もっと知りたいという方はググってみてください。
ちなみにSeekUpsのWebプッシュはこんなやつ。

こういうのがPCにぴょこんって出てきて、クリックやタップをするとSeekUpsに繋がる、って感じです。
なんで実装したかというと、単純にやってみたかったというのが半分と、できるだけ継続してSeekUpsに遊びに来て頂きたいというのがあったからです。

で、このWebプッシュですが、localhostかhttpsじゃないと動きません。
なので、最初Webプッシュの勉強は使ってないサーバーに、適当に取ったドメインを使ってhttps化して実験してたんですが、普段開発環境に使ってるVagrantで動かせないかなと思って調べてみました。

そういえば、周りがDockerDocker言ってDocker当たり前だよね的な雰囲気も感じますが、Vagrantで動かした話なんかして需要あるんだろうか。そもそもVagrantも最新バージョンじゃないな。そろそろDockerに移行した方が良いのか…？

閑話休題。
Vagrantの入門系記事を探したり、ドットインストールを見たりするとVagrantfileをいじって192.168.33.xxとかでアクセスしたりしてますよね。で、今までずっとそうしてきたんですがこれだとlocalhostでもhttpsでもない。ので、Webプッシュのテストができませんでした。
仕方ないのでオレオレ証明書とか作ったりもしてみたんですが、今度はWebプッシュのために必要なServiceWorkerというのが、

DOMException: Failed to register a ServiceWorker: An SSL certificate error occurred when fetching the script.

とかいうエラーを吐いて動いてくれません。
なので正直諦めかけてたんですが、ふとVagrantfileを見てたら気になる記述が。

  # Create a forwarded port mapping which allows access to a specific port

  # within the machine from a port on the host machine. In the example below,

  # accessing "localhost:8080" will access port 80 on the guest machine.

  # config.vm.network "forwarded_port", guest: 80, host: 8080

ポートフォワーディングとな！？
と思って、上の最後の行のコメントを生成行化して、vagrant reload。
で、http://localhost:8080でアクセス。
無事localhostでアクセスできて、Webプッシュのテストができました。

Dockerでも同じようなことができる気がするのでDocker派の人は各自調べてみてください。