메인 컨텐츠로 이동
Version: 2.0.0-beta.21 🚧

배포

웹 사이트에 게시할 파일을 빌드하기 위해서 아래 명령을 실행합니다.

npm run build

명령을 실행하면 build 디렉터리 아래에 파일이 생성됩니다.

note

도큐사우루스는 여러분의 사이트를 빌드하고 정적 파일을 build 디렉터리 아래에 생성하는 것까지만 책임집니다.

만들어진 정적 파일을 어떻게 호스팅할 것인지는 여러분에게 달려 있습니다.

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

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

설정

The following parameters are required in docusaurus.config.js to optimize routing and serve files from the correct location:

옵션명설명
urlURL for your site. For a site deployed at https://my-org.com/my-project/, url is https://my-org.com/.
baseUrlBase URL for your project, with a trailing slash. For a site deployed at https://my-org.com/my-project/, baseUrl is /my-project/.

로컬에서 빌드 테스트하기

It is important to test your build locally before deploying it for production. Docusaurus provides a docusaurus serve command for that:

npm run serve

By default, this will load your site at http://localhost:3000/.

트레일링 슬래시 설정

Docusaurus has a trailingSlash config, to allow customizing URLs/links and emitted filename patterns.

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

tip

호스팅 서비스에서 지원하는 동작 방식과 적절한 trailingSlash 설정을 위해 slorber/trailing-slash-guide 문서를 참조하세요.

Using environment variables

Putting potentially sensitive information in the environment is common practice. However, in a typical Docusaurus website, the docusaurus.config.js file is the only interface to the Node.js environment (see our architecture overview), while everything else—MDX pages, React components... are client side and do not have direct access to the process global. In this case, you can consider using customFields to pass environment variables to the client side.

docusaurus.config.js
// If you are using dotenv (https://www.npmjs.com/package/dotenv)
require('dotenv').config();

module.exports = {
title: '...',
url: process.env.URL, // You can use environment variables to control site specifics as well
customFields: {
// Put your custom environment here
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>;
}

호스팅 공급자 선택하기

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

  • Self hosting with an HTTP server like Apache2 or Nginx;
  • Jamstack providers, e.g. Netlify and Vercel. We will use them as references, but the same reasoning can apply to other providers.
  • GitHub Pages. (By definition, it is also Jamstack, but we compare it separately.)

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

How much resource (person-hours, money) am I willing to invest in this?
  • 🔴 Self-hosting is the hardest to set up—you would usually need an experienced person to manage this. Cloud services are almost never free, and setting up an on-site server and connecting it to the WAN can be even more costly.
  • 🟢 Jamstack providers can help you set up a working website in almost no time and offers features like server-side redirects that are easily configurable. Many providers offer generous build time quotas even for free plans that you would almost never exceed. However, it's still ultimately limited—you would need to pay once you hit the limit. Check the pricing page of your provider for details.
  • 🟡 The GitHub Pages deployment workflow can be tedious to set up. (Evidence: see the length of Deploying to GitHub Pages!) However, this service (including build and deployment) is always free for public repositories, and we have detailed instructions to help you make it work.
How much server-side configuration would I need?
  • 🟢 With self-hosting, you have access to the entire server's configuration. You can configure the virtual host to serve different content based on the request URL; you can do complicated server-side redirects; you can put part of the site behind authentication... If you need a lot of server-side features, self-host your website.
  • 🟡 Jamstack usually offers some server-side configurations, e.g. URLs formatting (trailing slashes), server-side redirects...
  • 🔴 GitHub Pages doesn't expose server-side configurations besides enforcing HTTPS and setting CNAME.
Do I have needs to cooperate?
  • 🟡 Self-hosted services can achieve the same effect as Netlify, but with much more heavy-lifting. Usually, you would have a specific person who looks after the deployment, and the workflow won't be very git-based as opposed to the other two options.
  • 🟢 Netlify and Vercel have deploy previews for every pull request, which is useful for a team to review work before merging to production. You can also manage a team with different member access to the deployment.
  • 🟡 GitHub Pages cannot do deploy previews in a non-convoluted way. One repo can only be associated with one site deployment. On the other hand, you can control who has write access to the site's deployment.

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

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

도큐사우루스에서 docusaurus serve 명령을 사용해 직접 호스팅할 준비를 할 수 있습니다. --port 옵션에서 포트를 변경하고 --host 옵션에서 호스트를 변경합니다.

npm 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 디렉터리
// ...
};

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

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

  • 빌드 명령: npm run build
  • 빌드 디렉터리: build

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

