Nginx の導入と SSL への対応

開発中のサイトをオープンにして誰でもチェックできるようにしながら開発をしているのですが、ドメインを設定したにも関わらず、これまではポート番号をつけてアクセスしなければなりませんでした。

http://dev-1.gameusers.org:8080/
 ↓
https://dev-1.gameusers.org/

ずっと不格好なままだったのですが、今回やっとこの形にできました。

Web Push (ブラウザに届く通知)を利用しようと思い、いろいろ調べていたところ、Service Worker を設定しないといけなくなりました。ですがその Service Worker は、SSL 対応のサイトか localhost でないと動かないとのことだったので、急遽開発サイトも SSL に対応しようと思ったのです。

Nginx はそのうちなんとかしようと思っていたのですが、開発上避けて通れなくなったので、調べながらインストール&設定を行いました。

とりあえず動かしただけなので、細かい設定は行っていませんが、ポート番号を消すくらいなら思っていたよりも簡単でしたね。大昔に触った Apache がややこしかったので身構えすぎました。

そして Let’s Encrypt を利用させてもらい、SSL にも対応完了。晴れて一般的なサイトと同じ URL のサイトになれました。(certbot の Nginx 用設定を利用すると簡単です –nginx)

参考にしたサイト

https://certbot.eff.org/lets-encrypt/ubuntubionic-nginx
https://qiita.com/yawn_yawn_yawn_/items/c436343f544d13e3be1d
https://blog.tilfin.net/2019/04/08/setup-certbot-for-nginx-on-ubuntu/

サイトの完成形をチェックすべく production build も試してみたところ、めちゃくちゃ表示が軽快でびっくりしました。npm run dev の方は重くてもっさり感がすごいのに、ファイル圧縮後の npm start は快適すぎますね。

静的ファイルを表示してるのかと思うくらい軽くて嬉しいです。データベースにほとんどデータが入っていないので軽いということもあるのですが、自分に特別なスキルがあってそうできているわけでもないので、Next.js が優秀なんでしょうか?

なにが優れているのかわかりませんが、いいものを無料で使わせてくれている世界の優秀な人たちに感謝を忘れないようにしないといけません。

ちなみに普段は開発用ビルドでサイトを表示しているので、重たくてもガッカリしないでください。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)