Nginxの導入方法

1. 事前準備
2. 投稿主の実装環境
3. ngrokとは
4. 環境構築
5. nginx便利コマンド

1. 事前準備

・今回はngrokがメインのため、Reactの構築は省くものとする。Reactの構築については以下参照。
https://qiita.com/momotaroukunn/items/06a9cce5e90138e884aa
・Reactがローカルホスト3000番等で公開できること。

・AlmaLinux(9.2)
・ngrok(3.17.0)

ngrokとは、ローカルホストサーバーを外部からアクセスできるようにしたツールです。
例えば、ローカルホスト3000番などでサーバを立てている場合、外部からのアクセスはできないですが、ngrokツールを使用することでngrokサーバを経由してグローバルに公開してくれます。

この、ローカルホスト3000番などのポートから別のサーバのポートを経由することをトンネリングといいます。

これだけ聞くとサーバ公開が簡単になると思うかもしれませんが、それは大間違いです。

あくまで、ローカルホスト3000番のアプリケーションを強引に別サーバを経由して外部に公開しているだけなので、セキュリティ面は非常によろしくないです。そのため、開発段階のデモページとして運用する分には良いかもしれません。

最新版のngrokをインストール：

$ wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-linux-amd64.tgz

ngrokの(.tgz)を解凍：

$ sudo tar xvzf ~/Downloads/ngrok-v3-stable-linux-amd64.tgz -C /usr/local/bin

ngrokのバージョン確認：

$ ngrok -v
ngrok version 3.17.0

ngrokは無料版と有料版でサービスが提供されていますが、個人開発レベルだと無料版で全然問題ないので今回は無料版で登録する。

登録及び、ログインが完了したら左のバーから「Your Authtoken」を押す。

「Your Authtoken」が表示されたらコピーする。

ngrokを無料版として使用するにはローカルホストサーバにngrokのtokenを登録しなければならないため以下の作業により、登録する。
先ほどコピーしたtokenを「ngrok config add-authtoken」の後ろに貼り付ける。

#サービス状態確認
$ ngrok config add-authtoken <token>

その後、Reactが配置されているディレクトリに移動して「npm start」をする。

# Reactが配置されている場所に移動する。
$ cd my-app

# React開始
$ npm start

Reactの開始まで完了したら、ngrokをスタートさせる。

ここからローカルホストとngrokサーバでトンネリングを行います。
そのため、現在Reactが何番ポートで立ち上がっているのか確認してください。
(基本的には3000番ポートだと思いますが。)

# Reactが3000番ポートで立ち上がっている場合。
$ ngrok http 3000

無事起動できると以下の通り起動メッセージが表示されます。

ブラウザでアクセス後、以下の画面に遷移するので「Visit Sita」というボタンを押下します。
その後、Reactの画面が表示されていれば成功です。

五月雨でしたが、ここまでありがとうございました。

以上