ReactをUbuntuサーバーからデプロイする(Nginx)
今日はUbuntuサーバーからReactアプリのデプロイをする方法を紹介していきます。 Vueのアプリをデプロイする方法はこちらからどうぞ! 今日はnpx create-react-appの代わりにViteを使ってReactアプリをビルドしていきます。 なぜReactをViteでセットアップすべきなのかを知りたい方はこちらからどうぞ! どちらを使うにしてもビルドのコマンド(Viteならnpm run build)でJavaScriptのコード、画像ファイル、スタイル、HTMLファイルをdistディレクトリにまとめられます。 今回はUbuntuとウェブサーバーのNginxを使ってReactアプリをデプロイします。 では早速本題にとりかかりましょう。 準備しておくこと Reactのアプリを準備する ではローカルの環境でサーバーにアップロードするためのReactのファイルを作成しましょう。 すでにReactのアプリが準備できている場合はこの手順を飛ばしてください。 npm run devでテストサーバーからReactのアプリがブラウザで見ることができれば一旦OKです。 UbuntuサーバーにSSHで接続 ではサーバーに遠隔で入るためにSSHを使いましょう。 私のおすすめはフリーソフトのMobaXtermです。 こちらの記事で詳しいMobaXtermの使い方を説明しているので参考にしてください。 ではサーバーのIP、ポート22(通常は)、ユーザーIDとパスワードを使ってサーバーに接続しましょう。 ではrootで接続していた場合はUbutuのユーザーに切り替えます。 Reactのファイルをアップロードする では適当な場所にReactのアプリケーションを上げます。指定がない場合はUbutnuのユーザーのフォルダにアップロードしましょう。 MobaXtermのクライアントだとSSHで接続された状態で、ファイルの転送がドラッグ&ドロップで実現できます。 ここに新しく「React-Tutorials」という名前を付けてReactのファイルをアップロードします。ディレクトリ名は皆さんのアプリに適したものにしましょう。 ここで、GitHubにあるリポジトリからクローンすることもできるのでそちらの方が実用的かもしれません。GitとGitHubの使い方はこの動画を参考にしてください。 Nginxのコンフィグファイルを作成 ではNginxをインストールする記事を読んで先に下準備を済ませておきます。 ではこのNginxのコンフィグファイルに下記の様に書いていきます。 私の場合はこのようになりました。 ではCtl+OもしいくはCtl+Xでデータを上書きしてnanoのテキストエディタを閉じます。 次にsites-availableからsite-enabledにシンボリックリンクを作成します。このsites-enabledにあるファイルをNiginxが読み取りサイトを公開するようになっていますので。 ではsites-enabledの方にもファイルができていたらOKですね。 ポートを開放する 先ほどのNignxのファイルでポート80番を開けていた場合はデフォルトで空いていると思いますがもし、私の例の場合のようにポート83番からデプロイしたい場合はファイヤーオールの設定で許可する必要があります。今後、一つのサーバーから複数のアプリケーションをデプロイする方法も紹介しているのでよかったら試してみてください。 あとNginxのサービスをリスタートすることを忘れずに デプロイしたサイトにアクセス では実際にデプロイしたReactアプリケーションにアクセスしてみましょう。 http://172.104.81.40:83/ おめでとうございます。 もしうまくいかない場合は、コメントに詳しい状況を書いてくださいね。 お疲れ様でした。