정적 사이트 생성기는 속도, 보안 및 사용자 경험으로 인기가 있습니다. 그러나 때로는 응용 프로그램이 사이트를 구축 할 때 사용할 수없는 데이터가 필요합니다. React는 클라이언트 응용 프로그램에서 동적 데이터를 검색하고 저장하는 데 도움이되는 사용자 인터페이스를 구축하기위한 라이브러리입니다.
동물 군은 용량 계획, 데이터 복제 및 예약 된 유지 보수와 같은 운영 오버 헤드를 완전히 제거하는 API로 제공되는 유연한 서버리스 데이터베이스입니다. 동물 군을 사용하면 데이터를 문서로 모델링 할 수 있으므로 React로 작성된 웹 응용 프로그램에 자연스럽게 적합합니다. JavaScript 드라이버를 통해 FAUNA에 직접 액세스 할 수 있지만 데이터베이스에 연결하는 각 클라이언트에 대한 사용자 정의 구현이 필요합니다. FAUNA 데이터베이스를 API 뒤에 배치하면 프로그래밍 언어에 관계없이 모든 승인 된 클라이언트가 연결할 수 있습니다.
Netlify Functions를 사용하면 API 엔드 포인트로 작동하는 서버 측 코드를 배포하여 확장 가능하고 동적 응용 프로그램을 구축 할 수 있습니다. 이 튜토리얼에서는 React, Netlify Functions 및 동물 군을 사용하여 서버리스 응용 프로그램을 구축합니다. 동물 군과 함께 데이터를 저장하고 검색하는 기본 사항을 배웁니다. 동물 군의 데이터에 안전하게 데이터에 액세스하기 위해 NetLify 기능을 작성하고 배포합니다. 마지막으로 REACT 응용 프로그램을 NetLify에 배포합니다.
동물 군은 산성을 준수하고 멀티 모델 인터페이스를 제공하는 분산되고 강력하게 일관된 OLTP NOSQL 서버리스 데이터베이스입니다. 동물 군은 또한 단일 쿼리의 문서, 관계형, 그래프 및 시간 데이터 세트도 지원합니다. 먼저 데이터베이스 탭을 선택하고 데이터베이스 만들기 버튼을 클릭하여 동물 군 콘솔에서 데이터베이스를 작성하여 시작합니다.
다음으로 컬렉션을 만들어야합니다. 이를 위해서는 데이터베이스를 선택하고 컬렉션 탭에서 수집 생성을 클릭해야합니다.
동물 군은 지속되는 데이터와 관련하여 특정 구조를 사용합니다. 디자인은 아래 예제와 같은 속성으로 구성됩니다.
{
"Ref": ref (Collection ( "Avengers"), "29922108789615749"),
"TS": 162321568240000,
"데이터": {
"ID": "DB7BD11D-29C5-4877-B30D-DFC4DFB2B90E",
"이름": "캡틴 아메리카",
"파워": "고강도",
"설명": "방패"
}
}동물 군은 특정 문서를 식별하는 데 사용되는 고유 식별자 인 Ref 열을 유지합니다. TS 속성은 레코드 생성 시간과 데이터를 담당하는 데이터 속성을 결정하는 타임 스탬프입니다.
다음으로 Avengers 컬렉션에 대한 두 가지 인덱스를 만들어 봅시다. 이것은 프로젝트 후반부에서 매우 가치가있을 것입니다. 인덱스 탭 또는 쉘 탭에서 인덱스를 만들 수 있으며 스크립트를 실행할 콘솔을 제공합니다. 동물 군은 두 가지 유형의 쿼리 기술의 두 가지 유형의 FQL (Fauna의 쿼리 언어)과 GraphQL을 지원합니다. FQL은 문서, 컬렉션, 인덱스, 세트 및 데이터베이스를 포함하는 동물 군의 스키마를 기반으로 운영됩니다.
쉘에서 인덱스를 만들어 봅시다.
이 명령은 컬렉션의 색인을 생성하여 데이터 객체 내부의 ID 필드별로 인덱스를 생성합니다. 이 색인은 데이터 객체의 Ref를 반환합니다. 다음으로, 이름 속성에 대한 다른 색인을 만들고 이름 It avenger_by_name을 작성하겠습니다.
서버 키를 만들려면 보안 탭을 탐색하고 새 키 버튼을 클릭해야합니다. 이 섹션에서는 선택한 데이터베이스 및 사용자의 역할에 대한 키를 작성하라는 메시지가 표시됩니다.
이 섹션에서는 반응으로 NetLify 기능을 만드는 방법을 살펴 보겠습니다. 우리는 Create-React-App을 사용하여 React 앱을 만들 것입니다.
NPX Create-React-App Avengers-Faunadb
React App을 작성한 후 동물 및 Netlify 종속성을 포함한 일부 종속성을 설치하겠습니다.
원사 추가 axios 부트 스트랩 노드-스 uuid faunadb React-netlify-evalify real-netlify-eDidentity-idget
이제 첫 번째 netlfiy 함수를 만들어 봅시다. 기능을 만들려면 먼저 NetLifiy CLI를 전 세계적으로 설치해야합니다.
NPM NetLify -Cli -G를 설치하십시오
CLI가 설치되었으므로 다음 필드와 함께 프로젝트 루트에 .env 파일을 작성하겠습니다.
FAUNADB_SERVER_SECRET = <faunadb> React_app_netLify = <netlify app url></netlify></faunadb>
다음으로 NetLify 기능을 만드는 방법을 살펴 보겠습니다. 이를 위해서는 프로젝트 루트에서 functions 라는 디렉토리와 NetLify.toml 이라는 파일을 만들어야합니다. 이 파일은 기능의 디렉토리, 빌드 디렉토리 및 실행 명령을 정의합니다.
[짓다] 명령 = "NPM 실행 빌드" functions = "functions/" 게시 = "빌드" [[리디렉션]] From = "/API/*" to = "/.netlify/functions/:splat" 상태 = 200 힘 = 참
이 예제의 리디렉션 섹션에서와 같이 NetLify 구성 파일에 대한 추가 구성을 수행합니다. /.netlify/** to /api /의 netlify 함수의 기본 경로를 변경하고 있습니다. 이 구성은 주로 API URL의 모양과 필드를 개선하기위한 것입니다. 따라서 기능을 트리거하거나 호출하려면 경로를 사용할 수 있습니다.
https://domain.com/api/getpokemons
… 대신 :
https://domain.com/.netlify/getpokemons
다음으로 Functions 디렉토리에서 NetLify 함수를 작성하겠습니다. 그러나 먼저, util/connections.js라는 동물 군의 연결 파일을 만들어 동물 군 연결 개체를 반환합시다.
const faunadb = 요구 ( 'faunadb');
const q = faunadb.query
Const ClientQuery = New Faunadb.client ({{
비밀 : process.env.faunadb_server_secret,
});
module.exports = {clientQuery, Q};다음으로, 응용 프로그램 전체에서 여러 차례 데이터를 구문 분석해야하므로 참조를 확인하고 반환하는 도우미 기능을 작성해 봅시다. 이 파일은 util/helper.js 입니다.
const responseobj = (statusCode, data) => {
반품 {
StatusCode : StatusCode,
헤더 : {
/ * CORS 지원에 필요한 경우 */
"액세스 제어-홀로-오리핀": "*",
"액세스 제어 홀로 헤드": "*",
"Access-Control-Olkow-Methods": "Get, Post, Options",
},
바디 : JSON.Stringify (데이터)
};
};
const requestObj = (data) => {
return json.parse (데이터);
}
module.exports = {responseobj : responseobj, requestObj : requestObj}위의 도우미 기능은 JSON 데이터의 CORS 문제 , 교활 및 구문 분석을 처리합니다. 첫 번째 기능인 GetAvengers 를 만들어 모든 데이터를 반환합니다.
const {responseobj} = require ( './ util/helper');
const {q, clientQuery} = require ( './ util/connection');
Exports.Handler = async (이벤트, 컨텍스트) => {
노력하다 {
Avengers = await clientQuery.query (
Q.map (
Q. Paginate (q.documents (q.collection ( 'Avengers'))),
Q.lambda (x => q.get (x))
))
))
Return ResponseObj (200, Avengers)
} catch (오류) {
Console.log (오류)
return responseobj (500, 오류);
}
};위의 코드 예제에서는 Map , Paginate , Lamda와 같은 여러 FQL 명령을 사용했음을 알 수 있습니다. 맵 키는 배열을 통해 반복하는 데 사용되며 배열과 람다의 두 가지 인수가 필요합니다. 우리는 첫 번째 매개 변수에 대한 Paginate를 통과 시켰으며, 참조를 확인하고 결과 페이지 (배열)를 반환합니다. 다음으로, 우리는 ES6의 익명 화살표 함수와 매우 유사한 익명 함수 인 Lamda 문을 사용했습니다.
다음으로 컬렉션에 데이터를 작성/삽입하는 기능 AddAvenger 기능을 작성하겠습니다.
const {requestObj, responseobj} = require ( './ util/helper');
const {q, clientQuery} = require ( './ util/connection');
Exports.Handler = async (이벤트, 컨텍스트) => {
Data = requestObj (event.body);
노력하다 {
Avenger = await clientQuery.query (
Q. 생성 (
Q. Collection ( 'Avengers'),
{
데이터 : {
ID : data.id,
이름 : data.name,
전원 : Data.Power,
설명 : data.description
}
}
))
);
Return ResponseObj (200, Avenger)
} catch (오류) {
Console.log (오류)
return responseobj (500, 오류);
}
};특정 컬렉션에 대한 데이터를 저장하려면 위의 코드 예제에서와 같이 데이터를 전달하거나 데이터를 전달해야합니다 . {} 객체. 그런 다음이를 Create Function으로 전달하고 원하는 컬렉션과 데이터를 가리켜 야합니다. 따라서 코드를 실행하고 NetLify Dev 명령을 통해 어떻게 작동하는지 살펴 보겠습니다.
URL http : // localhost : 8888/api/getavengers를 통해 브라우저를 통해 getAvengers 기능을 트리거하겠습니다.
위의 함수는 avenger_by_name index에서 검색하는 이름 으로 어벤저 객체를 가져옵니다. 그러나 먼저 NetLify 함수를 통해 getAvengerByName 함수를 호출합시다. 이를 위해 SearchAvenger라는 함수를 만들어 봅시다.
const {responseobj} = require ( './ util/helper');
const {q, clientQuery} = require ( './ util/connection');
Exports.Handler = async (이벤트, 컨텍스트) => {
const {
querystringparameters : {name},
} = 이벤트;
노력하다 {
Avenger = await clientQuery.query (
Q.call (Q. 기능 ( "getAvengerByName"), [이름])
);
Return ResponseObj (200, Avenger)
} catch (오류) {
Console.log (오류)
return responseobj (500, 오류);
}
};통화 함수는 첫 번째 매개 변수가 우리가 만든 FQL 기능에 대한 참조와 기능으로 전달 해야하는 데이터가있는 두 인수를 취합니다.
이제 여러 기능을 사용할 수 있으므로 React를 통해 이러한 기능을 소비하겠습니다. 기능은 REST API이므로 Axios를 통해 소비하고 State Management의 경우 React의 컨텍스트 API를 사용해 봅시다. AppContext.js 라는 응용 프로그램 컨텍스트부터 시작하겠습니다.
"React"에서 {createContext, usereducer} import;
"./Appreducer"에서 승인자 가져 오기
const initialstate = {
형제 : 거짓,
Avenger : {name : '', description : '', power : ''},
어벤져 스 : [],
사용자 : null,
Isloggedin : 거짓
};
내보내기 const appContext = createContext (InitialState);
내보내기 const appContextProvider = ({children}) => {
const [state, dispatch] = usereducer (승인자, Initialstate);
const login = (data) => {dispatch ({type : 'login', payload : data})}}
const logout = (data) => {dispatch ({type : 'logout', payload : data})}}
const getAvenger = (data) => {dispatch ({type : 'get_avenger', payload : data})}
const updateavenger = (data) => {dispatch ({type : 'update_avenger', payload : data})}
const clearavenger = (data) => {dispatch ({type : 'clear_avenger', payload : data})}
const selectAvenger = (data) => {dispatch ({type : 'select_avenger', payload : data})}
const getAvengers = (data) => {dispatch ({type : 'get_avengers', payload : data})}
const createAvenger = (data) => {dispatch ({type : 'create_avenger', payload : data})}
const deleteavengers = (data) => {dispatch ({type : 'delete_avenger', payload : data})}
return <appcontext.provider value="{{" ... selectavenger updateavenger clearavenger getavenger getavengers createavenger deleteavengers> {children} </appcontext.provider>
}
기본 appContextProvider 내보내기;Appreducer.js 파일 에서이 컨텍스트에 대한 리더러를 만들어 봅시다.이 파일은 응용 프로그램 컨텍스트에서 각 작업에 대한 리소셔 함수로 구성됩니다.
const updateitem = (Avengers, data) => {
Avenger = Avengers.find ((Avenger) => avenger.id === data.id);
updatedAvenger = {... Avenger, ... Data};
avengerindex = avengers.findIndex ((avenger) => avenger.id === data.id를하자;
반품 [
... Avengers.slice (0, avengerindex),
updateAvenger,
... Avengers.slice (avengerindex),
];
}
const deleteitem = (Avengers, id) => {
Return Avengers.filter ((Avenger) => Avenger.data.id! == id)
}
const appreducer = (state, action) => {
스위치 (action.type) {
사례 'select_avenger':
반품 {
...상태,
형제 : 사실,
Avenger : Action.PayLoad
}
CASE 'CLEAR_AVENGER':
반품 {
...상태,
형제 : 거짓,
Avenger : {이름 : '', description : '', power : ''}
}
사례 'update_avenger':
반품 {
...상태,
형제 : 거짓,
어벤져 스 : UpdateItem (state.avengers, action.payload)
}
사례 'get_avenger':
반품 {
...상태,
Avenger : Action.PayLoad.Data
}
사례 'get_avengers':
반품 {
...상태,
어벤져 스 : array.isarray (action.payload && action.payload.data)? action.payload.data : [{... action.payload}]
};
CASE 'create_avenger':
반품 {
...상태,
어벤져 스 : [{data : action.payload}, ... state.avengers]
};
사례 'delete_avenger':
반품 {
...상태,
어벤져 스 : deleteitem (state.avengers, action.payload)
};
사례 '로그인':
반품 {
...상태,
사용자 : action.payload,
Isloggedin : True
};
사례 '로그 아웃':
반품 {
...상태,
사용자 : null,
Isloggedin : 거짓
};
기본:
반환 상태
}
}
수출 기본 승인자;
응용 프로그램 컨텍스트를 사용할 수 있으므로 응용 프로그램 컨텍스트에서 작성한 NetLify 기능에서 데이터를 가져올 수 있습니다. 이 기능 중 하나를 호출하는 방법을 살펴 보겠습니다.
const {Avengers, getAvengers} = usecontext (AppContext);
const getAvengers = async () => {
{data} = abait axios.get ( '/api/getavengers);
getavengers (데이터)
}데이터를 응용 프로그램 컨텍스트로 가져 오려면 응용 프로그램 컨텍스트에서 GetAvengers 기능을 가져 와서 Get Call이 가져온 데이터를 전달해 봅시다. 이 기능은 reture 기능을 호출하여 데이터를 컨텍스트에 유지합니다. 컨텍스트에 액세스하기 위해 Avengers라는 속성을 사용할 수 있습니다. 다음으로 Avengers 컬렉션에서 데이터를 저장할 수있는 방법을 살펴 보겠습니다.
const {createAvenger} = usecontext (AppContext);
const createAvenger = async (e) => {
e.preventDefault ();
let new_avenger = {id : uuid (), ... newAvenger}
axios.post ( '/api/addavenger', new_avenger);
분명한();
CreateAvenger (new_avenger)
}위의 NewAvenger 객체는 양식 데이터를 유지하는 상태 객체입니다. 유형의 UUID 의 새로운 ID를 각 문서에 전달합니다. 따라서 데이터가 동물 군에서 저장되면 응용 프로그램 컨텍스트에서 CreateAvenger 함수를 사용하여 데이터를 컨텍스트에 저장합니다. 마찬가지로 Axios를 통해 이와 같은 CRUD 작업으로 모든 NetLify 기능을 호출 할 수 있습니다.
작업 응용 프로그램이 있으므로이 앱을 NetLify에 배포 할 수 있습니다. 이 응용 프로그램을 배포 할 수있는 몇 가지 방법이 있습니다.
CLI를 사용하면 특정 세부 사항과 선택을 입력하라는 메시지가 표시되며 CLI는 나머지를 처리합니다. 그러나이 예에서는 GitHub를 통해 응용 프로그램을 배포 할 것입니다. 먼저 NetLify 대시 보드에 로그인하고 GIT 버튼에서 새 사이트를 클릭하십시오. 다음으로 배포하는 데 필요한 리포와 빌드 명령, 빌드 폴더 등과 같은 사이트 구성을 선택하라는 메시지가 표시됩니다.
Netlify Identity는 응용 프로그램에 대한 인증 된 사용자를 관리하는 데 도움이되는 애플리케이션에 대한 전체 인증 기능을 제공합니다. Netlify Identity는 다른 타사 서비스 및 라이브러리를 사용하지 않고 응용 프로그램에 쉽게 통합 할 수 있습니다. Netlify Identity를 사용하려면 Neltify 대시 보드에 로그인해야하며 배포 된 사이트에서는 ID 탭으로 이동하여 ID 기능을 허용해야합니다.
신원을 활성화하면 Netlify Identity에 대한 링크를 제공합니다. 해당 URL을 복사하여 react_app_netlify 응용 프로그램의 .env 파일에 추가해야합니다. 다음으로 Netlify-Identity-widget 및 NetLify 함수를 통해 RECT 응용 프로그램에 NetLify ID를 추가해야합니다. 그러나 먼저 index.js 파일의 Identity Context Provider 구성 요소에 대한 React_app_netlify 속성을 추가하겠습니다.
'React'에서 React React;
'React-Dom'에서 Reactdom 가져 오기;
import './index.css';
"React-netlify-evality-widget/styles.css"가져 오기
'부트 스트랩/dist/css/bootstrap.css';
'./app'에서 앱 가져 오기;
"react-netlify-identity-widget"에서 {IdentityContextProvider} 가져 오기
const url = process.env.react_app_netlify;
REACTDOM.RENDER (
<identitycontextprovider url="{url}">
<app></app>
</identitycontextprovider>,
document.getElementById ( 'root')
);이 구성 요소는이 응용 프로그램에서 사용하는 탐색 표시 줄입니다. 이 구성 요소는 인증을 처리하기에 이상적인 장소가되기 위해 다른 모든 구성 요소 위에 있습니다. 이 react-netlify-eDidentity-idget은 사용자 signi = in 및 가입을 처리하는 다른 구성 요소를 추가합니다.
다음으로 Netlify 기능에서 신원을 사용해 봅시다. Identity는 아래 기능 getAvenger와 같이 우리의 기능에 약간의 수정을 도입합니다.
const {responseobj} = require ( './ util/helper');
const {q, clientQuery} = require ( './ util/connection');
Exports.Handler = async (이벤트, 컨텍스트) => {
if (context.clientContext.user) {
const {
querystringparameters : {id},
} = 이벤트;
노력하다 {
Const Avenger = Await ClientQuery.Query (
Q.get (
Q.match (q.index ( 'avenger_by_id'), id)
))
);
Return ResponseObj (200, Avenger)
} catch (오류) {
Console.log (오류)
return responseobj (500, 오류);
}
} 또 다른 {
Return ResponseObj (401, '무단');
}
};각 요청의 컨텍스트는 ClientContext 라는 속성으로 구성됩니다. 인증 된 사용자 세부 사항으로 구성됩니다. 위의 예에서는 간단한 IF 조건을 사용하여 사용자 컨텍스트를 확인합니다.
각 요청에서 ClientContext를 얻으려면 인증 헤더를 통해 사용자 토큰을 전달해야합니다.
const {user} = useidentityContext ();
const getAvenger = async (id) => {
{data} = await axios.get ( '/api/getavenger/? id ='id, user && {
헤더 : {
승인 :`bearer $ {user.token.access_token}`
}
});
getAvenger (데이터)
}이 사용자 토큰은 NetLify Identity Widget을 통해 응용 프로그램에 로그인하면 사용자 컨텍스트에서 사용할 수 있습니다.
보시다시피 NetLify 기능과 동물 군은 서버리스 애플리케이션을 구축하기위한 유망한 듀오로 보입니다. 이 Github Repo를 따라 전체 코드에 대해이 URL을 참조하십시오.
결론적으로 Fauna와 Netlify는 서버리스 애플리케이션을 구축하기위한 유망한 듀오가 될 것으로 보인다. Netlify는 또한 플러그인을 통해 기능을 확장하여 경험을 향상시키는 유연성을 제공합니다. 당신이 갈 때 지불하는 가격 책정 계획은 개발자가 동물 군을 시작하는 데 이상적입니다. 동물 군은 매우 빠르며, 자동 스케일은 개발자가 그 어느 때보 다 개발에 집중할 시간을 갖도록합니다. 동물 군은 관계, 문서, 그래프, 시간 데이터베이스에서 찾을 수있는 복잡한 데이터베이스 작업을 처리 할 수 있습니다. 동물 군사 드라이버는 Android, C#, Go, Java, JavaScript, Python, Ruby, Scala 및 Swift와 같은 모든 주요 언어를 지원합니다. 이러한 모든 우수한 기능을 갖춘 동물 군은 최고의 서버리스 데이터베이스 중 하나 인 것으로 보입니다. 자세한 내용은 동물 군 문서를 살펴보십시오.
위 내용은 NetLify 함수로 데이터에 액세스하고 반응합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
