스트라피 스타터 반응 블로그

5393 단어 blogreactstrapi
Strapi는 모든 프런트 엔드 애플리케이션을 위한 맞춤형 API를 생성할 수 있는 오픈 소스 콘텐츠 관리 시스템(CMS)입니다. Strapi는 사용자가 인정할 고유한 기능을 갖춘 다목적 API를 생성할 수 있기 때문에 사용하기가 매우 쉽습니다. Strapi는 많은 사용자 정의를 허용합니다.

왜 우리는 이러한 스타터를 만들었습니까?



스타터를 사용하면 Strapi와 프런트엔드 프레임워크 간의 연결 결과를 빠르게 시각화할 수 있습니다. 응용 프로그램을 처음부터 시작하는 것보다 제품에 대한 아이디어를 얻기 위해 기존 응용 프로그램을 파헤치는 것이 더 쉽고 빠릅니다. 이 프레임워크 또는 저 프레임워크를 사용하여 블로그를 만드는 방법에 대해 작성tutorials한 것처럼, 스타터를 만들기 위해 결과 애플리케이션을 사용하는 것이 Strapi 커뮤니티에 유용해 보였습니다.

목표

React 및 기타 응용 프로그램 소프트웨어를 사용하여 Strapi로 기본 블로그를 만드는 방법을 이해합니다.

전제 조건
계속 진행하려면 다음에 대한 기본적인 이해가 필요합니다.
  • Node.js용 JavaScript 기본 지식,
  • 스트라피의 기본적인 이해 - get started here ,
  • 최신 버전Node.js v14,
  • 다운로드 및 설치
  • Heroku에 대한 기본 이해 및 ( heroku with strapi ),
  • Cloudinary
  • 의 기본 이해
  • Netlify의 기본적인 이해 .

  • 이 프레임워크 또는 해당 프레임워크로 블로그를 만드는 방법에 대한 이전tutorials이 있습니다. 스타터를 만들기 위해 결과 애플리케이션을 사용하는 것이 Strapi 커뮤니티에 유용해 보였습니다.

    스타터를 시작하려면 두 가지 옵션이 있습니다.
  • 스타터를 설치한 다음 tutorial을 따라 시작하여 재현하고 학습할 수 있습니다.
  • 또는 스타터를 실행하여 응용 프로그램을 직접 테스트할 수 있습니다.

  • 어떻게 실행하는지 보자!

    백엔드 배포



    Strapi 인스턴스를 배포하려면 다음이 필요합니다.
  • A Heroku account
  • A Cloudinary account for saving images

  • 이러한 계정을 만든 후에는 이 버튼을 클릭하여 인스턴스를 배포할 수 있습니다.
    배포 버튼을 클릭하기 전에 strapi 백엔드 코드의 .env 파일이 아래 이미지의 정보로 업데이트되었는지 확인하십시오.



    그 다음에



    Here is the repository of the backend of this starter .

    Heroku에 배포한 후 아래와 같은 출력이 표시되어야 합니다.



    프런트엔드 배포



    Netlify에서
    프런트엔드를 배포하려면 무료Netlify account가 필요합니다. 계정을 생성하면 인스턴스를 배포할 수 있습니다.



    리포지토리 이름을 선택하고 후행 슬래시 없이 Heroku의 Strapi 인스턴스로 `API_URL를 채웁니다.

    특징
  • 2 콘텐츠 유형: 기사, 카테고리
  • 2 작성된 글
  • 3 생성된 카테고리
  • 문서 및 범주
  • 에 대해 true로 설정된 권한
  • UIkit을 사용한 반응형 디자인

  • 페이지
  • "/"는 모든 기사를 표시합니다.
  • "/article/:id"는 하나의 기사를 표시합니다.
  • "/category/:id"는 범주에 따라 기사를 표시합니다.

  • 시작하기



    백엔드
    Strapi starter blog에서 전체 지침을 참조하십시오. 이제 GitHub 저장소를 복제하고 서버를 시작하겠습니다.
    `bash
    git clone https://github.com/strapi/strapi-starter-react-blog.git
    cd strapi-starter-react-blog
    `

    프런트엔드 서버 시작
    ` bash
    # Using yarn
    yarn install
    yarn develop
    # Using npm
    npm install
    npm run develop
    

    `

    React server is running here => http://localhost:3000

    If you are interested in the idea of making React applications with Strapi, here are the reasons why it is very good to bet on this duo: Strapi + React.

    If you liked it, it would be great to share the word 📣 And let me know what you thought of it in the comments below.

    좋은 웹페이지 즐겨찾기