GitHub io 배포 - GitHub io baepo

위의 해당 코드들을 추가한 후 파일을 저장하고 터미널에서 npm run deploy 커맨드를 실행해줍니다. 그리고 github repository에서 해당 repository page 설정을 해주신 후 나타나는 주소로 접속하면 React Project가 배포된 것을 확인 할 수 있습니다.!!!

혹시 프로젝트 배포 후 React Project가 아니라 README.md 파일이 나타나는 경우 아래의 사진처럼 Branch를 ‘main’이나 설정해둔 Branch명이 아니라 ‘gh-pages’로 지정해주면 정상적으로 React Project가 출력됩니다.

여러분의 사이트는 베르셀(Vercel), 깃허브 페이지(GitHub Pages), 네트리파이(Netlify), 렌더(Render), 서지(Surge) 같은 파일 호스팅 서비스로 배포할 수도 있습니다...

도큐사우루스 사이트는 정적 렌더링 방식을 사용합니다. 자바스크립트가 없이도 잘 동작합니다.

설정​

라우팅을 최적화하고 올바른 위치에서 파일을 제공하려면

yarn run serve

yarn run serve

yarn run serve

yarn run serve

yarn run serve

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

yarn run serve

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

로컬에서 빌드 테스트하기​

실제 배포 작업을 진행하기 전에 로컬에서 빌드 테스트를 진행해야 합니다. 도큐사우루스는 로컬 빌드 테스트를 위한

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

• npm
• Yarn

npm run serve

yarn run serve

기본적으로 여러분의 사이트는 http://localhost:3000/로 로드됩니다.

트레일링 슬래시 설정​

도큐사우루스는 URL/링크와 파일명 생성 패턴을 선택할 수 있는

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

기본값에서도 잘 동작합니다. 하지만 정적 호스팅 서비스 제공 업체에 따라 다른 동작 방식을 가질 수 있습니다. 때문에 같은 사이트를 여러 서비스에 배포하면 다른 결과가 나타날 수도 있습니다. 여러분이 선택한 호스팅 서비스에 따라 설정을 변경해서 사용할 수 있습니다.

팁

호스팅 서비스에서 지원하는 동작 방식과 적절한

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

환경 변수 사용하기​

잠재적으로 민감할 수 있는 정보는 환경 설정으로 빼놓은 것이 일반적인 관행입니다. 하지만 전형적인 도큐사우루스 웹사이트에서

yarn run serve

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

docusaurus.config.js

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

home.jsx

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

호스팅 공급자 선택하기​

몇 가지 공통적인 호스팅 옵션입니다.

• Apache2나 Nginx 같은 HTTP 서버로 자체 호스팅
• 잼스택 공급자. 예를 들어 Netlify나 Vercel. 이들을 참조하긴 하지만 다른 공급자들도 같은 방식을 적용될 수 있습니다.
• 깃헙 페이지. (이 역시 잼스택의 하나이지만 별도로 분류했습니다).

어떤 것을 선택해야 할지 잘 모르겠다면 다음 질문을 참고하세요.

• 🔴 자체 호스팅은 설정하기가 쉽지 않습니다. 일반적으로 이를 관리하기 위해 경험 있는 사람이 필요합니다. 클라우드 서비스는 대부분 무료가 아니며 자체 서버를 설정하고 WAN에 연결하는 것도 많은 비용이 들어갑니다.
• 🟢 잼스택 공급자는 바로 동작하는 웹사이트를 거의 즉시 설정할 수 있도록 도와주고 서버 측 리다이렉션 같은 기능도 쉽게 구성할 수 있습니다. 대부분 공급자가 거의 초과하지 않을 정도의 빌드 시간 할당량을 지원하는 관대한 무료 플랜을 제공합니다. 하지만 궁극적으로는 제한적입니다. 한도에 도달하면 비용을 지불해야 합니다. 자세한 내용은 공급자의 가격 목록을 확인하세요.
• 🟡 깃헙 페이지 배포 흐름은 설정하기가 지겨울 수 있습니다. (깃헙 페이지 배포하기 설명이 얼마나 긴지 확인해보면 알 수 있다!) 하지만 이 서비스(빌드와 배포를 포함해)는 공개 저장소인 경우 항상 무료이며 작업에 필요한 자세한 지침을 제공해줍니다.

