SvelteKit Amplify 호스팅에 앱 배포

다음 지침에 따라 Amplify 호스팅에 SvelteKit 애플리케이션을 배포하십시오. 자체 애플리케이션을 사용하거나 스타터 앱을 만들 수 있습니다. 자세한 내용은 SvelteKit 설명서의 프로젝트 만들기를 참조하십시오.

Amplify 호스팅으로 SvelteKit SSR 앱을 배포하려면 프로젝트에 어댑터를 추가해야 합니다. 프레임워크용 Amplify 소유 어댑터는 유지 관리하지 않습니다. SvelteKit 이 예제에서는 커뮤니티 구성원이 amplify-adapter 만든 것을 사용합니다. 어댑터는 웹 사이트의 github.com/gzimbron/amplify-adapter에서 구할 수 있습니다. GitHub AWS 이 어댑터는 유지 관리하지 않습니다.

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

로컬 컴퓨터에서 배포할 SvelteKit 애플리케이션으로 이동합니다.
어댑터를 설치하려면 터미널 창을 열고 다음 명령을 실행합니다. 이 예제에서는 github.com/gzimbron/amplify-adapter에서 제공하는 커뮤니티 어댑터를 사용합니다. 다른 커뮤니티 어댑터를 사용하는 경우 교체하십시오.amplify-adapter 어댑터 이름을 입력하세요.
```
npm install amplify-adapter
```

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;

변경 사항을 적용하고 애플리케이션을 Git 리포지토리로 푸시합니다.
이제 Amplify에 SvelteKit 앱을 배포할 준비가 되었습니다.

에 로그인하십시오. AWS Management Console Amplify 콘솔을 엽니다.
모든 앱 페이지에서 새 앱 생성을 선택합니다.
Amplify로 빌드 시작 페이지에서 Git 리포지토리 공급자를 선택한 후 다음을 선택합니다.
리포지토리 브랜치 추가 페이지에서 다음을 수행합니다.
1. 연결할 리포지토리의 이름을 선택합니다.
2. 연결할 리포지토리 브랜치의 이름을 선택합니다.
3. Next(다음)를 선택합니다.
앱 설정 페이지에서 빌드 설정 섹션을 찾습니다. 빌드 출력 디렉터리에 를 입력합니다build.
또한 빌드 사양에서 앱의 프론트엔드 빌드 명령을 업데이트해야 합니다. 빌드 사양을 열려면 YML파일 편집을 선택합니다.

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/**/*'

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

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

Astro.js 앱 배포

서버측 렌더링된 앱 배포