CodeSandbox, Contentful, Netlify 세 가지를 사용하여 클라우드에서 웹 사이트 개발, 편집 및 배포

개발 기계를 설치하는 것은 아마도 번거로운 과정일 것이다.나는 일찍이 한 회사에서 일한 적이 있다. 이틀도 안 되는 시간 안에 우리가 개발하고 있는 맞춤형 상점 시스템의 개발 환경 설정을 완성했다. 이것은 성과이다. (공평하게 말하면 이것은 유랑자와 Docker가 하나의 물건이 되기 전이다.)왜 이러지?
소프트웨어 제품 구축은 대부분 당신이 가장 좋아하는 편집기나 IDE 같은 것에 의존하여 효율을 높인다. 데이터베이스, 셸 프로그램, 서버 등 설치에 의존하여 소프트웨어를 실제로 실행하고 업데이트한다.이것이 여전히 필요합니까? 아니면 우리가 이 모든 것을 포기하고 클라우드 서비스에 전적으로 의존할 수 있습니까?
나는 최근에 관련 강연을 했고, 컴퓨터에 파일을 놓지 않고 얼마나 멀리 갈 수 있는지 연구했다.사실 증명;당신은 정말로 웹 사이트를 만들어서 편집할 수 있게 하고, 현재의 강력한 온라인 서비스를 사용하여 모든 컴퓨터에서 웹 사이트를 배치할 수 있습니다 I’m a big fan of the recent static site generators.

CodeSandbox – 마을의 새로운 온라인 편집기

얼마 전, 코드 샌드박스가 점점 더 React 원형 디자인에 사용되고 있다는 것을 알게 되었는데, 당시 사람들은 트위터에서 특정한 React 모델이나 최선의 실천을 가진 샌드박스를 공유하기 시작했다."또 다른 온라인 편집기가 필요합니까?"이것은 나의 즉각적인 반응이다.

올해 초에 나는 한 편의 문장on how to use render props in React을 써서 시험해 보기로 결정했다CodeSandbox.그것은 내 로컬 편집기 (VSCode 사용 중) 와 같지 않지만, 매우 가깝다.
CodeSandbox에서 50만(!) 중 하나부터 시작할 수 있습니다.사용 가능한 사용자 샌드박스나 React, Vue, Angular 및 기타 프레임워크를 사용하는 초보자 템플릿을 처음부터 선택하십시오.모든 사용자가 만든 샌드박스를 보면 편집기가 React 생태계의 빠른 원형에 주로 사용되는 것을 볼 수 있습니다.그러나 이것은 당신이 그것으로 React 생태계 안팎에서 더욱 복잡한 것을 구축할 수 없다는 것을 의미하지는 않는다.

완전히 클라우드에서 JavaScript 개발 시작

