전체 스택 인증 및 관리(Nodejs, Reactjs, Heroku, Netlify)

소개하다.


본고는 내가 과거에 쓴 일련의 신분 검증에 관한 문장의 총집이다.전담 엔지니어로서, 나는 이러한 내용을 만들어서 전단과 후단 엔지니어 간의 차이를 메우기 위해 최선을 다한다.이 총집은 초보자를 위해 쓴 것이다.한 부분에서 다른 부분으로 마음대로 뛰어넘으세요.

건너뛰다

  • Introduction to Nodejs
  • Building the Back-End with Nodejs
  • Introduction to React-Bootstrap
  • Building the Front-end with React
  • Hosting the App
  • Get all Resources and view preview
  • Conclusion
  • Nodejs 소개


    이것은 제가 당신에게 Nodejs를 소개하고 서버를 만드는 방법을 보여 드리는 부분입니다.그것의 제목은 간단하고 안전하며 건장한 노드 JS 서버를 구축하는 것이다.

    Nodejs로 백엔드 구성


    컴파일된 이 부분은 Nodejs를 사용하여 인증 백엔드를 구축하는 방법을 소개합니다
  • React Bootstrap 소개


    이 부분을 사용하여react의 안내를 소개합니다. 그러면 다음에 작성할 코드에 대해 곤혹스러워하지 않을 것입니다.React 부트는 더 적은 코드로 더 빨리 프로그램을 구축할 수 있도록 도와줍니다.

    React로 프런트엔드 구축


    여기서 백엔드에서 구축된 API 엔드포인트를 사용합니다.우리는 또한 신분 검증이 필요한 경로를 보호한다.다음 자습서를 참조하십시오.
  • 관리형 어플리케이션


    이 부분에 대한 전문적인 강좌가 없다. 왜냐하면 나는 이미 많은 강좌가 있다고 가정하기 때문이다.나는 이 점을 본 집필에 대한 장려로 삼을 것이다.많은 위탁 관리 사이트가 당신에게 무료 위탁 관리 서비스를 제공합니다. 예를 들어 버셀, Netlify, Heroku 등입니다.이 자습서에서는 Netlify 를 사용합니다.이것은 네가 몇 걸음 걸어야 한다.나를 따르다
  • 탐색 https://app.netlify.com/signup 및 등록
  • 대시보드에 도달할 때까지 절차에 따라 조작
  • 아래로 스크롤하면 이 화면에 들어갑니다
  • 프로젝트 폴더를 상자에 끌어다 놓으면 위탁 관리가 완료되거나 git repo에 연결할 수 있습니다.git에 연결되는 장점은 지속적으로 배치할 수 있다는 것이다.나중에 응용 프로그램을 변경할 이유가 있으면 이 절차를 다시 수행할 필요가 없습니다.
  • 버튼 클릭New Site from Git
  • 원하는git 플랫폼을 선택하고 넷lify 응용 프로그램에 동기화할 수 있는 권한을 부여합니다
  • 동기화할 환매 협의 선택
  • 페이지에서 Deploy Site 단추를 누르면
  • 로 리디렉션됩니다
  • 사이트 발표를 기다립니다.2분도 안 걸릴 거야.당신은 지금 당신이 본 링크를 클릭하여 당신의 사이트를 방문할 수 있습니다
  • 페이지 상단의 웹 사이트 URL에 주의하십시오.Netlify에서 제공하는 임의 URL입니다.
  • 클릭Site Settings 버튼
  • 을 통해 변경 가능
  • Site details부분에서 change site name버튼
  • 을 클릭
  • 이름 변경 및 클릭Save
  • 사이트 이름이 변경되었습니다.다음 글 참조:

    You are likely to face the issue of redirecting to another page after hosting. The error may look like the image below:



    문제를 해결하다

  • react 프로젝트
  • 에 들어가는 공용 폴더
  • 파일을 만들고 이름을 _redirects
  • 로 지정합니다.
  • 다음을 입력합니다.
  • 
        /*  /index.html 200
    
    
  • 응용 프로그램이 있는git 플랫폼
  • 에 저장하고 되돌려줍니다
  • 프로그램이 자동으로 발표되기를 기다리고 있습니다. 모든 것이 정상이어야 합니다

  • 실수가 사라졌다
    축하해!!!당신은 지금 완전한 창고 엔지니어입니다...

    모든 에셋 가져오기 및 미리 보기 보기

  • a.Nodejs Code can be found here
    b、 Backend is live here
  • a.Reactjs Code can be found here
    b、 Front-end is live here
  • 결론


    이 강좌는 자바스크립트 (백엔드는 Nodejs, 전단은 Reactjs) 를 사용하여 완전한 창고 인증 시스템을 구축하는 방법을 소개합니다.Netlify에서 애플리케이션을 호스팅하고 리디렉션 문제를 해결하는 방법도 알아봤습니다.
    나는 너희들이 현실 세계 문제를 해결하는 응용 프로그램을 구축하도록 격려할 것이다.만약 당신이 이미 시작했다면, 멈추지 마세요.지금 널 막을 수 있는 건 아무것도 없어.

    좋은 웹페이지 즐겨찾기