• 🟢 자체 호스팅을 사용하면 전체 서버 구성에 접근할 수 있습니다. 요청 URL을 기반으로 다른 콘텐츠를 제공하도록 가상 호스트를 구성할 수 있습니다. 복잡한 서버 측 리다이렉트도 처리할 수 있습니다. 사이트 일부를 인증을 통해 접근하도록 허용할 수도 있습니다. 서버 측 기능이 많이 필요한 경우 웹사이트 자체 호스팅을 추천합니다.
• 🟡 잼스택은 일반적으로 일부 서버 측 구성을 지원합니다. 예를 들어 URL 형식(트레일링 슬래시), 서버 측 리다이렉트 등을 사용할 수 있습니다.
• 🔴 깃헙 페이지는 HTTPS를 적용하고 CNAME을 설정하는 것 외에 추가적인 서버 측 구성은 지원하지 않습니다.

• 🟡 자체 호스팅 서비스는 Netlify와 같은 결과물을 얻을 수 있지만 훨씬 더 많은 작업이 필요합니다. 일반적으로 배포를 관리하는 인력이 필요하며 워크플로우는 다른 두 가지 옵션과 달리 깃 기반이 아닙니다.
• 🟢 Netlify와 Vercel은 모두 풀 리퀘스트에 대한 배포 미리보기를 지원해서 팀이 제품을 병합하기 전에 작업을 검토하는데 유용합니다. 배포에 접근할 수 있는 다른 구성원을 팀으로 관리할 수 있습니다.
• 🟡 깃헙 페이지는 배포 미리보기를 쉽게 설정할 수 있도록 허용하지 않습니다. 하나의 저장소는 하나의 사이트 배포에만 연결할 수 있습니다. 하지만 사이트 배포에 대한 쓰기 접근 권한을 가진 사용자를 관리할 수 있습니다.

모든 것을 만족하는 해결책은 없습니다. 선택을 하기 전에 어떤 것이 필요한지 어떤 자원을 가지고 있는지 확인하고 결정해야 합니다.

웹 서버를 구축하고 직접 호스팅하기​

도큐사우루스에서

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

• npm
• Yarn

npm run serve -- --build --port 80 --host 0.0.0.0

yarn run serve -- --build --port 80 --host 0.0.0.0

warning

직접 호스팅하는 것은 정적 호스팅 서비스 제공 업체나 CDN과 비교해서 최선의 선택은 아닙니다.

warning

다음 섹션에서는 몇 가지 대중적인 호스팅 공급자에서 도큐사우루스 사이트를 가장 효율적으로 배포하기 위한 구성 방법을 소개합니다. 일부 콘텐츠는 외부 기고자가 작성했습니다. 도큐사우루스는 어떤 서비스와도 직접 관련은 없습니다. 문서가 최신 상태가 아닐 수 있습니다. 최근 변경된 API 내용이 우리쪽에 반영되지 않을 수 있습니다. 오래된 콘텐츠를 발견했다면 언제든지 PR을 올려주세요.

최신 정보를 반영하지 못하는 문제 때문에 새로운 호스팅 공급자 구성을 추가하는 PR 접수를 중단했습니다. 하지만 별도 사이트(예를 들어 블로그 또는 호스팅 공급자 웹사이트)에 글을 게시하고 해당 콘텐츠에 대한 링크를 포함하도록 요청할 수는 있습니다.

네트리파이(Netlify)를 사용해 배포하기​

여러분의 도큐사우루스 2 사이트를 네트리파이(Netlify)에 배포하려면 먼저 아래와 같은 설정이 필요합니다.

docusaurus.config.js

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

그리고나서 여러분의 사이트를 네트리파이에 만듭니다.

사이트 설정을 위해 다음과 같은 빌드 명령과 디렉터리를 지정해주세요.

• 빌드 명령:

  import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
  
  export default function Home() {
    const {
      siteConfig: {customFields},
    } = useDocusaurusContext();
    return <div>Contact us through {customFields.teamEmail}!</div>;
  }
  

  3
• 배포 디렉터리:

  yarn run serve
  

  3

사전에 빌드 옵션을 설정하지 않았더라도 사이트를 만든 이후에 "Site settings" -> "Build & deploy" 메뉴에서 설정할 수 있습니다.

위에 설명한 옵션으로 적절하게 설정했다면 여러분의 사이트를 배포할 수 있습니다. 그리고 기본적으로

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

주의

일부 도큐사우루스 사이트는 아래와 같이

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

npm run serve -- --build --port 80 --host 0.0.0.0

website/netlify.toml

yarn run build

warning

기본적으로 네트리파이는 트레일링 슬래시를 도큐사우루스 URL에 추가합니다.

