Amplify 호스팅에 Astro.js 앱 배포하기

다음 지침에 따라 Astro.js 애플리케이션을 Amplify 호스팅에 배포하십시오. 기존 애플리케이션을 사용하거나 Astro에서 제공하는 공식 예제 중 하나를 사용하여 스타터 애플리케이션을 만들 수 있습니다. 스타터 애플리케이션을 만들려면 Astro 설명서에서 테마 또는 스타터 템플릿 사용을 참조하십시오.

Amplify SSR 호스팅에 Astro 사이트를 배포하려면 애플리케이션에 어댑터를 추가해야 합니다. Astro 프레임워크용 Amplify 소유 어댑터는 유지 관리하지 않습니다. 이 자습서에서는 커뮤니티 구성원이 만든 astro-aws-amplify 어댑터를 사용합니다. 이 어댑터는 웹 사이트의 astro-aws-amplifygithub.com/alexnguyennz/에서 구할 수 있습니다. GitHub AWS 이 어댑터는 유지 관리하지 않습니다.

Amplify 호스팅에 Astro 앱을 배포하려면

1. 로컬 컴퓨터에서 배포할 Astro 애플리케이션으로 이동합니다.

2. 어댑터를 설치하려면 터미널 창을 열고 다음 명령을 실행합니다. 이 예제에서는 astro-aws-amplifygithub.com/alexnguyennz/에서 제공되는 커뮤니티 어댑터를 사용합니다. 다음과 같이 바꿀 수 있습니다.astro-aws-amplify 사용 중인 어댑터 이름으로

   npm install astro-aws-amplify

3. Astro 앱의 프로젝트 폴더에서 astro.config.mjs 파일을 엽니다. 파일을 업데이트하여 어댑터를 추가합니다. 파일이 다음과 같아야 합니다.

   import { defineConfig } from 'astro/config';
   import mdx from '@astrojs/mdx';
   import awsAmplify from 'astro-aws-amplify';
    
   import sitemap from '@astrojs/sitemap';
    
   // https://astro.build/config
   export default defineConfig({
     site: 'https://example.com',
     integrations: [mdx(), sitemap()],
     adapter: awsAmplify(),
     output: 'server',
   });

4. 변경 사항을 커밋하고 프로젝트를 Git 리포지토리로 푸시합니다.

   이제 Amplify에 Astro 앱을 배포할 준비가 되었습니다.

5. 에 로그인하십시오. AWS Management Console Amplify 콘솔을 엽니다.

6. 모든 앱 페이지에서 새 앱 생성을 선택합니다.

7. Amplify로 빌드 시작 페이지에서 Git 리포지토리 공급자를 선택한 후 다음을 선택합니다.

8. 리포지토리 브랜치 추가 페이지에서 다음을 수행합니다.

   1. 연결할 리포지토리의 이름을 선택합니다.

   2. 연결할 리포지토리 브랜치의 이름을 선택합니다.

   3. Next(다음)를 선택합니다.

9. 앱 설정 페이지에서 빌드 설정 섹션을 찾습니다. 빌드 출력 디렉터리에 를 입력합니다.amplify-hosting.

10. 또한 빌드 사양에서 앱의 프론트엔드 빌드 명령을 업데이트해야 합니다. 빌드 사양을 열려면 YML파일 편집을 선택합니다.

11. amplify.yml파일에서 프런트엔드 빌드 명령 섹션을 찾습니다. 다음을 입력합니다. mv node_modules ./.amplify-hosting/compute/default

    빌드 설정 파일은 다음과 같아야 합니다.

    version: 1
    frontend:
        phases:
            preBuild:
                commands:
                    - 'npm ci --cache .npm --prefer-offline'
            build:
                commands:
                    - 'npm run build'
                    - 'mv node_modules ./.amplify-hosting/compute/default'
        artifacts:
            baseDirectory: .amplify-hosting
            files:
                - '**/*'
        cache:
            paths:
                - '.npm/**/*'
                

12. 저장(Save)을 선택합니다.

13. Amplify가 Amazon Logs에 앱 로그를 전송할 수 있게 하려면 CloudWatch 콘솔에서 이를 명시적으로 활성화해야 합니다. 고급 설정 섹션을 연 다음 서버 측 렌더링 () 배포 섹션에서 SSR앱 로그 활성화를 선택합니다. SSR

14. Next(다음)를 선택합니다.

15. 검토 페이지에서 저장 및 배포를 선택합니다.