기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# Amplify Hosting에 SvelteKit 앱 배포
<a name="get-started-sveltekit"></a>

SvelteKit 애플리케이션을 Amplify Hosting에 배포하려면 다음 지침을 따릅니다. 자체 애플리케이션을 사용하거나 스타터 앱을 생성할 수 있습니다. 자세한 내용은 *SvelteKit 설명서*의 [프로젝트 생성](https://kit.svelte.dev/docs/creating-a-project)을 참조하세요.

SSR로 SvelteKit 앱을 Amplify Hosting에 배포하려면 프로젝트에 어댑터를 추가해야 합니다. 당사는 Amplify 소유의 SvelteKit 프레임워크용 어댑터를 유지 관리하지 않습니다. 이 예제에서는 커뮤니티의 구성원이 생성한 `amplify-adapter`를 사용합니다. 어댑터는 GitHub 웹 사이트의 [github.com/gzimbron/amplify-adapter](https://github.com/gzimbron/amplify-adapter) 사용할 수 있습니다.이 어댑터는 유지 관리하지 AWS 않습니다.

**Amplify Hosting에 SvelteKit 앱을 배포하려면**

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

1. 어댑터를 설치하려면 터미널 창을 열고 다음 명령을 실행합니다. 이 예제에서는 [github.com/gzimbron/amplify-adapter](https://github.com/gzimbron/amplify-adapter)에서 사용할 수 있는 커뮤니티 어댑터를 사용합니다. 다른 커뮤니티 어댑터를 사용하는 경우 *amplify-adapter*를 해당 어댑터의 이름으로 바꿉니다.

   ```
   npm install amplify-adapter
   ```

1. SvelteKit 앱의 프로젝트 폴더에서 `svelte.config.js` 파일을 엽니다. `amplify-adapter`를 사용하도록 파일을 편집하거나 *'amplify-adapter'*를 사용할 어댑터의 이름으로 바꿉니다. 파일이 다음과 같아야 합니다.

   ```
   import adapter from 'amplify-adapter';
   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
   
                 
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
           // Consult https://kit.svelte.dev/docs/integrations#preprocessors
           // for more information about preprocessors
           preprocess: vitePreprocess(),
   
           kit: {
                   // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
                   // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
                   // See https://kit.svelte.dev/docs/adapters for more information about adapters.
                   adapter: adapter()
           }
   };
   
   export default config;
   ```

1. 변경 사항을 커밋하고 애플리케이션을 Git 리포지토리로 푸시합니다.

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

   에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.

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

1. **Amplify로 빌드 시작** 페이지에서 Git 리포지토리 공급자를 선택하고 **다음**을 선택합니다.

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

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

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

   1. **다음**을 선택합니다.

1. **앱 설정** 페이지에서 **빌드 설정** 섹션을 찾습니다. **빌드 출력 디렉터리**에 **build**을 입력합니다.

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

1. `amplify.yml` 파일에서 프론트엔드 빌드 명령 섹션을 찾습니다. **- cd build/compute/default/** 및 **- npm i --production**을 입력합니다.

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

   ```
   version: 1
   frontend:
       phases:
           preBuild:
               commands:
                   - 'npm ci --cache .npm --prefer-offline'
           build:
               commands:
                   - 'npm run build'
                   - 'cd build/compute/default/'
                   - 'npm i --production'
                 
       artifacts:
           baseDirectory: build
           files:
               - '**/*'
       cache:
           paths:
               - '.npm/**/*'
   ```

1. **저장**을 선택합니다.

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

1. **다음**을 선택합니다.

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