위에 설명한 옵션으로 적절하게 설정했다면 여러분의 사이트를 배포할 수 있습니다. 그리고 기본적으로 main으로 설정된 배포 브랜치에 병합되면 자동으로 재배포가 진행됩니다.

caution

일부 도큐사우루스 사이트는 아래와 같이 website 폴더 바깥쪽에 docs 폴더를 가집니다(대부분 도큐사우루스 v1 사이트입니다)

repo           # git root
├── docs # md files
└── website # docusaurus root

website 폴더를 네트리파이 기본 디렉터리로 사용하는 것으로 설정하면 네트리파이는 docs 폴더를 업데이트할 때 빌드 작업을 실행하지 않습니다. 그리고 아래와 같이 사용자 지정 ignore 명령을 설정해주어야 합니다.

website/netlify.toml
[build]
ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../docs/"
warning

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

URL 소문자 변환, 원하지 않는 리다이렉트, 404 에러를 방지하기 위해 네트리파이에서 Post Processing > Asset Optimization > Pretty Urls 설정을 비활성화 체크해주는 것을 권장합니다.

정말 주의하세요: Disable asset optimization 전역 체크 기능은 잘 동작하지 않습니다. 해당 항목을 체크해도 Pretty URLs 설정이 비활성화되지는 않습니다. 각 항목을 개별적으로 체크해주세요.

네트리파이에서 Pretty Urls 설정을 활성화하고 싶다면 도큐사우루스에서 trailingSlash 설정을 그에 맞게 조정해주어야 합니다.

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

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

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

To deploy your Docusaurus project with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

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

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

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

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

개요

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

각각의 깃허브 저장소는 깃허브 페이지 서비스와 연결됩니다. 배포 저장소가 my-org/my-project (여기서 my-org는 조직 또는 사용자 이름입니다)인 경우 배포된 사이트는 https://my-org.github.io/my-project/가 됩니다. 특히 배포 저장소가 my-org/my-org.github.io (그룹 계정 깃허브 페이지 저장소인 경우 사이트는 https://my-org.github.io/가 됩니다.

info

깃허브 페이지에 여러분이 가지고 있는 도메인을 연결하기 원한다면 static 디렉터리 안에 CNAME 파일을 만들어줍니다. static 디렉터리 아래 있는 파일은 모두 배포 시 build 디렉터리 아래로 복사됩니다. 사용자 정의 도메인을 사용한다면 baseUrl: '/projectName/'에서 baseUrl: '/'로 돌아갈 수 있어야 하며 url을 여러분의 사용자 정의 도메인으로 설정해야 합니다.

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

깃허브 페이지는 기본 브랜치(일반적으로 master / main) 또는 gh-pages 브랜치 그리고 루트 폴더 또는 /docs 폴더에서 배포 대상 파일(docusaurus build에서 만든)을 가져옵니다. 저장소 Settings > Pages에서 필요한 항목을 설정할 수 있습니다. 이 브랜치를 "배포 브랜치"라고 합니다.

하나의 명령으로 소스 브랜치에서 배포 브랜치로 사이트를 배포할 수 있게 docusaurus deploy 명령인 clone, build, commit을 제공합니다.

docusaurus.config.js 파일 설정하기

먼저 docusaurus.config.js 파일에서 필요한 몇 가지 항목을 추가해주어야 합니다.

옵션명설명
organizationNameThe GitHub user or organization that owns the deployment repository.
projectNameThe name of the deployment repository.
deploymentBranchThe name of deployment branch. Defaults to 'gh-pages' for non-organization GitHub Pages repos (projectName not ending in .github.io). Otherwise, this needs to be explicit as a config field or environment variable.

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

