【netlify】Reactアプリをドラッグアンドドロップでアップロードする方法

Reactアプリをgit連携じゃなくてドラックアンドドロップでアップロードしたいことってあるよねー。

あるあるー

書きます

Reactアプリをビルドする

Node.jsプロジェクトのルートディレクトリに移動します
(package.jsonがあるところ)

npm run build と入力して実行

root@31baf732d9e9:/code# ls
README.md  build  node_modules  package-lock.json  package.json  public  src
root@31baf732d9e9:/code# npm run build

NetlifyにReactアプリをアップロードする

Netlify でログイン

Deploys → 赤枠のところにbuildしたフォルダまるごとドロップアンドドロップしてアップロード

deploy production Open で反映

できたかな？

おまけ　Deploys画面でできること

NetlifyのDeploys（デプロイ）画面は、ウェブプロジェクトのデプロイメントを管理するための中心的な場所です。ここでは、新しいバージョンのウェブサイトを公開したり、過去のバージョンにロールバックしたり、デプロイプロセスの詳細を確認したりすることができます。この画面は、ウェブプロジェクトのライフサイクルにおいて非常に重要な役割を果たします。では、Deploys画面でできることを、もっと詳しく見ていきましょう。

新しいデプロイのトリガー

Gitリポジトリに変更をプッシュすると、Netlifyは自動的に新しいデプロイをトリガーします。しかし、Deploys画面から手動でデプロイをトリガーすることも可能です。これは、特定のブランチをデプロイしたい時や、特定のコミットでウェブサイトを再ビルドしたい時に便利です。

デプロイの詳細の確認

各デプロイには、そのデプロイに関連する多くの情報が表示されます。これには、デプロイの状態（成功、失敗、進行中）、デプロイが行われた日時、デプロイにかかった時間、そしてデプロイがトリガーされたコミットのメッセージが含まれます。これらの情報によって、デプロイの履歴を簡単に追跡し、問題が発生した場合には原因を特定する手がかりを得ることができます。

プレビューデプロイの利用

Netlifyは、本番環境に公開する前に、プレビュー環境で変更をテストするためのプレビューデプロイを提供します。プルリクエストやマージリクエストを作成すると、Netlifyはその変更に基づいたプレビューサイトを自動的に作成します。Deploys画面からこれらのプレビューデプロイにアクセスし、変更が期待通りに機能するかどうかを確認することができます。

デプロイの公開とロールバック

デプロイ画面から、特定のデプロイを手動で公開することができます。これは、自動デプロイを一時停止している場合や、特定のデプロイをテストした後に本番環境に手動で公開したい場合に便利です。また、何か問題が発生した場合には、過去のデプロイに簡単にロールバックして、ウェブサイトを以前の状態に戻すことができます。

デプロイログの確認

ビルドプロセスやデプロイプロセス中に発生したイベントの詳細なログをDeploys画面から確認できます。これにより、ビルドが失敗した原因を特定したり、デプロイプロセスの最適化ポイントを見つけたりすることができます。

まとめ

NetlifyのDeploys画面は、ウェブプロジェクトのデプロイメントを効率的に管理するための強力なツールです。新しいデプロイのトリガーから、デプロイの詳細の確認、プレビューデプロイの利用、そして問題発生時のロールバックまで、Deploys画面はプロジェクトのあらゆるデプロイメントニーズに対応します。Netlifyを使っているなら、是非この画面の機能をフルに活用してみてくださいね。