KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

React Netlify 公開について

ReactをNetlifyでBuildに成功した

今までledgerのようにFWでツールを作成したり

moneylogのようにhtml js css + firestoreで公開できるツールを作成したり

html css + github pages で1ページのサイトを作ったことはあるが

buildをして,その中身をwebで公開したことはなかった.なのでチャレンジ.

crieit.net

このサイトの通りにReactで作成したものをNetlifyのなかでdeployしてみた...

これがねっとりファイの中...暖かい...

まずは作業directoryでnpx create-react-app btest

cd btest

でreactのdefaultぐるぐるを作って入る.

GUIで専用のGithub repoを作って(privでもいける)

community.netlify.com

git init

git remote add origin git@....

git push -u origin master

ほいでgithubにpush (通らなかったからpush -f)

そしてNetlifyで自動buildしてもらう設定を組む

f:id:kei_s_lifehack:20200430230754p:plain

npm run build, build先はbuild/

f:id:kei_s_lifehack:20200430230525p:plain

そしたら通った!!!!

f:id:kei_s_lifehack:20200430230633p:plain

こんな簡単だとは!!( しかし後にcli-toolの方が早いと判明 )

ちなみに博士にこれでfirestore使えば楽チンですねって言ったら

「俺ならfirebase hosting使いこなせてないから落としますね」

って言われた,そのとおりだ... だがこれでReactでjsxを活用して

作ったSPAを手軽に公開できる手段を得た.

一応,firebase HostingではなくNetlifyを使うメリットとしては

webのGUIgithub repo からdeployができて,second domein (hoge.netlify.app) の 設定や,bulid logが見れたりと最低限の操作がNon PGな環境でもできる点だろう.

またfirebase では作成できるprojectに限りがある問題もある

f:id:kei_s_lifehack:20200517020225p:plain

kei-s-lifehack.hatenablog.com

なお以前書いたこのgithub pagesでのdeployとの違いとしては

  • Github アカウントとPlatformのNetlifyを分けて,Netlifyだけ職場のメアドで作れる
  • 職場のサイトにする場合,私が退職しても私のGithubのソースから簡単にスイッチできる

  • Github Pagesではusernameがそのままurlになるが,NetlifyではGUIで簡単にsite name (url sub domain)を編集して即座に反映できる

  • 最悪HTML CSSだけ別ツールで生成して,それをdrag and dropで持ってこれる

上記のメリットがある

またcontentfulというCMSサービスを使うと動的に中身を動かせる,ブログのようなものが作れるらしい.

fromscratch-y.work

Netlify CMS (not tried)

jamstack.jp

Netlify CMSという動的に動かせるNetlifyの内部サービスがある

どうdata/Workdata.jsxを組み込むのかはわからない