caution

깃헙 페이지는 도큐사우루스 URL에 트레일링 슬래시를 기본적으로 추가합니다. trailingSlash 설정은 (true 또는 false, undefined는 제외) 값으로 설정하는 것을 권장합니다.

예:

docusaurus.config.js
module.exports = {
// ...
url: 'https://endiliey.github.io', // Your website URL
baseUrl: '/',
projectName: 'endiliey.github.io',
organizationName: 'endiliey',
trailingSlash: false,
// ...
};
warning

기본적으로 깃허브 페이지는 지킬을 통해 게시된 파일을 실행합니다. 지킬은 _로 시작하는 모든 파일을 삭제합니다. 때문에 static 디렉터리에 .nojekyll라는 이름을 가진 빈 파일을 추가해 지킬을 비활성화하는 것을 권장합니다.

환경 설정

옵션명설명
USE_SSH깃허브 저장소에 연결 시 기본 HTTPS 대신 SSH를 사용하려면 true로 설정합니다. If the source repo URL is an SSH URL (e.g. [email protected]:facebook/docusaurus.git), USE_SSH is inferred to be true.
GIT_USERThe username for a GitHub account that has push access to the deployment repo. 여러분이 소유자인 저장소라면 사용하고 있는 깃허브 사용자명을 설정합니다. Required if not using SSH, and ignored otherwise.
GIT_PASSPersonal access token of the git user (specified by GIT_USER), to facilitate non-interactive deployment (e.g. continuous deployment)
CURRENT_BRANCHThe source branch. Usually, the branch will be main or master, but it could be any branch except for gh-pages. If nothing is set for this variable, then the current branch from which docusaurus deploy is invoked will be used.

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

옵션명설명
GITHUB_HOST깃허브 엔터프라이즈 사이트에서 사용하는 도메인 이름을 설정합니다.
GITHUB_PORT깃허브 엔터프라이즈 사이트에서 사용하는 포트를 설정합니다.

배포

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

GIT_USER=<GITHUB_USERNAME> yarn deploy
caution

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

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

깃허브 액션은 여러분의 저장소에서 소프트웨어 배포를 자동으로 원하는 형태로 실행할 수 있도록 지원합니다. The workflow examples below assume your website source resides in the main branch of your repository (the source branch is main), and your publishing source is configured for the gh-pages branch (the deployment branch is gh-pages). 우리의 목표는 다음과 같습니다.

  1. When a new pull request is made to main, there's an action that ensures the site builds successfully, without actually deploying. This job will be called test-deploy.
  2. When a pull request is merged to the main branch or someone pushes to the main branch directly, it will be built and deployed to the gh-pages branch. After that, the new build output will be served on the GitHub Pages site. This job will be called deploy. 다음은 깃허브 액션을 사용해 문서를 배포하는 두 가지 접근 방식입니다. 배포 브랜치(gh-pages)의 위치에 따라 아래에서 관련 탭을 선택합니다.
  • Source repo and deployment repo are the same repository.
  • The deployment repo is a remote repository, different from the source.

While you can have both jobs defined in the same workflow file, the original deploy workflow will always be listed as skipped in the PR check suite status, which is not communicative of the actual status and provides no value to the review process. We therefore propose to manage them as separate workflows instead.

예제에서는 많은 이들이 사용하는 서드파티 배포 액션인 peaceiris/actions-gh-pages을 사용합니다.

GitHub action files

Add these two workflow files:

Tweak the parameters for your setup

These files assume you are using yarn. npm을 사용하고 있다면 cache: yarn, yarn install --frozen-lockfile, yarn buildcache: npm, npm ci, npm run build으로 적절히 변경합니다.

If your Docusaurus project is not at the root of your repo, you may need to configure a default working directory, and adjust the paths accordingly.

.github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
push:
branches:
- main
# Review gh actions docs if you want to further define triggers, paths, etc
# https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
deploy:
name: Deploy to GitHub Pages
runs-on: ubuntu-latest
steps:
- uses: actions/[email protected]
- uses: actions/setup-[email protected]
with:
node-version: 16.x
cache: yarn

- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Build website
run: yarn build

# Popular action to deploy to GitHub Pages:
# Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-[email protected]
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
# Build output to publish to the `gh-pages` branch:
publish_dir: ./build
# The following lines assign commit authorship to the official
# GH-Actions bot for deploys to `gh-pages` branch:
# https://github.com/actions/checkout/issues/13#issuecomment-724415212
# The GH actions bot is used by default if you didn't specify the two fields.
# 자신의 자격증명으로 교체할 수 있습니다.
user_name: github-actions[bot]
user_email: 41898282+github-actions[bot]@users.noreply.github.com
.github/workflows/test-deploy.yml
name: Test deployment

on:
pull_request:
branches:
- main
# Review gh actions docs if you want to further define triggers, paths, etc
# https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
test-deploy:
name: Test deployment
runs-on: ubuntu-latest
steps:
- uses: actions/[email protected]
- uses: actions/setup-[email protected]
with:
node-version: 16.x
cache: yarn

- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Test build website
run: yarn build

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

지속적인 통합(CI) 서비스는 저장소에 새로운 커밋이 발생할때마다 반복적으로 발생하는 작업을 처리하기 위해 사용합니다. These tasks can be any combination of running unit tests and integration tests, automating builds, publishing packages to npm, and deploying changes to your website. 자동으로 웹 사이트 업데이트를 처리하기 위해서는 웹 사이트가 변경됐을때 yarn deploy 스크립트를 호출하기만 하면 됩니다. 지속적인 통합 환경으로 많이 사용하고 있는 트래비스 CI에서 어떻게 도큐사우르스를 배포할 수 있는지 살펴보겠습니다.

  1. https://github.com/settings/tokens에 접속해서 새로운 개인용 접근 토큰을 만듭니다. 토큰을 만들 때 필요한 권한을 가질 수 있도록 repo 범위를 체크해주어야 합니다.
  2. 깃허브 사용자 계정을 사용해 활성화하고자 하는 저장소에 트래비스 CI 앱을 추가합니다.
  3. 트래비스 CI 대시보드를 실행합니다. The URL looks like https://travis-ci.com/USERNAME/REPO, and navigate to the More options > Setting > Environment Variables section of your repository.
  4. 새로 만든 토큰을 사용해 GH_TOKEN라는 이름으로 환경 변수를 만들고 GH_EMAIL(이메일 주소), GH_NAME(깃허브 사용자 이름) 환경 변수도 만들어줍니다.
  5. 아래와 같은 내용으로 저장소 루트에 .travis.yml 파일을 만들어줍니다.
.travis.yml
language: node_js
node_js:
- '14.15.0'
branches:
only:
- main
cache:
yarn: true
script:
- git config --global user.name "${GH_NAME}"
- git config --global user.email "${GH_EMAIL}"
- echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
- yarn install
- GIT_USER="${GH_NAME}" yarn deploy

이제 main 브랜치에 새로운 커밋이 발생하면 트래비스 CI는 테스트 스위트를 실행하고 모든 테스트가 통과되면 yarn deploy 스크립트가 실행되어 여러분의 웹사이트를 배포하게 됩니다.

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

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

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

  1. https://github.com/settings/tokens에 접속해서 새로운 개인용 접근 토큰을 만듭니다. 토큰을 만들 때 필요한 권한을 가질 수 있도록 repo 범위를 체크해주어야 합니다.
  2. Buddy 계정에 로그인하고 새 프로젝트를 만듭니다.
  3. 깃헙을 깃 호스팅 공급자로 선택하고 웹 사이트 코드가 있는 저장소를 선택합니다.
  4. 왼쪽 탐색 패널을 사용해 Pipelines 보기로 전환합니다.
  5. 새 파이프 라인을 만듭니다. 이름을 정의하고 트리거 모드를 On push로 설정한 다음 파이프 라인 실행을 트리거하는 브랜치를 선택합니다.
  6. Node.js 액션을 추가합니다.
  7. Add these commands in the action's terminal:
