- Пачатак
- стварэнне маршрутаў
- стварэнне блога
- кіраўнік Элементы
- папярэдняя візуалізацыя
- Разгортванне на Netlify
- Хутацца
Сардэчна запрашаем і дзякуй нашым госцем аўтар, Роджэр Джын, старшы інжынер - праграміст у ButterCMS.
архітэктуры прыкладанняў Serverless набываюць усё вялікую папулярнасць, і гэта не таямніца, чаму. Распрацоўшчыкі могуць ствараць і перабіраць на прадуктах хутчэй, калі яны маюць менш інфраструктуры для падтрымання і не трэба турбавацца аб абслугоўванні сервера, перапынках у працы, а таксама маштабаванне вузкіх месцах.
У гэтым уроку мы збіраемся паказаць вам, як пабудаваць бессерверную, SEO-дружалюбныя, CMS-харчаванне блог з дапамогай React, ButterCMS і Netlify. Скончаны код для гэтага ўрока даступныя на GitHub ,
ButterCMS з'яўляецца ўласнасцю API на аснове CMS і змест API, які дазваляе ствараць CMS-харчаванне прыкладанняў з выкарыстаннем любую мову праграмавання , Алей дазваляе кіраваць кантэнтам з дапамогай сваёй прыборнай панэлі і інтэграваць яго ў інтэрфейс выбару з іх API - вы можаце думаць, як алей аналагічна Netlify CMS за выключэннем таго, што ўтрыманне кіруецца ў вонкавым API, а не захоўваецца ў Git.
Пачатак
Мы будзем выкарыстоўваць Стварэнне прыкладання React стартавы камплект.
Ўстаноўка Стварыць Рэагаваць прыкладання:
NPM ўсталяваць -g стварыць якая рэагуе-дадатак
Затым стварыце шаблоннага для нашага прыкладання:
стварыць які рэагуе-дадатак рэагаваць-бессерверный-блог кд рэагаваць-бессерверный-блог старт НПМ
стварэнне маршрутаў
Наш блог патрэбен два экрана: адзін для пераліку ўсіх пастоў і іншага для адлюстравання асобных паведамленняў. Стварэнне BlogHome.js і BlogPost.js кампаненты ў каталог з зыходнікамі:
імпарту React, {Кампанент} ад 'рэагуюць'; Клас BlogHome пашырае кампанент {візуалізацыі () {вяртанне (<DIV> Галоўная </ DIV>); }} Экспарту па змаўчанні BlogHome; імпарту React, {Кампанент} ад 'рэагуюць'; Клас BlogPost пашырае кампанент {візуалізацыі () {вяртанне (<DIV> Паведамленне </ DIV>); }} Экспарт BlogPost па змаўчанні;
Стварэнне Рэагаваць App не прапаноўвае маршрутызацыю па-за скрынкі таму мы дадамо зрэагаваць-маршрутызатар:
НПМ ўстаноўкі [email protected] --save
У зыходнай тэчцы стварыце новы файл з імем routes.js. Мы будзем ствараць маршруты для хатняй старонкі блог з і без параметраў старонкі, а таксама індывідуальнай паштовай старонкі:
імпарт React з 'рэагуюць'; імпарту {маршрутызатар, IndexRoute, маршрут} ад 'рэагуюць-маршрутызатар'; імпарт App з './app'; імпарт BlogHome з './BlogHome'; імпарт BlogPost з './BlogPost'; Маршруты канстантнасцю = (падпоркі) => (<Router {...} рэквізіту> <шлях маршруту = "/" кампанент = {App}> <IndexRoute кампанент = {BlogHome} /> <шлях маршруту = "/ р /: стар "кампанент = {BlogHome} /> <шлях маршруту =" / запіс /: коркавы »кампанент = {BlogPost} /> </ Маршрут> </ маршрутызатар>); Маршруты экспарту па змаўчанні;
Далей, мы будзем абнаўляць index.js таму ён выкарыстоўвае нашы маршруты пры ініцыялізацыі прыкладання:
імпарт React з 'рэагуюць'; імпарт ReactDOM з «рэагуюць-дом»; імпарт {browserHistory} ад 'зрэагаваць-маршрутызатар'; імпарт Маршруты з »./ routes '; ReactDOM.render (<Маршруты Гісторыя = {browserHistory} />, document.getElementById ( 'корань'));
І, нарэшце, мы будзем абнаўляць App.js так гняздуецца даччыныя кампаненты, названыя ў нашых маршрутах:
імпарту React, {Кампанент} ад 'рэагуюць'; Клас App пашырае кампанент {візуалізацыі () {вяртанне (<DIV = імя класа "App"> <DIV імя класа = "App-загаловак"> <h2> Мой блог </ h2> </ DIV> <div> {this.props. дзеці} </ DIV> </ div>); }} Экспарту па змаўчанні App;
стварэнне блога
Далей мы будзем слізгаць ў ButterCMS, каб прывесці наш блог да жыцця. ButterCMS прадастаўляе API, які дазваляе лёгка атрымліваць паведамленні блога, катэгорыі, тэгі і аўтараў.
Па-першае, мы будзем ўсталяваць ButterCMS JS кліент :
Ная ўстаноўка buttercms --save
Затым мы абновім «BlogHome», каб атрымліваць паведамленні ад ButterCMS і зрабіць іх. Выкарыстоўвайце маркер API у прыкладзе ніжэй, або атрымаць свой уласны, увайшоўшы ў ButterCMS з GitHub ,
імпарту React, {Кампанент} ад 'рэагуюць'; імпарт {Спасылка} ад «зрэагаваць-маршрутызатар» імпарту Алей з сопзЬ алею «» = buttercms алею ( «de55d3f93789d4c5c26fb07445b680e8bca843bd»); Клас BlogHome пашырае Кампанент {Канструктар (рэквізіт) {супер (рэквізіт); this.state = {загружаны: хлусня}; .} FetchPosts (старонка) {butter.post.list ({старонкі: старонка, PAGE_SIZE: 10}), а затым ((адпаведна) => {this.setState ({загружаны: сапраўдныя пылаахоўны: resp.data})}); } ComponentWillMount () {хай старонку = this.props.params.page || 1; this.fetchPosts (старонка)} componentWillReceiveProps (nextProps) {this.setState ({загружаны: хлусня}); хай старонка = nextProps.params.page || 1; this.fetchPosts (старонкі)} візуалізацыі () {калі (this.state.loaded) {сопзЬ {next_page, previous_page} = this.state.resp.meta; Вяртанне (<DIV> {this.state.resp.data.map ((пост) => {вяртанне (<DIV ключ = {post.slug}> <Спасылка = { `/ пост / $ {post.slug}` }> {post.title} </ Спасылка> </ DIV>)})} <br /> <DIV> {previous_page && <Спасылка = { '/ р / $ {previous_page} `}> Prev </ Спасылка> } {next_page && <Спасылка = { '/ р / $ {next_page} `}> Далей </ Спасылка>} </ DIV> </ DIV>); } Яшчэ {вяртанне (<DIV> Загрузка ... </ DIV>)}}} экспарту па змаўчанні BlogHome;
Далей мы будзем абнаўляць BlogPost.js для загрузкі і паведамленні адлюстравання на аснове маршруту:
імпарту React, {Кампанент} ад 'рэагуюць'; імпарт алею з сопзЬ алею 'buttercms' = Butter ( 'de55d3f93789d4c5c26fb07445b680e8bca843bd'); Клас BlogPost пашырае Кампанент {Канструктар (рэквізіт) {супер (рэквізіт); this.state = {загружаны: хлусня}; } ComponentWillMount () {хай коркавага = this.props.params.slug; butter.post.retrieve (коркавы) .then ((адпаведна) => {this.setState ({загружаны: праўда, паведамленне: resp.data.data})}); } Візуалізацыі () {калі (this.state.loaded) {канстантнасцю паведамленне = this.state.post; Вяртанне (<DIV> <h1> {post.title} </ h1> <DIV dangerouslySetInnerHTML = {{__ HTML: post.body}} /> </ DIV>); } Яшчэ {вяртанне (<DIV> Загрузка ... </ DIV>); }}} Экспарт BlogPost па змаўчанні;
кіраўнік Элементы
Наш блог працуе, але нашы паштовыя старонкі ня правільна ўсталяваць загалоўкі HTML або мета-тэгі. Каб выправіць гэта, мы будзем выкарыстоўваць рэагаваць шлем ,
Па-першае, неабходна ўсталяваць пакет:
NPM ўсталяваць --save рэагаваць-шлем
Імпарт модуля шлем у нашым BlogPost і выкарыстоўваць яго ў нашым метадзе візуалізацыі (), каб усталяваць HTML-тэгі, якія павінны быць у <HEAD>.
<Шлем> <назва> {post.seo_title} </ назва> <META NAME = "апісанне" змест = {post.meta_description} /> <META NAME = "OG: малюнак" змест = {post.featured_image} /> < / шлем>
Вось што поўны код для кампанента выглядае. Праверце DOM, каб пераканацца, што тэгі становяцца ўстаноўлены правільна.
імпарту React, {Кампанент} ад 'рэагуюць'; імпарту алею з імпарту «buttercms» {шлем} з «рэагуюць-шлем»; Const алей = масла ( 'de55d3f93789d4c5c26fb07445b680e8bca843bd'); Клас BlogPost пашырае Кампанент {Канструктар (рэквізіт) {супер (рэквізіт); this.state = {загружаны: хлусня}; } ComponentWillMount () {хай коркавага = this.props.params.slug; butter.post.retrieve (коркавы) .then ((адпаведна) => {this.setState ({загружаны: праўда, паведамленне: resp.data.data})}); } Візуалізацыі () {калі (this.state.loaded) {канстантнасцю паведамленне = this.state.post; вяртанне (<DIV> <Helmet> <назва> {post.seo_title} </ title> <META NAME = "апісанне" змест = {post.meta_description} /> <META NAME = "OG: малюнак" змест = {пост. featured_image} /> </ шлем> <h1> {post.title} </ h1> <DIV dangerouslySetInnerHTML = {{__ HTML: post.body}} /> </ DIV>); } Яшчэ {вяртанне (<DIV> Загрузка ... </ DIV>); }}} Экспарт BlogPost па змаўчанні;
папярэдняя візуалізацыя
Наш блог створаны, але шукальнікі з пошукавых сістэм і сацыяльных сетак не заўсёды выконваць JavaScript таму наш блог мае жудасны SEO.
Ёсць цэлы шэраг спосабаў для вырашэння гэтай праблемы, у тым ліку стварэнне на боку сервера візуалізацыі і папярэдняй візуалізацыі паслугі як Prerender.io. Але гэтыя варыянты ўсе патрабуюць стварэнне і падтрыманне сервера Node.js. Luckly, Netlify прапануе убудаваныя папярэднюю візуалізацыю, што дазваляе нам трымаць код «бессерверный» ў той жа час пераканаўшыся, што наш блог аптымізаваны для пошукавых робатаў.
Разгортванне на Netlify
Перад разгортваннем Netlify мы створым вытворчасць зборкі нашага прыкладання:
пража ўстаноўкі пражы запуску зборкі
Праверце дырэкторыю для зборкі, каб пераканацца, што вытворчасць зборка была паспяхова створана. Для таго, каб загрузіць свой сайт на Netlify, перацягнуць тэчку зборкі на прыборнай панэлі Netlify ст.
Папярэдняя візуалізацыя можа быць уключаны ў наладах прыкладання.
Ваш блог будзе працаваць, калі яго загружаны з сайта, але калі вы ўкладаеце пошту напрамую, вы атрымаеце старонку 404:
Памятаеце, што наша дадатак бессерверное? Для таго, каб выправіць памылку 404, мы павінны стварыць правілы перазапісу URL, што сервера да index.html незалежна ад таго, што URL запытаў браўзэра.
Для гэтага мы створым _redirects файл ў нашым каталогу для зборкі з дапамогай наступнага радка:
/ * /Index.html 200
Паўторна загрузіце змесціва каталога зборкі, і ўсе вашы старонкі павінны загрузіць. Праверце нашы жывы прыклад ,
Для таго, каб пераканацца, што гэты файл будзе перанакіраваны кожны раз, калі мы будуем наша дадатак, мы можам абнавіць наш сцэнар зборкі ў package.json:
"Будаваць": "рэагаваць-скрыпты будаваць && рэха '/ * /index.html 200'> Build / _redirects"
Хутацца
Вось так! Мы пабудавалі SEO дружалюбных бессерверную блог з дапамогай React, Netlify і ButterCMS. З дапамогай нашага бессерверного падыходу мы можам зараз вярнуцца да стварэння праграмнага забеспячэння без неабходнасці пастаянна турбавацца аб абслугоўванні сервера, перапынках у працы, або маштабаванне вузкіх месцах.
Я спадзяюся, вам спадабаўся гэты ўрок. Калі ў вас ёсць якія-небудзь пытанні пра наладу ButterCMS-прыведзеным Рэагаваць прыкладанне дастукацца да мяне ў [email protected] і я вызначана буду адказваць!
