今日はUbuntuサーバーからReactアプリのデプロイをする方法を紹介していきます。
今日はnpx create-react-appの代わりにViteを使ってReactアプリをビルドしていきます。
なぜReactをViteでセットアップすべきなのかを知りたい方はこちらからどうぞ！
どちらを使うにしてもビルドのコマンド（Viteならnpm run build）でJavaScriptのコード、画像ファイル、スタイル、HTMLファイルをdistディレクトリにまとめられます。
今回はUbuntuとウェブサーバーのNginxを使ってReactアプリをデプロイします。
では早速本題にとりかかりましょう。
準備しておくこと
- Node.jsのインストールされた状態（コマンドだけ書いておきます）
- RootユーザーでではないUbutnuユーザーの権限（SSHと、Firewallのアクセス）
- 必要に応じてドメイン(.com）の取得
- ドメインを使う場合はA RecordとドメインがサーバーのIPに設定されていること
- Nginxがインストールされていること
Reactのアプリを準備する
ではローカルの環境でサーバーにアップロードするためのReactのファイルを作成しましょう。
すでにReactのアプリが準備できている場合はこの手順を飛ばしてください。
#これでもOKです。 #npx create-react-app my-app #Viteの場合 npm create vite@latest cd my-app npm i npm run dev npm run build
npm run devでテストサーバーからReactのアプリがブラウザで見ることができれば一旦OKです。
UbuntuサーバーにSSHで接続
ではサーバーに遠隔で入るためにSSHを使いましょう。
私のおすすめはフリーソフトのMobaXtermです。
こちらの記事で詳しいMobaXtermの使い方を説明しているので参考にしてください。
ではサーバーのIP、ポート22（通常は）、ユーザーIDとパスワードを使ってサーバーに接続しましょう。
ではrootで接続していた場合はUbutuのユーザーに切り替えます。
su dan #su ユーザー名（例だとdanがユーザー名）
Reactのファイルをアップロードする
では適当な場所にReactのアプリケーションを上げます。指定がない場合はUbutnuのユーザーのフォルダにアップロードしましょう。
/home/dan/
MobaXtermのクライアントだとSSHで接続された状態で、ファイルの転送がドラッグ&ドロップで実現できます。
ここに新しく「React-Tutorials」という名前を付けてReactのファイルをアップロードします。ディレクトリ名は皆さんのアプリに適したものにしましょう。
ここで、GitHubにあるリポジトリからクローンすることもできるのでそちらの方が実用的かもしれません。GitとGitHubの使い方はこの動画を参考にしてください。
Nginxのコンフィグファイルを作成
ではNginxをインストールする記事を読んで先に下準備を済ませておきます。
sudo nano /etc/nginx/sites-available/react-tutorials
ではこのNginxのコンフィグファイルに下記の様に書いていきます。
server {
listen 80;
server_name server_domain_or_IP;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
root /home/sammy/myprojectdir;
}
location / {
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
}
私の場合はこのようになりました。
server {
listen 83;
server_name 172.104.81.40;
charset utf-8;
root /home/dan/React-Tutorials/dist;
index index.html index.htm;
location = /favicon.ico { access_log off; log_not_found off; }
location / {
root /home/dan/React-Tutorials/dist;
try_files $uri /index.html;
}
error_log /var/log/nginx/react-tutorials-error.log;
access_log /var/log/nginx/react-tutorials-access.log;
}
ではCtl+OもしいくはCtl+Xでデータを上書きしてnanoのテキストエディタを閉じます。
次にsites-availableからsite-enabledにシンボリックリンクを作成します。このsites-enabledにあるファイルをNiginxが読み取りサイトを公開するようになっていますので。
sudo ln -s /etc/nginx/sites-available/react-tutorials /etc/nginx/sites-enabled #下記のコマンドでNignxのステータスをテスト sudo nginx -t
ではsites-enabledの方にもファイルができていたらOKですね。
ポートを開放する
先ほどのNignxのファイルでポート80番を開けていた場合はデフォルトで空いていると思いますがもし、私の例の場合のようにポート83番からデプロイしたい場合はファイヤーオールの設定で許可する必要があります。今後、一つのサーバーから複数のアプリケーションをデプロイする方法も紹介しているのでよかったら試してみてください。
あとNginxのサービスをリスタートすることを忘れずに
sudo ufw allow 83/tcp sudo systemctl restart nginx
デプロイしたサイトにアクセス
では実際にデプロイしたReactアプリケーションにアクセスしてみましょう。
おめでとうございます。
もしうまくいかない場合は、コメントに詳しい状況を書いてくださいね。
お疲れ様でした。
