技術ブログ

プログラミング、IT関連の記事中心

Reactのプロジェクトをサーバー(さくらVPS)にデプロイする方法【React】

■はじめに

環境は以下の環境で書いています。

・さくらVPS

Apache

SSL(Let's Encrypt)

環境構築や、Reactプロジェクトの作成は記載しませんので、それぞれで用意しておいてください。

■手順

「cd」でReactのプロジェクトディレクトリをカレントディレクトリにする。

以下のコマンドを実行して、Reactプロジェクトをビルドする。

yarn build

ちなみに、以下でも可能です。(どちらも同じ挙動をします。)

npm run build

上記のコマンドを実行することで、以下のディレクトリが作成されました。

[プロジェクトディレクトリ]/build

今回は、Apacheなので、上記の「build」ディレクトリ配下を全て以下にアップロードしてください。(サーバー)

/var/www/html

すると、「/var/www/html」の配下に、「index.html」などが格納されます。

これで、デプロイは完了です。

ブラウザで、以下のURLにアクセスして確認してください。

https://[ドメインやIPアドレス]/

ちなみに、注意ですが、以下のアクセスでは画面は表示されません

https://[ドメインやIPアドレス]/index.html