はじめに
個人的にwebサービスを作りたくフロントエンドの勉強・実践を始めました。
iPhoneのSafariで動画を撮る機能を作れるかや、どんな実装になりそうかの調査を行おうと思ったところ、localhostかhttpsでないと動かない機能のようなのでSSHポートフォワーディングという手法で実現しました。
前提条件
- 独自ドメイン取得済み
- Https通信ができる公開サーバ設定済み
- ホストマシーンから公開サーバにSSH通信ができる
今回はお名前ドットコムで取得したドメインをEC2にアタッチしたEIPに向けて、NginxとLet's EncryptでHttps通信ができるようにしました。例として、proxy.hoge.exampleをEIPに向けていることとします。
ローカルではAngularのdevサーバをlocalhost:4200で立ち上げていて、これをポートフォワーディングします。
以上を前提とさせていただきます。
設定
前提条件をクリアしたらwebサーバのNginxのプロキシ設定と、ホストマシンのdevサーバのコマンドとSSHポートフォワーディングのコマンド実行のみです。
Nginx
今回は直接nginx.confを編集します。
443をlistenしているserverディレクティブ内のrootをコメントアウト
# root /usr/share/nginx/html;
443をlistenしているserverディレクティブ内の最後に追記
location / {
proxy_pass http://127.0.0.1:4200;
}
Nginxを再起動する。
Angular
devサーバをlocalhostでproxy.hoge.exampleを許可して起動する。
ng serve --host localhost --allowedHosts=proxy.hoge.example
デフォルトの設定で4200ポートで立ち上がると思います。別のポートだった場合、SSHのコマンドでポートを合わせる必要があります。
コマンドにhostやallowedHostsを指定しなくてもコンフィグファイルで指定することもできると思います。
SSH
SSHポートフォワーディングを実行する
ssh -R 4200:localhost:4200 -i ~/.ssh/hoge.pem ec2-user@proxy.hoge.example -N
オプションの意味などは参考記事を参照いただければと思います。
動作確認
iPhoneのSafariからhttps://proxy.hoge.example にアクセスするとdevサーバの内容が閲覧できるかと思います。
目的のHttpsでないと動作しない機能についても確認できました。
注意点としては、devサーバをつないでいるせいか、余計なアクセスが頻繁に走っていそうなので、動作確認の時だけなどに限定して利用した方が良さそうです。
最後に
思い出しながら書いたので間違いなど多々あるかもしれないです。ご指摘いただけると幸いです。
今回の手法は自分の知っている技術を使ってなるべく最短で実現する方法を探りましたが、調べる中でCaddyというGo製のサーバなど便利そうなものをいくつか発見しました。
iPhoneのプロキシ設定やラズパイ使うなどで従量課金されない方法もできそうかもしれないので、時間のあるときにチャレンジしてみたいです。
iPhoneの挙動確認、もっと楽な方法あればぜひご教示いただきたいですm(_ _)m
参考記事
https://qiita.com/Ayaka14/items/449e2236af4b8c2beb81
ありがとうございました。