Gatsby는 사이트를 public/의 일반 파일로 빌드합니다. 모든 페이지의 HTML과 탐색을 빠르게 하는 JavaScript입니다. 2023년에 Gatsby Cloud가 종료된 이후 많은 Gatsby 사이트가 새 호스트를 찾고 있습니다. Lobsite는 빌드된 폴더를 호스팅합니다. gatsby build를 실행한 다음 npx lobsite를 실행하면 HTTPS가 적용된 *.lobsite.app 주소로 사이트가 공개됩니다.
작동 방식
npx gatsby build(또는npm run build)로 사이트를 빌드하세요. Gatsby가public/에 작성합니다.- 프로젝트에서
npx lobsite를 실행하세요.public/을 찾아 배포합니다. Gatsby 프로젝트에서는 이것이 빌드 출력이며, 직접 만든 정적 파일은static/에 있습니다. 첫 배포는 계정이 필요 없으며 6시간 동안 유지됩니다. - 가져오기 링크로 무료 계정에 사이트를 유지하세요. 그 후 같은 두 명령어로 같은 주소가 업데이트됩니다.
gatsby-config 설정
// gatsby-config.js
module.exports = {
siteMetadata: { siteUrl: "https://my-site.lobsite.app" },
};
- **
siteMetadata.siteUrl**은 전체 주소입니다.gatsby-plugin-sitemap, 대표 링크, 피드가 이를 읽습니다. - **
pathPrefix**는 필요 없습니다. 사이트는 주소의 최상위에서 제공됩니다. GitHub Pages용으로 설정했다면--prefix-paths없이 빌드하세요. - **
gatsby clean**은 캐시와public/을 지웁니다. 삭제한 페이지가 배포에 나타나면 실행하세요.
Gatsby의 서버 기능이 필요한 것
정적 페이지, gatsby-plugin-image, GraphQL 데이터는 gatsby build 중에 처리되므로 모두 작동합니다. Gatsby Functions(src/api), getServerData를 사용한 서버 사이드 렌더링, Deferred Static Generation은 서버가 필요하며 Lobsite에서 실행되지 않습니다. 문의 폼을 처리하는 함수는 /_lobsite/forms/contact로 전송하는 폼으로 바꾸세요. 폼을 참고하세요. createRedirect로 만든 리디렉션에는 호스트 플러그인이 필요합니다. Lobsite에서는 대신 lobsite.toml에 작성하세요. 리디렉션 생성기로 만들 수 있습니다.
파일은 해시로 저장됩니다. 변경되지 않은 사이트를 다시 배포하면 0바이트가 업로드됩니다.
공개 전에 미리 보세요. 리디렉션까지 포함해 클릭 한 번으로 롤백합니다.
모든 사이트는 첫 배포부터 HTTPS가 적용된 *.lobsite.app 주소를 받습니다.
폼의 대상을 /_lobsite/forms/contact로 지정하세요. 스팸 필터링이 포함됩니다.
리디렉션, 헤더, 폼은 lobsite.toml에 있으며 각 배포와 함께 이동합니다.
계정 없는 배포는 6시간 동안 공개됩니다. 가져오기 링크로 무료로 유지할 수 있습니다.
Gatsby 호스트 비교
| Lobsite | Netlify | GitHub Pages | |
|---|---|---|---|
| 정적 Gatsby 사이트 | 예 | 예 | 예 |
| Functions, SSR, DSG | 아니요 | 예 | 아니요 |
| 서버에서 빌드 | 아니요: public/ 배포 |
예 | GitHub Actions에서 |
| 변경된 파일만 업로드 | 예 | 예 | Git을 통해 |
| 첫 배포 전 계정 | 불필요: 6시간 공개 후 무료로 유지 | 필요 | 필요, 저장소도 필요 |
| 백엔드 없는 폼 | 예, 사이트가 계정에 있으면 | 예 | 아니요 |
| 커스텀 도메인 | 예, 무료 | 예 | 예 |
2023년에 Gatsby를 인수한 Netlify에서는 서버 기능도 실행됩니다. 대부분의 Gatsby 사이트처럼 정적인 사이트라면 Lobsite가 명령어 하나로 빌드된 폴더를 배포하며, Gatsby의 해시된 파일 이름 덕분에 다시 빌드해도 실제로 변경된 파일만 업로드됩니다.
자주 묻는 질문
Gatsby Cloud가 사라진 지금 Gatsby 사이트를 어디에 호스팅할 수 있나요?
모든 정적 호스트에서 빌드된 Gatsby 사이트를 제공할 수 있습니다. Lobsite에서는 gatsby build와 npx lobsite를 실행하면 되며, 첫 배포는 계정이 필요 없습니다.
npx lobsite가 Gatsby에서 public/을 배포하는 이유는 무엇인가요?
Gatsby가 빌드된 사이트를 public/에 작성하기 때문입니다. favicon.ico처럼 복사할 파일은 static/에 두면 빌드 중 Gatsby가 public/으로 복사합니다.
gatsby-plugin-image가 정적 호스트에서 작동하나요?
네. 이미지는 gatsby build 중에 크기가 조정되어 public/에 작성되므로 배포할 때는 일반 파일입니다.
Gatsby 404 페이지가 작동하나요?
네. src/pages/404.js는 404.html로 빌드되며, Lobsite는 존재하지 않는 주소에 404 상태로 제공합니다.