URL 소문자 변환, 원하지 않는 리다이렉트, 404 에러를 방지하기 위해 네트리파이에서

npm run serve -- --build --port 80 --host 0.0.0.0

정말 주의하세요:

npm run serve -- --build --port 80 --host 0.0.0.0

npm run serve -- --build --port 80 --host 0.0.0.0

네트리파이에서

npm run serve -- --build --port 80 --host 0.0.0.0

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

좀 더 자세한 정보는 slorber/trailing-slash-guide를 참고하세요.

베르셀(Vercel)을 사용해 배포하기​

도큐사우루스 프로젝트를 베르셀(Vercel)에 배포하면 성능과 사용 편의성 측면에서 몇 가지 이점이 제공됩니다.

베르셀 깃 통합 기능을 사용해 도큐사우루스 프로젝트를 배포하기 위해서는 깃 저장소에 제대로 업로드되었는지 확인합니다.

베르셀의 가져오기 기능을 이용해 프로젝트를 가져옵니다. 가져오기 시 미리 설정된 관련 옵션을 확인할 수 있습니다. 모든 옵션은 변경할 수 있으며 목록은 베르셀 가이드 문서에서 확인할 수 있습니다.

프로젝트를 가져온 후 브랜치로 보내지는 모든 작업에 대해 미리보기 배포가 만들어집니다. 그리고 제품 브랜치(보통 "main" 또는 "master")에 변경이 생기면 제품 배포가 진행됩니다.

깃허브 페이지(GitHub Pages)를 사용해 배포하기​

도큐사우루스는 모든 깃허브 저장소와 함께 무료로 사용할 수 있는 깃허브 페이지에 배포하는 쉬운 방법을 제공합니다.

개요​

일반적으로 배포 프로세스와 관련된 두 개의 저장소(최소한 두 개 브랜치)가 있습니다. 소스 파일을 포함하고 있는 브랜치와 깃허브 페이지에 제공될 빌드 결과물이 포함된 브랜치입니다. 이 글에서는 각각 소스와 배포라고 하겠습니다.

각각의 깃허브 저장소는 깃허브 페이지 서비스와 연결됩니다. 배포 저장소가

npm run serve -- --build --port 80 --host 0.0.0.0

npm run serve -- --build --port 80 --host 0.0.0.0

npm run serve -- --build --port 80 --host 0.0.0.0

npm run serve -- --build --port 80 --host 0.0.0.0

yarn run serve -- --build --port 80 --host 0.0.0.0

정보

깃허브 페이지에 여러분이 가지고 있는 도메인을 연결하기 원한다면

yarn run serve -- --build --port 80 --host 0.0.0.0

yarn run serve -- --build --port 80 --host 0.0.0.0

yarn run serve -- --build --port 80 --host 0.0.0.0

yarn run serve

yarn run serve -- --build --port 80 --host 0.0.0.0

yarn run serve -- --build --port 80 --host 0.0.0.0

yarn run serve

좀 더 자세한 내용은 깃허브 페이지 가이드 문서를 참고하세요.

깃허브 페이지는 기본 브랜치(일반적으로

yarn run serve -- --build --port 80 --host 0.0.0.0

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

하나의 명령으로 소스 브랜치에서 배포 브랜치로 사이트를 배포할 수 있게

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

yarn run serve5 파일 설정하기​

먼저

yarn run serve

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

이런 필드에 대응하는 환경 변수 중에 더 높은 우선 순위를 가지고 있는 경우도 있습니다. 예를 들면

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

주의

깃헙 페이지는 도큐사우루스 URL에 트레일링 슬래시를 기본적으로 추가합니다.

// dotenv를 사용하고 있다면 (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
  title: '...',
  url: process.env.URL, // 환경 변수를 사용해 사이트 세부 사항을 제어할 수 있습니다
  customFields: {
    // 여기에 사용자 지정 환경 설정을 추가하세요
    teamEmail: process.env.EMAIL,
  },
};

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

예:

docusaurus.config.js

yarn run build

warning

기본적으로 깃허브 페이지는 지킬을 통해 게시된 파일을 실행합니다. 지킬은

yarn run build

yarn run serve -- --build --port 80 --host 0.0.0.0

yarn run build

환경 설정​

yarn run build

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

yarn run build

yarn run build

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

yarn run build

yarn run build

yarn run build

yarn run build

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

yarn run serve -- --build --port 80 --host 0.0.0.0

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

깃허브 엔터프라이즈를 사용하는 경우에도 깃허브와 다르지 않습니다. 환경 변수에 깃허브 엔터프라이즈에서 사용하는 그룹 계정을 설정해주기만 하면 됩니다.