GIT_USER=<GH_PERSONAL_ACCESS_TOKEN>
git config --global user.email "<YOUR_GH_EMAIL>"
git config --global user.name "<YOUR_GH_USERNAME>"
yarn deploy

간단하게 파이프 라인을 만든 후 선택한 브랜치에 푸시된 각 새로운 커밋은 yarn deploy 명령을 사용해 웹 사이트를 깃헙 페이지에 배포합니다. 도큐사우루스에 맞춘 CI/CD 파이프 라인 설정에 대한 좀 더 자세한 내용은 가이드 문서를 참고하세요.

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

  1. 계정이 없다면 먼저 애저 파이프라인에서 계정을 만듭니다.
  2. 그룹 계정(organization)을 만들고 그룹 계정으로 프로젝트를 만듭니다. 그리고 깃허브 저장소를 연결합니다.
  3. https://github.com/settings/tokens에 접속해서 새로운 개인용 접근 토큰을 만들고 repo 범위를 체크해줍니다.
  4. 프로젝트 페이지(https://dev.azure.com/ORG_NAME/REPO_NAME/_build 형식입니다)에서 다음 내용을 참고해서 새로운 파이프라인을 만듭니다. 'edit' 버튼을 클릭해서 새로 만든 토큰을 사용해 GH_TOKEN라는 이름으로 환경 변수를 만들고 GH_EMAIL(이메일 주소), GH_NAME(깃허브 사용자 이름) 환경 변수도 만들어줍니다. 환경 변수는 secret로 설정되어야 합니다. 다른 방법으로는 아래와 같은 내용으로 azure-pipelines.yml 파일을 저장소 루트에 만들어줍니다.
azure-pipelines.yml
trigger:
- main

pool:
vmImage: ubuntu-latest

steps:
- checkout: self
persistCredentials: true

- task: [email protected]
inputs:
versionSpec: 14.x
displayName: Install Node.js

- script: |
git config --global user.name "${GH_NAME}"
git config --global user.email "${GH_EMAIL}"
git checkout -b main
echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
yarn install
GIT_USER="${GH_NAME}" yarn deploy
env:
GH_NAME: $(GH_NAME)
GH_EMAIL: $(GH_EMAIL)
GH_TOKEN: $(GH_TOKEN)
displayName: Install and build

드론 CI(Drone CI) 사용하기

  1. 프로젝트에서 배포키로 사용할 SSH 키를 새로 만듭니다.
  2. 다른 SSH 키를 덮어쓰지 않도록 주의해서 개인키와 공개키 이름을 설정합니다.
  3. Go to https://github.com/USERNAME/REPO/settings/keys and add a new deploy key by pasting in the public key you just generated.
  4. Open your Drone.io dashboard and log in. 연결할 URL은 https://cloud.drone.io/USERNAME/REPO 형식입니다.
  5. 저장소를 선택하고 'activate repository' 버튼을 클릭합니다. 그리고 이름은 git_deploy_private_key, 값은 앞에서 만든 개인키로 지정한 secret를 추가합니다.
  6. Create a .drone.yml on the root of your repository with the below text.
.drone.yml
kind: pipeline
type: docker
trigger:
event:
- tag
- name: Website
image: node
commands:
- mkdir -p $HOME/.ssh
- ssh-keyscan -t rsa github.com >> $HOME/.ssh/known_hosts
- echo "$GITHUB_PRIVATE_KEY" > "$HOME/.ssh/id_rsa"
- chmod 0600 $HOME/.ssh/id_rsa
- cd website
- yarn install
- yarn deploy
environment:
USE_SSH: true
GITHUB_PRIVATE_KEY:
from_secret: git_deploy_private_key

이제 깃허브에 새로운 태그가 들어오면 여러분의 웹 사이트를 배포하기 위한 드론 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 a project.
    • Create project 링크를 클릭하고 프로젝트 이름을 설정합니다.
    • Next 버튼을 클릭합니다.
  3. Create a new environment.
    • Create environment 링크를 클릭하고 이름을 설정합니다(예: staging, production).
  4. Add an application.
    • Create an application 링크를 클릭하고 이름을 설정한 후 도큐사우루스 앱이 위치한 GitHub 또는 GitLab 저장소를 선택합니다.
    • 메인 브랜치 이름과 루트 애플리케이션 경로를 설정합니다.
    • Create 버튼을 클릭합니다. 애플리케이션이 만들어진 후에는
    • 생성한 애플리케이션 Settings을 확인합니다.
    • 포트를 선택합니다.
    • 도큐사우루스 애플리케이션에서 사용하는 포트를 추가합니다.
  5. Deploy All you have to do now is to navigate to your application and click on Deploy.

Deploy the app

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

Hostman을 사용해 배포하기

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

  1. Create a service.

    To deploy a Docusaurus static website, click Create in the top-left corner of your Dashboard and choose Front-end app or static website.

  2. Select the project to deploy.

    If you are logged in to Hostman with your GitHub, GitLab, or Bitbucket account, at this point you will see the repository with your projects, including the private ones.

    배포할 프로젝트를 선택합니다. It must contain the directory with the project's files (e.g. website).

    To access a different repository, click Connect another repository.

    If you didn't use your Git account credentials to log in, you'll be able to access the necessary account now, and then select the project.

  3. Configure the build settings.

    Next, the Website customization window will appear. Choose the Static website option from the list of frameworks.

    The Directory with app points at the directory that will contain the project's files after the build. You can leave it empty if during Step 2 you selected the repository with the contents of the website (or my_website) directory.

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

    npm run build

    필요한 경우 빌드 명령을 변경할 수 있습니다. You can enter multiple commands separated by &&.

  4. Deploy.

    Click Deploy to start the build process.

    프로세스가 시작되면 배포 로그를 확인할 수 있습니다. 코드에 문제가 있다면 로그에서 경고나 에러 메시지를 확인하고 문제의 원인을 살펴볼 수 있습니다. Usually, the log contains all the debugging data you'll need.

    When the deployment is complete, you will receive an email notification and also see a log entry. 완료되었습니다 ! 여러분의 프로젝트를 공개할 준비가 끝났습니다.

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

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

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

  1. 먼저 npm 명령으로 서지를 설치합니다.
    npm install -g surge
  2. 프로젝트 루트 디렉터리에서 사이트의 파일을 빌드하려면 아래 명령을 실행합니다.
    npm run build
  3. 다음 명령어를 프로젝트 루트 디렉토리에서 실행하세요:
    surge build/

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

사이트가 build 디렉터리에 게시되면 *.surge.sh 서브도메인이 무작위로 만들어집니다(서브도메인은 수정할 수 있습니다).

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

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

surge build/ your-domain.com

여러분의 사이트는 선택에 따라 무료로 제공되는 subdomain.surge.sh 또는 your-domain.com에서 운영할 수 있습니다.

CNAME 파일 설정하기

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

echo subdomain.surge.sh > CNAME

surge 명령을 사용해 이후 변경 사항 발생 시 배포를 진행할 수 있습니다.

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

  1. 퀀트(Quant) CLI를 설치합니다.
  2. 퀀트CDN 계정을 생성합니다.
  3. quant init 명령으로 프로젝트를 초기화하고 여러분의 자격 정보를 설정합니다.
    quant init
  4. Deploy your site.
    quant deploy

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

Layer0을 사용해 배포하기

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

Deploying to Cloudflare Pages

Cloudflare Pages is a Jamstack platform for frontend developers to collaborate and deploy websites. Get started within a few minutes by following this article.

Deploying to Azure Static Web Apps

Azure Static Web Apps is a service that automatically builds and deploys full-stack web apps to Azure directly from the code repository, simplifying the developer experience for CI/CD. Static Web Apps separates the web application's static assets from its dynamic (API) endpoints. Static assets are served from globally-distributed content servers, making it faster for clients to retrieve files using servers nearby. Dynamic APIs are scaled with serverless architectures, using an event-driven functions-based approach that is more cost-effective and scales on demand. Get started in a few minutes by following this step-by-step guide.