Astro 사이트를 Netlify에 배포하세요

Netlify는 웹 애플리케이션과 정적 웹사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공합니다. 모든 Astro 사이트는 Netlify에서 호스팅될 수 있습니다!

이 가이드에는 웹사이트 UI 또는 Netlify의 CLI를 통해 Netlify에 배포하기 위한 지침이 포함되어 있습니다.

프로젝트 구성

Astro 프로젝트는 정적 사이트, 서버 렌더링 사이트, 에지 렌더링 사이트 등 세 가지 방법으로 Netlify에 배포할 수 있습니다.

Astro 프로젝트는 기본적으로 정적 사이트입니다. 정적 Astro 사이트를 Netlify에 배포하기 위해 추가 구성이 필요하지 않습니다.

Astro 프로젝트에서 SSR을 활성화하고 Netlify의 에지 함수 사용을 포함하여 Netlify에 배포하려면 다음을 수행하세요.

Netlify 어댑터를 추가하여 Astro 프로젝트에서 SSR을 활성화하고 다음 astro add 명령으로 Netlify에 배포하세요. 그러면 어댑터가 설치되고 astro.config.mjs 파일이 한 번에 적절하게 변경됩니다.

npx astro add netlify

대신 어댑터를 수동으로 설치하려면 다음 두 단계를 완료하십시오.

선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 @astrojs/netlify 어댑터를 설치합니다. npm을 사용 중이거나 확실하지 않은 경우 터미널에서 다음을 실행하세요.
Terminal window
```
npm install @astrojs/netlify
```
astro.config.mjs 프로젝트 구성 파일에 두 개의 새 줄을 추가합니다.
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'server',
  adapter: netlify(),
});
```
Netlify 어댑터 구성에 edgeMiddleware: true를 추가하여 Netlify의 Edge Functions를 사용하여 프로젝트의 Astro 미들웨어를 배포할 수도 있습니다.
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';

export default defineConfig({
  output: 'server',
  adapter: netlify({
    edgeMiddleware: true
  }),
});
```
미리 렌더링된 페이지를 위한 미들웨어를 실행하려면 edgeMiddleware: true를 설정합니다. 이렇게 하면 미들웨어를 사용하여 인증, 리디렉션 또는 이와 유사한 기능을 구현하는 동시에 정적 HTML 출력을 계속 사용할 수 있습니다.

웹사이트 UI를 통해 또는 Netlify의 CLI (명령줄 인터페이스)를 사용하여 Netlify에 배포할 수 있습니다. 프로세스는 정적 사이트와 SSR Astro 사이트 모두 동일합니다.

프로젝트가 GitHub, GitLab, BitBucket, Azure DevOps에 저장된 경우 Netlify 웹 사이트 UI를 사용하여 Astro 사이트를 배포할 수 있습니다.

Netlify dashboard에서 Add a new site를 클릭하세요.
Import an existing project를 선택하세요.

Git 공급자로부터 Astro 저장소를 가져올 때 Netlify는 자동으로 올바른 구성 설정을 감지하고 미리 값들을 채워야 합니다.
다음 설정이 입력되었는지 확인한 후 Deploy 버튼을 누르세요.
- Build Command: astro build 또는 npm run build
- Publish directory: dist
배포 후에는 사이트 개요 페이지로 리디렉션됩니다. 여기에서 사이트 세부정보를 편집할 수 있습니다.

소스 저장소에 대한 향후 변경 사항은 배포 구성에 따라 미리 보기 및 프로덕션 배포를 트리거합니다.

선택적으로 프로젝트 저장소의 최상위 수준에 새 netlify.toml 파일을 생성하여 빌드 명령 및 게시 디렉터리는 물론 환경 변수 및 리디렉션을 포함한 기타 프로젝트 설정을 구성할 수 있습니다. Netlify는 이 파일을 읽고 자동으로 배포를 구성합니다.

기본 설정을 구성하려면 다음 내용이 포함된 netlify.toml 파일을 생성하세요.

[build]
  command = "npm run build"
  publish = "dist"

Netlify 블로그의 “기존 Astro Git 저장소 배포”에 대한 자세한 내용

Netlify CLI를 설치하고 사용하여 Netlify에 새 사이트를 만들고 Git 저장소를 연결할 수도 있습니다.

Netlify의 CLI를 전역적으로 설치
Terminal window
```
npm install --global netlify-cli
```
netlify login을 실행하고 지침에 따라 Netlify에 로그인하고 권한을 부여하세요.
netlify init을 실행하고 지침을 따르세요.
빌드 명령 (astro build)을 확인하세요.

CLI는 빌드 설정 (astro build)과 배포 디렉터리 (dist)를 자동으로 감지하고 해당 설정을 사용하여 netlify.toml 파일을 자동으로 생성하도록 제안합니다.
Git에 푸시하여 빌드 및 배포

CLI는 저장소에 배포 키를 추가합니다. 이는 git push를 할 때마다 Netlify에서 사이트가 자동으로 재빌드된다는 의미입니다.