yarn run build

yarn run build

배포​

이제 아래 명령을 사용해 여러분의 사이트를 깃허브 페이지로 배포합니다.

• Bash
• Windows
• PowerShell

yarn run build

yarn run build

yarn run build

주의

2021년 8월부터 깃허브에서는 암호 대신 개인 액세스 토큰을 사용하기 위해 모두에게 명령줄 로그인을 요구합니다. 깃허브에서 암호를 묻는 메시지가 표시되면 PAT를 대신 입력하세요. 좀 더 자세한 내용은 깃허브 문서를 참고하세요.

그렇지 않으면 SSH (

yarn run build

깃허브 액션(GitHub Actions)을 사용해 자동으로 배포하기​

깃허브 액션은 여러분의 저장소에서 소프트웨어 배포를 자동으로 원하는 형태로 실행할 수 있도록 지원합니다.

예제 워크플로우에서는 여러분의 웹사이트 소스는 저장소

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

우리의 목표는 다음과 같습니다.

1. import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
   
   export default function Home() {
     const {
       siteConfig: {customFields},
     } = useDocusaurusContext();
     return <div>Contact us through {customFields.teamEmail}!</div>;
   }
   

   5에 대한 새로운 풀 리퀘스트가 올라오면 실제 배포는 진행하지 않고 빌드만 성공하게 합니다. 작업 이름은

   yarn run build
   

   24라고 붙입니다.
2. 풀 리퀘스트가

   import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
   
   export default function Home() {
     const {
       siteConfig: {customFields},
     } = useDocusaurusContext();
     return <div>Contact us through {customFields.teamEmail}!</div>;
   }
   

   5 브랜치에 병합되거나 누군가 직접

   import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
   
   export default function Home() {
     const {
       siteConfig: {customFields},
     } = useDocusaurusContext();
     return <div>Contact us through {customFields.teamEmail}!</div>;
   }
   

   5 브랜치에 푸시하면 빌드가 되면서

   module.exports = {
     url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
     baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
     // ...
   };
   

   0 브랜치에 배포됩니다. 그리고 나서 새로운 빌드 결과물은 깃허브 페이지 사이트에 제공됩니다. 작업 이름은

   yarn run build
   

   28라고 붙입니다.

다음은 깃허브 액션을 사용해 문서를 배포하는 두 가지 접근 방식입니다. 배포 브랜치(

module.exports = {
  url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
  baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
  // ...
};

• 소스 저장소와 배포 저장소는 같은 저장소입니다.
• 배포 저장소는 소스 저장소와 다른 원격 저장소입니다.

• Same
• Remote

같은 워크플로 파일에 두 가지 작업을 모두 정의할 수 있지만 원래의

yarn run build

우리는 널리 사용되는 서드파티 배포 액션인 peaceiris/actions-gh-pages을 사용할 겁니다.

다음 두 개의 워크플로 파일을 추가합니다.

설정에 대한 파라미터 조정

이 파일 설정은 Yarn을 사용하고 있다고 전제합니다. npm을 사용하는 경우에는

yarn run build

yarn run build

yarn run build

yarn run build

yarn run build

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

도큐사우루스 프로젝트가 저장소 루트에 없다면 기본 작업 디렉터리를 구성해야 할 수도 있습니다. 그에 따라 경로를 조정하세요.

.github/workflows/deploy.yml

yarn run build

.github/workflows/test-deploy.yml

yarn run build

교차 저장소 배포는 권한 확인을 통해 다른 저장소에 푸시해야 하므로 설정하기가 더 어렵습니다. 예제에서는 SSH 인증을 사용합니다.

1. 새로운 SSH 키를 만듭니다. SSH 키는 CI에서 사용되므로 암호를 입력하지 마세요.
2. 기본적으로 여러분의 공개키는

   yarn run build
   

   37에 만들어지거나 이전 단계에서 깃허브 배포 키로 추가한 키 이름을 사용할 수 있습니다.

3. yarn run build
   

   38 명령으로 키를 클립보드에 복사하고 배포 저장소에 배포키로 붙여넣습니다. 명령행 도구를 사용하기 곤란하다면 파일 콘텐츠를 복사할 수 있습니다. 배포키를 저장하기 전에

   yarn run build
   

   39 박스에 체크해주어야 합니다.
4. 도큐사우루스에서 배포를 자동으로 처리할 수 있도록 허용하려면 깃허브 보안 설정에서 개인키를 설정해주어야 합니다.

5. yarn run build
   

   40 명령을 사용해 개인키를 복사하고 깃허브 보안 설정에서

   yarn run build
   

   41 항목에 붙여넣습니다. 명령행 도구를 사용하기 곤란하다면 파일 콘텐츠를 복사할 수 있습니다. 보안 설정을 저장합니다.

6. yarn run build
   

   42 경로에 문서를 위한 워크플로우 파일을 만듭니다. 아래

   yarn run build
   

   43 파일 예시를 참고하세요.
7. 기본적으로 다음 항목이 필요합니다. 비공개 SSH 키가 깃허브 보안 항목으로 설정된 깃허브 워크플로우를 가진 소스 저장소와 공개 SSH키가 깃허브 배포 키 항목으로 설정된 배포 저장소.

warning

아래 예에서

yarn run build

yarn run build

이 파일 설정은 Yarn을 사용하고 있다고 전제합니다. npm을 사용하는 경우에는

yarn run build

yarn run build

yarn run build

yarn run build

yarn run build

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

.github/workflows/deploy.yml

yarn run build

main으로 푸시한 후 원하는 위치에 사이트가 표시되지 않으면(예를 들어 "There isn't a GitHub Pages site here"라고 표시되거나 저장소의 README.md 파일이 표시됨) 다음 항목을 체크합니다.

• 깃허브 페이지가 새 파일을 처리하는데 시간이 걸릴 수 있으므로 작동하지 않는다고 판단하기 전에 약 3분 정도 기다렸다가 새로고침해보세요.
• 저장소의 랜딩 페이지에서 마지막 커밋 제목 옆에 CI가 통과되었음을 나타내는 작은 녹색 체크 표시가 있어야 합니다. 엑스 표시가 보인다면 빌드 또는 배포가 실패했음을 의미하며 자세한 디버깅 정보는 로그에서 확인해야 합니다.
• 체크 표시를 클릭해 "Deploy to GitHub Pages" 워크플로우가 표시되는지 확인합니다. "pages build and deployment / deploy"와 같은 제목은 깃허브 기본 워크플로우이며 사용자가 지정한 배포 워크플로우가 전혀 트리거되지 않았음을 나타냅니다. YAML 파일이

  yarn run build
  

  52 폴더 아래에 있고 트리거 조건이 올바르게 설정되어 있는지 확인합니다(예를 들어 기본 브랜치가 "main"이 아닌 "master"인 경우

  yarn run build
  

  53 속성을 변경해야 합니다).
• 우리는 배포 브랜치로

  module.exports = {
    url: 'https://docusaurus-2.netlify.app', // URL에 트레일링 슬래시를 붙이지 않습니다.
    baseUrl: '/', // 저장소에서 사이트 상대 경로 Base 디렉터리
    // ...
  };
  

  0를 사용하고 있습니다. 저장소 설정 Settings > Pages에서 "Source"(일반적으로 이야기하는 "source"가 아니라 배포 파일 소스입니다) 항목이 "gh-pages" + "/ (루트)"로 설정되어 있는지 확인합니다.
• 사용자 지정 도메인을 사용하는 경우 DNS 레코드가 깃허브 페이지 서버의 IP를 가리키고 있는지 확인하세요.

트래비스 CI(Travis CI)를 사용해 자동으로 배포하기​

지속적인 통합(CI) 서비스는 저장소에 새로운 커밋이 발생할때마다 반복적으로 발생하는 작업을 처리하기 위해 사용합니다. 지속적인 통합 환경에서는 단위 테스트, 통합 테스트, 자동 빌드, npm 배포, 변경된 내용을 웹 사이트에 배포하기 같은 복합적인 작업을 처리할 수 있습니다. 자동으로 웹 사이트 업데이트를 처리하기 위해서는 웹 사이트가 변경됐을때

yarn run build

1. https://github.com/settings/tokens에 접속해서 새로운 개인용 접근 토큰을 만듭니다. 토큰을 만들 때 필요한 권한을 가질 수 있도록

   yarn run build
   

   56 범위를 체크해주어야 합니다.
2. 깃허브 사용자 계정을 사용해 활성화하고자 하는 저장소에 트래비스 CI 앱을 추가합니다.
3. 트래비스 CI 대시보드를 실행합니다. 대시보드 URL은

   yarn run build
   

   57 형식입니다. 대시보드에서

   yarn run build
   

   58 항목을 선택합니다.
4. 새로 만든 토큰을 사용해

   yarn run build
   

   59라는 이름으로 환경 변수를 만들고

   yarn run build
   

   60(이메일 주소),

   yarn run build
   

   61(깃허브 사용자 이름) 환경 변수도 만들어줍니다.
5. 아래와 같은 내용으로 저장소 루트에

   yarn run build
   

   62 파일을 만들어줍니다.

.travis.yml

yarn run build

이제

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function Home() {
  const {
    siteConfig: {customFields},
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

yarn run build

Buddy를 사용해 자동으로 배포하기​

Buddy는 깃헙 페이지를 포함한 다양한 환경에 여러분의 사이트 배포를 손쉽게 자동화할 수 있는 CI/CD 도구입니다.

아래 단계에 따라 프로젝트의 선택한 브랜치에 대한 변경 사항을 푸시할 때마다 웹 사이트의 새로운 버전을 자동으로 배포하는 파이브 라인을 만듭니다.

1. https://github.com/settings/tokens에 접속해서 새로운 개인용 접근 토큰을 만듭니다. 토큰을 만들 때 필요한 권한을 가질 수 있도록

   yarn run build
   

   56 범위를 체크해주어야 합니다.
2. Buddy 계정에 로그인하고 새 프로젝트를 만듭니다.
3. 깃헙을 깃 호스팅 공급자로 선택하고 웹 사이트 코드가 있는 저장소를 선택합니다.
4. 왼쪽 탐색 패널을 사용해

   yarn run build
   

   66 보기로 전환합니다.
5. 새 파이프 라인을 만듭니다. 이름을 정의하고 트리거 모드를

   yarn run build
   

   67로 설정한 다음 파이프 라인 실행을 트리거하는 브랜치를 선택합니다.

6. yarn run build
   

   68 액션을 추가합니다.
7. 작업 터미널에 아래 명령을 추가합니다.

yarn run build

간단하게 파이프 라인을 만든 후 선택한 브랜치에 푸시된 각 새로운 커밋은

yarn run build

애저 파이프라인(Azure Pipeline) 사용하기​

1. 계정이 없다면 먼저 애저 파이프라인에서 계정을 만듭니다.
2. 그룹 계정 만들기 그룹 계정(organization)으로 프로젝트를 만듭니다. 그리고 깃허브 저장소를 연결합니다.
3. https://github.com/settings/tokens에 접속해서 새로운 개인용 접근 토큰을 만들고

   yarn run build
   

   56 범위를 체크해줍니다.
4. 프로젝트 페이지(

   yarn run build
   

   71 형식입니다)에서 다음 내용을 참고해서 새로운 파이프라인을 만듭니다. 'edit' 버튼을 클릭해서 새로 만든 토큰을 사용해

   yarn run build
   

   59라는 이름으로 환경 변수를 만들고

   yarn run build
   

   60(이메일 주소),

   yarn run build
   

   61(깃허브 사용자 이름) 환경 변수도 만들어줍니다. 환경 변수는 secret로 설정되어야 합니다. 다른 방법으로는 아래와 같은 내용으로

   yarn run build
   

   75 파일을 저장소 루트에 만들어줍니다.

azure-pipelines.yml

npm run serve

드론 CI(Drone CI) 사용하기​

1. 프로젝트에서 배포키로 사용할 SSH 키를 새로 만듭니다.
2. 다른 SSH 키를 덮어쓰지 않도록 주의해서 개인키와 공개키 이름을 설정합니다.

3. yarn run build
   

   76에 접속해서 배포키를 앞에서 만든 공개키 값으로 설정합니다.
4. 드론 CI 대시보드에 로그인합니다. 연결할 URL은

   yarn run build
   

   77 형식입니다.
5. 저장소를 선택하고 'activate repository' 버튼을 클릭합니다. 그리고 이름은

   yarn run build
   

   78, 값은 앞에서 만든 개인키로 지정한 secret를 추가합니다.
6. 아래와 같은 내용으로 저장소 루트에

   yarn run build
   

   79 파일을 만들어줍니다.

.drone.yml

npm run serve

이제 깃허브에 새로운 태그가 들어오면 여러분의 웹 사이트를 배포하기 위한 드론 CI 동작이 자동으로 시작됩니다.

Koyeb를 사용해 배포하기​

Koyeb는 어디에나 앱을 배포할 수 있는 개발자 친화적인 서버리스 플랫폼입니다. 플랫폼을 사용하면 깃 기반 배포, 오토스케일링, 글로벌 엣지 네트워크, 기본 제공하는 서비스 메시와 서비스 디스커버리를 통해 도커 컨테이너, 웹 앱, API를 원활하게 실행할 수 있습니다. 기본적인 사용법은 Koyeb's Docusaurus deployment guide를 참고하세요.

렌더(Render)를 사용해 배포하기​

렌더(Render)는 무료 사이트 호스팅 서비스를 제공합니다. SSL, 커스텀 도메인, 글로벌 CDN, 깃 저장소와 연동한 지속적인 자동 배포를 지원합니다. 렌더에서 도큐사우루스 배포하기 가이드를 참고하면 빠르게 시작해볼 수 있습니다.

Qovery를 사용해 배포하기​

Qovery는 여러분의 AWS, GCP, Azure, Digital Ocean, Scaleway 같은 여러 계정에서 동작하고 있는 정적 사이트, 백엔드 API, 데이터베이스, 크론잡, 기타 앱을 한 곳에서 관리할 수 있는 완전 관리형 클라우드 플랫폼입니다.

1. Qovery 계정을 만듭니다. 계정이 없는 경우 Qovery 대시보드에서 계정을 만듭니다.
2. 프로젝트를 만듭니다.
   • Create project 링크를 클릭하고 프로젝트 이름을 설정합니다.
   • Next 버튼을 클릭합니다.
3. 새 환경을 생성합니다.
   • Create environment 링크를 클릭하고 이름을 설정합니다(예: staging, production).
4. 애플리케이션을 추가합니다.
   • Create an application 링크를 클릭하고 이름을 설정한 후 도큐사우루스 앱이 위치한 GitHub 또는 GitLab 저장소를 선택합니다.
   • 메인 브랜치 이름과 루트 애플리케이션 경로를 설정합니다.
   • Create 버튼을 클릭합니다. 애플리케이션이 만들어진 후에는
   • 생성한 애플리케이션 Settings을 확인합니다.
   • 포트를 선택합니다.
   • 도큐사우루스 애플리케이션에서 사용하는 포트를 추가합니다.
5. 이제 전체 배포를 위해 해야 할 일은 생성한 애플리케이션으로 가서 Deploy 버튼을 클릭하는 것입니다.

이게 다예요! 상태를 확인하면서 앱이 배포될 때까지 기다립니다. 브라우저에서 애플리케이션을 열려면 애플리케이션 개요에서 Action과 Open을 클릭합니다.

Hostman을 사용해 배포하기​

Hostman은 정적 웹 사이트에 대한 무료 호스팅을 제공합니다. Hostman은 모든 것을 자동화로 지원합니다. 여러분은 저장소를 연결하고 간단한 단계를 따라오기만 하면 됩니다.

1. 서비스를 만듭니다.

   도큐사우루스 정적 웹 사이트를 배포하기 위해 Dashboard 상단 왼쪽 구석에 있는 Create 버튼을 클릭하고 Front-end app or static website 항목을 선택합니다.

2. 배포할 프로젝트를 선택합니다.

   깃허브, 깃랩, 비트버킷 계정으로 Hostman에 로그인했다면 개인 저장소를 포함해 여러분의 프로젝트가 있는 모든 저장소를 확인할 수 있습니다.

   배포할 프로젝트를 선택합니다. 프로젝트 파일이 있는 디렉터리를 포함해야 합니다(보통

   import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
   
   export default function Home() {
     const {
       siteConfig: {customFields},
     } = useDocusaurusContext();
     return <div>Contact us through {customFields.teamEmail}!</div>;
   }
   

   6 디렉터리입니다).

   다른 저장소에 접근하려면 Connect another repository 버튼을 클릭하세요.

   로그인 시 깃 계정 인증을 거치지 않았다면 필요한 계정에 접근한 후 프로젝트를 선택할 수 있습니다.

3. 빌드 옵션을 설정합니다.

   다음은 Website customization 창이 나타납니다. Framework 목록에서 Static website 옵션을 선택하세요.

   Directory with app 항목에 설정한 디렉터리가 빌드 후 프로젝트 파일이 포함되는 위치입니다. 두 번째 단계에서 콘텐츠 저장소로 website(또는

   yarn run build
   

   81) 디렉터리를 선택했다면 항목값을 채우지 않아도 됩니다.

   도큐사우루스의 기본 빌드 명령을 실행합니다.

   • npm
   • Yarn

   npm run build
   

   yarn run build
   

   필요한 경우 빌드 명령을 변경할 수 있습니다.

   yarn run build
   

   82로 구분해서 여러 개의 명령을 추가할 수 있습니다.

4. 배포.

   Deploy를 클릭하여 빌드 프로세스를 시작합니다.

   프로세스가 시작되면 배포 로그를 확인할 수 있습니다. 코드에 문제가 있다면 로그에서 경고나 에러 메시지를 확인하고 문제의 원인을 살펴볼 수 있습니다. 일반적으로 로그에는 필요한 모든 디버깅 데이터가 포함됩니다.

   배포가 완료되면 이메일로 알림을 받을 수 있으며 로그에서도 확인할 수 있습니다. 완료되었습니다 ! 여러분의 프로젝트를 공개할 준비가 끝났습니다.

서지(Surge)를 사용해 배포하기​

서지(Surge)는 웹 호스팅 플랫폼입니다. 명령행 도구를 사용해 간단하게 도큐사우루스 프로젝트를 배포할 수 있습니다. 여러분의 프로젝트를 서지에 배포하는 것은 쉽고 무료(커스텀 도메인과 SSL을 포함해)입니다.

다음 단계를 따라가면 서지를 사용한 앱 배포를 쉽게 할 수 있습니다.

1. 먼저 npm 명령으로 서지를 설치합니다.
   • npm
   • Yarn

   npm run serve
   

   4

   npm run serve
   

   5

2. 프로젝트 루트 디렉터리에서 사이트의 파일을 빌드하려면 아래 명령을 실행합니다.
   • npm
   • Yarn

   npm run build
   

   yarn run build
   

3. 다음 명령어를 프로젝트 루트 디렉토리에서 실행하세요:

   npm run serve
   

   8

서지를 처음 사용한다면 명령행에 계정을 만들라는 메시지가 표시됩니다(처음 한 번만 표시됩니다)

사이트가

yarn run serve

yarn run build

가지고 있는 도메인 사용하기​

가지고 있는 도메인이 있다면 서지를 사용해 배포 시 명령에 도메인을 추가할 수 있습니다.

npm run serve

여러분의 사이트는 선택에 따라 무료로 제공되는

yarn run build

yarn run build

CNAME 파일 설정하기​

다음 명령을 사용해 도메인을 CNAME 파일에 설정할 수 있습니다.

yarn run serve

yarn run build

퀀트CDN(QuantCDN)을 사용해 배포하기​

1. 퀀트(Quant) CLI를 설치합니다.
2. 퀀트CDN 계정을 생성합니다.

3. yarn run build
   

   88 명령으로 프로젝트를 초기화하고 여러분의 자격 정보를 설정합니다.

   yarn run serve
   

   1

4. 사이트를 배포합니다.

   yarn run serve
   

   2

퀀트CDN을 사용한 배포 예제와 사용 사례는 가이드 문서와 블로그를 참고하세요.

Layer0을 사용해 배포하기​

Layer0는 여러분의 헤드리스 프론트엔드를 개발, 배포, 검토, 실험, 모니터링, 실행할 수 있는 올인원 플랫폼입니다. EdgeJS(자바스크립트 기반 콘텐츠 전송 네트워크), 예측 프리페칭, 성능 모니터링을 통한 규모 있는 동적 웹사이트와 뛰어난 수준의 성능에 중점을 둡니다. Layer0은 무료 옵션을 제공합니다. Layer0에서 도큐사우루스 배포하기 가이드를 참고하면 빠르게 시작해볼 수 있습니다.

Cloudflare Pages를 사용해 배포하기​

Cloudflare Pages는 프론트엔드 개발자가 웹사이트를 협업을 통해 작업하고 배포할 수 있는 잼스택 플랫폼입니다. 가이드 문서를 따라 몇 분 안에 시작할 수 있습니다.

애저 Static Web Apps를 사용해 배포하기​

애저 Static Web Apps은 코드 저장소로부터 풀스택 웹 앱을 가져와 애저에서 자동으로 빌드하고 배포해 CI/CD에 대한 개발자 환경을 단순화하는 서비스입니다. Static Web Apps는 웹 애플리케이션의 정적 애셋을 동적(API) 엔드포인트와 분리합니다. 정적 애셋은 전 세계에 분산도니 콘텐츠 서버에서 제공되므로 클라이언트와 가까이 있는 서버를 사용해 파일을 더 빠르게 가져올 수 있습니다. 동적 API는 보다 비용 효율적이고 필요에 따라 확장되는 이벤트, 기능 기반 접근 방식을 사용해 서버리스 아키텍처로 확장됩니다. 단계별 가이드를 따락 몇 분 안에 시작할 수 있습니다.