Azion에 Astro 사이트 배포

프런트엔드 개발자가 협업하여 정적 (JAMstack) 및 SSR 웹사이트를 배포할 수 있는 플랫폼인 Azion에 Astro 프로젝트를 배포할 수 있습니다.

전제 조건

시작하려면 다음이 필요합니다:

Azion 계정. 계정이 없는 경우 무료 계정을 신청할 수 있습니다.
GitHub 저장소에 저장된 앱 코드.
더 빠른 프로젝트 설정 및 배포를 위해 설치된 Azion CLI.

Azion 콘솔 대시보드를 통한 배포 방법

빌드를 시작하려면 다음 단계를 따르세요:

Azion Console에 접속하세요.
홈페이지에서 + Create 버튼을 클릭하세요.
- 그러면 새 애플리케이션 및 리소스를 만들 수 있는 옵션이 있는 모달이 열립니다.
Import from GitHub 옵션을 선택하고 카드를 클릭하세요.
- 이 작업을 수행하면 설정 페이지가 열립니다.
Azion 계정을 GitHub에 연결하세요.
- 승인을 요청하는 팝업 창이 나타납니다.
GitHub에서 가져오려는 저장소를 선택하세요.
빌드 설정을 구성하세요:
- Framework preset: 적절한 프레임워크를 선택하세요 (예: Astro).
- Root Directory: 이는 코드가 있는 디렉터리를 의미합니다. 코드는 하위 디렉터리가 아닌 루트 디렉터리에 위치해야 합니다. 이 필드에 ./ 기호가 나타나면 루트 디렉터리임을 나타냅니다.
- Install Command: 프로덕션을 위해 빌드할 설정을 컴파일하는 명령입니다. 빌드 명령은 스크립트를 통해 실행됩니다. 예: NPM 패키지의 경우 npm run build 또는 npm install.
Save and Deploy를 클릭하세요.
Azion Real-Time Metrics를 사용하여 배포를 모니터링하고 에지에서 사이트가 동작하는 상태인지 확인하세요.

Azion CLI를 사용하여 정적 사이트를 배포하는 방법

Azion CLI 설치:
- 더 쉬운 관리 및 배포를 위해 Azion CLI를 다운로드하여 설치하세요.
Azion CLI는 현재 기본 Windows 환경을 지원하지 않습니다. 하지만 Linux용 Windows 하위 시스템 (WSL)을 통해 Windows에서 사용할 수 있습니다. WSL 설치 가이드를 참조하여 Windows 시스템에서 Linux 환경을 설정하세요.
CLI 인증:
- 다음 명령을 실행하여 Azion 계정으로 CLI를 인증하세요.
터미널 창
```
azion login
```
애플리케이션 설정:
- 다음 명령을 사용하여 프로젝트를 초기화하고 구성하세요:
터미널 창
```
azion init
```
Astro 프로젝트 빌드:
- 로컬에서 빌드 명령을 실행하세요:
터미널 창
```
azion build
```
정적 파일 배포:
- Azion CLI를 사용하여 정적 파일을 배포하세요:
터미널 창
```
azion deploy
```

이 가이드에서는 정적 애플리케이션 배포에 대한 개요를 제공합니다.

Azion CLI를 사용하여 로컬 개발 활성화하기

미리 보기가 작동하려면 다음 명령을 실행해야 합니다:

azion dev

로컬 개발 서버를 초기화하면 애플리케이션은 build 프로세스를 거칩니다.

Building your Edge Application. This process may take a few minutes
Running build step command:
...

그런 다음 빌드가 완료되면 애플리케이션에 대한 액세스 메시지가 표시됩니다.

[Azion Bundler] [Server] › ✔  success   Function running on port http://localhost:3000

문제 해결

Node.js 런타임 API

NPM 패키지를 사용하는 프로젝트가 [Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.와 같은 오류 메시지와 함께 빌드에 실패합니다:

이는 사용 중인 패키지 또는 가져오기가 Azion의 런타임 API와 호환되지 않는다는 의미입니다.

Node.js 런타임 API를 직접 가져오는 경우, 이 문제를 해결하는 방법에 대한 자세한 단계는 Azion Node.js 호환성을 참조하세요.

Node.js 런타임 API를 가져오는 패키지를 가져오는 경우 패키지 작성자로부터 node:* 가져오기 구문을 지원하는지 확인하세요. 지원하지 않는다면 다른 패키지를 찾아야 할 수도 있습니다.