현대 프레임워크를 이용하여 새로운 자바스크립트 기반 프로젝트를 시작하는 것은 매우 지루하고 과거에는 초보자의 우호와는 거리가 멀었다.React의 직원은 이것이 바뀌어야 한다는 것을 발견하고 create-react-app 를 제시했다.이 프로젝트는 몇 분 안에 새 React 프로젝트를 시작하고 시작하는 데 도움을 줍니다. 모든 the configuration away 을 가져오고 필요한 기본값을 제공하는 것입니다. (#zeroconfig all things)🎉).
create react app은 CodeSandbox가 새로운react 프로젝트를 만드는 기초입니다.Preact, Vue 및 기타 프레임워크의 경우 유사한 CLI 도구를 사용할 수 있으며, 심지어는 "normal"엔트리 템플릿도 사용할 수 있습니다. Parcel 프레임워크 의존성이 심각하지 않습니다(새로운 제로 구성 바인딩기 – 대단합니다, 믿어주세요!)엔진 뚜껑 아래에서 너에게 필요한 모든 자유를 주겠다.
React 노선을 걷고 새 프로젝트를 초기화하기로 결정하면 코드 라이브러리를 얻을 수 있습니다. React 개발에 투입할 수 있습니다.

중요한 편집기 기능은 당신을 온라인 편집기에서'그냥'하는 것을 잊게 한다

cmd/ctrl+p 빠른 파일 접근 및 명령
웹 개발을 진행할 때, 나는 몇 가지 떠날 수 없는 것이 있다. 우선, CMD+p과, CMD+Shift+p.이 두 가지 단축키를 사용하면 빠르고 사용하기 쉬운 모호한 검색을 통해 모든 파일로 이동하거나 사용할 수 있는 명령을 실행할 수 있습니다.프로그래밍은 일반적으로 생산력에 관한 것이다. 이 두 단축키는 키보드를 떠나지 않고 모든 것을 실현할 수 있도록 도와준다.
종속 관계 처리 및 자동 설치
하지만 지금 당신은 구름 환경에 있죠?그렇다면 의존항을 어떻게 설치합니까?CodeSandbox는 npm에서 의존 항목을 쉽게 선택할 수 있는 대화상자를 제공합니다.이 대화 상자를 사용하여 패키지를 설치하면 package.json 자동으로 업데이트됩니다.설탕의를 함유한다
기본적으로 더 예쁜 것도 포함돼요.
CodeSandbox에서 개발할 때 Prettier 기본적으로 활성화되고 설정이 가능하며 매우 평온하게 실행됩니다!
별도의 창에서 핫 다시 로드
위의 화면 캡처를 보면 편집기가 브라우저 내 미리보기를 제공합니다.가장 멋있는 것은 단독 창에서 미리보기를 열 수 있다는 것이다. 이것은 나 같은 두 개의 모니터 설정에 있어서 완벽하다.이렇게 하면 코드가 한 모니터에 있고, 나는 다른 모니터에서 변경 사항을 실시간으로 볼 수 있다.
TypeScript 유형 정의가 있는 프로젝트의 자동 완료
VSCode가 npm 패키지에 포함된 유형 정의를 가져온 것을 발견했을 때, 나는 최종적으로 TypeScript를 사용하기로 결정했다.자바스크립트 개발자로서 나는 자동 보완이 잘 되지 않은 상황에서 일하는 것에 매우 익숙하지만, 나의 편집기가 TypeScript 정의를 픽업하는 것을 보면 매우 좋다.코드 샌드박스도 이렇게 하는 거 보니까 좋아요!

GitHub 통합으로 CodeSandbox가 진정한 도구가 되었습니다.
마지막으로 저를 끌어당기는 특징은 GitHub 통합입니다. 코드샌드박스에서 프로젝트를 만들어서 GitHub로 보내고 코드샌드박스에서 GitHub로 직접 제출할 수 있습니다.멋있는 거!

유일하게 부족한 기능
여러 개의 파일을 한 번에 볼 수 있는 분할 보기 모드는 일상적인 개발 응용 프로그램에서 유일하게 부족한 것이다.우리는 그것이 곧 오기를 바란다.🤞🏻

Contentful – 모든 프로젝트의 컨텐츠 인프라

CodeSandbox를 사용하면 다음 JavaScript 항목을 빠르게 작성하여 GitHub로 전송할 수 있습니다.그러나 사이트 개발을 할 때 프로젝트는 코드를 작성하는 데 익숙하지 않은 사람들을 위해 구축된다.
친구의 빠르고 한 페이지의 조합 사이트를 예로 들자.당신은 어떻게 이 프로젝트를 실현합니까? 요청을 통해 내용을 업데이트할 필요도 없고 완전한 내용 관리 시스템을 구축할 필요도 없습니다.Contentful 컨텐츠 인프라스트럭처를 활용하여 구현할 수 있습니다.

Contentful이 있으면 몇 분 안에 필요한 데이터 모델을 정의하고 JSON API를 사용하여 데이터를 얻을 수 있습니다.위의 예시에서 이미지, 제목, 단락의 각 필드를 가진 실체가 필요합니다.이러한 유연성은 바로 Contentful이 작용하는 부분이다. 하나의 내용 유형portfolio을 만들고 세 개의 필요한 필드를 정의하는 것이다. 서버나 비슷한 것을 설정할 필요가 없다.
비기술적인 친구는 JSON 파일이나 React 코드를 편집하지 않고 구축 중인 JavaScript 프로그램의 내용을 변경할 수 있습니다.

잠시 후 제공된 JavaScript SDK 을 사용하여 친구가 편집한 내용 데이터를 얻을 수 있습니다.

import React from "react";
import ReactDOM from "react-dom";
import { createClient } from "contentful";
import "./styles.css";

// create the SDK client with the needed credentials
// which you can get in the web app
const client = createClient({
  space: "...",
  accessToken: "..."
});

function Portfolio() { /* … */ }

class App extends React.Component {
  constructor() {
    super();
    this.state = { isLoading: true, portfolio: null };
    // fetch the entry of your portfolio entry type
    client
      .getEntries({
        content_type: "portfolio"
      })
      .then(({ items }) => {
        this.setState({ isLoading: false, portfolio: items[0] });
      });
  }

render() {
    return this.state.isLoading ? (
      <div>Loading</div>
    ) : (
      <div className="App">
        <Portfolio {...this.state.portfolio.fields} />
      </div>
    );
  }
}

When you look at the code above, 제가 가장 좋아하는 일 중 하나는 콘텐츠 항목을 프런트엔드 구성 요소와 쉽게 연결할 수 있다는 것입니다<Portfolio {...this.state.portfolio.fields} />.이런 관계는 사람을 만족시킨다a perfect fit for component-driven applications and sites.

Netlify – 클릭 횟수가 적은 정적 배포 도구

이제 코드를 편집하여 CodeSandbox의 Github에 연결할 수 있습니다. Contentful을 통해 응용 프로그램에 지원하는 내용을 편집할 수 있습니다.마지막 단계는 어딘가에 이 프로그램을 배치하는 것이다.
Netlify는 정적 배포를 위한 비교적 새로운 서비스입니다.Netlify의 멋진 점은 구축 스크립트를 정의할 수 있다는 것입니다. 이것은 CI 서비스와 호스트라고 할 수 있습니다.
Netlify에 사이트를 배포하려면 특정 GitHub 저장소를 가져오기 시작합니다.

다음 단계는 생성 명령과 공공 디렉터리를 정의하는 것입니다. 정적 파일이 나타날 것입니다.create-react-app에 대해build 명령은 npm run build, 발표된 디렉터리는 build이다.이 두 설정을 제출하면 첫 번째 배치가 시작되고 실행되며, 넷lify에서 유일한 하위 영역을 얻을 수 있습니다.일반 도메인 이름 형식입니다.
Netlify에서 GitHub 저장소를 가져온 후 뚜렷하지 않은 것은 이 과정이 GitHub의 Webhook도 정의했다는 것이다.이제 새 코드를 GitHub로 전송할 때마다 Netlify는 자동으로 사이트를 재배치합니다.마술마술

Webhook을 사용하여 모든 위젯 연결

이 패키지 프레젠테이션 사이트에 대해서는 추가 웹 훅 설정이 필요하지 않습니다. 왜냐하면React 응용 프로그램이 브라우저에서 데이터를 직접 가져오기 때문입니다.클라이언트의 응용 프로그램만 모든 필요한 API 데이터를 얻을 때까지 불러오는 마이크로 모뎀을 표시하는 현저한 단점이 있다.더 효과적인 방법은 서버에서 정적으로 React를 미리 렌더링한 다음 클라이언트 React 코드가 시작될 때 hydration 라고 불리는 작업을 실행하는 것이다.
정적 프리젠테이션 방법은 생성된 HTML 파일을 다시 보여 주고 친구가 컨텐트로 패키지 데이터를 업데이트할 때 배치해야 한다는 것을 의미합니다.이 경우 Contentful에서 Netlify에 대한 다른 웹 훅을 설정해야 합니다.

웹 훅 설정을 조금만 더 하면 로컬 설치와 설정이 필요 없고, 마이크로프로세서를 불러오지 않아도 정적 사이트를 운송할 수 있는 완전한 배치 파이프를 만들 수 있습니다.

웹 서비스의 힘을 이용하여 바퀴를 재발명하지 마라

한마디로 웹 개발 분야에 얼마나 큰 변화가 생겼는지 놀랍다.Serverless technologies change the way we work 프로젝트에 필요한 모든 작은 부분을 걱정할 필요가 없습니다.노드를 실행하는 데 사용됩니다.우리는 js 프로젝트Zeit, 인증Auth0, 성능 검색 체험Algolia을 사용할 수 있다.

Webhooks와 서버 기능이 없어서 이 모든 서비스를 쉽고 빠르게 연결할 수 있고 클라우드에서 빠른 연결기를 작성할 수 있습니다.이것은 사람을 매우 흥분시킨다. 왜냐하면 나는 지금 물건을 설치하는 것이 아니라, 물건을 구축하는 데 전념할 수 있기 때문이다.우리가 친구의 베란다에 앉았을 때, 나는 심지어 그의 컴퓨터에 사이트를 만들고 배치할 수 있었다.