LoginSignup
6
10

More than 3 years have passed since last update.

NetlifyのReactアプリのデプロイが恐ろしく簡単だった。。

Last updated at Posted at 2021-03-13

個人で開発したアプリ(大したモノではないです)をサーバーにあげる必要があり、普段毎日コードは書いてますが、デプロイとなると、、3年前プログラミング勉強してた時にNuxtで作ったアプリをFirebaseでデプロイした以来で、(しかも結構ややこしかった)何か簡単にできる方法はないかと探した結果Netlifyが簡単そうだったので、使ってみることにした。

で、結果は拍子抜けするほど簡単でした。。

自分で何かアプリとかを作ってるけど、デプロイの仕方がわからない方はぜひ参考にしてほしい。

参考にした記事
https://crieit.net/posts/React-Netlify

必要な事前作業はたったの2つだけ
・Githubに作ったアプリを上げておく
・Netlifyに会員登録 https://www.netlify.com/

アプリはReact, VueなんでもOKだと思います。自分はReactです。

  1. まずNetlifyのマイページ右上に「New site from Git」をクリック
    1.png

  2. 次にGitのProviderを選びます。自分はGitHubでした。
    2.png

  3. Netlifyと接続OKかの認証なので、「Authorize Netlify」で許可します
    3.png

  4. 次はレポジトリを選ぶのですが、通常はここにレポジトリが出るらしいのですが、新規アカウントだとそうならない仕様みたいで、「Configure Netlify on GitHub」をクリックします
    4.png

  5. するとこんな画面が開きますので、デプロイしたいレポジトリを選択しましょう。
    5.png

  6. 最後は内容を確認し、スクショ撮り忘れましたが、、下の方に確定ボタンがあったはずです。
    6.png

  7. するとこんな画面になります。
    7.png

  8. 完了するとURLが表示されます。これで終わりでURLを開くとばっちりデプロイされてます!
    スクリーンショット 2021-03-13 22.28.07.png

以上です。Firebaseの時はもっとややこしかった気がしますが、Netlifyは超絶簡単です。

さらに、ただデプロイするだけではなく、GitHubのレポジトリとNetlifyが接続したので、今後レポジトリに変更が加わると自動でデプロイし直してくれる優れものです。

私の場合は、エラーが出て修正コミットを上げたのですが、自動で再ビルドがかかり無事にデプロイされました。

このNetlify、独自ドメインを使ったり、それ以外にも使い方が色々あるっぽいのでまた何か学びがあったら記事にします。

6
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
10