기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # Amplify Hosting에 앱 배포 시작하기 다음 자습서에서는 Amplify Hosting의 작동 방식을 이해하는 데 도움이 되도록 Amplify가 지원하는 일반적인 SSR 프레임워크를 사용하여 생성된 애플리케이션을 빌드하고 배포하는 방법을 안내합니다. **Topics** + [Next.js 앱 배포](getting-started-next.md) + [Nuxt.js 앱 배포](get-started-nuxt.md) + [Astro.js 앱 배포](get-started-astro.md) + [SvelteKit 앱 배포](get-started-sveltekit.md) # Amplify Hosting에 Next.js 앱 배포 이 자습서에서는 Git 리포지토리에서 Next.js 애플리케이션을 빌드하고 배포하는 방법을 안내합니다. 이 자습서를 시작하기 전에 다음 사전 조건을 완료합니다. **에 가입 AWS 계정** 아직 AWS 고객이 아닌 경우 온라인 지침에 따라 [를 생성 AWS 계정](https://portal.aws.amazon.com/billing/signup#/start/email)해야 합니다. 가입하면 Amplify 및 애플리케이션에 사용할 수 있는 기타 AWS 서비스에 액세스할 수 있습니다. **애플리케이션 만들기** *Next.js 설명서*의 [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app) 명령을 사용하여 이 자습서에 사용할 기본 Next.js 애플리케이션을 생성합니다. **Git 리포지토리 생성** Amplify는 GitHub, Bitbucket, GitLab 및를 지원합니다 AWS CodeCommit. `create-next-app` 애플리케이션을 Git 리포지토리로 푸시합니다. ## 1단계: Git 리포지토리 연결 이 단계에서는 Git 리포지토리의 Next.js 애플리케이션을 Amplify Hosting에 연결합니다. **Git 리포지토리의 앱을 연결하려면** 1. [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다. 1. 현재 리전에서 처음 앱을 배포하는 경우 기본적으로 **AWS Amplify** 서비스 페이지에서 시작합니다. 페이지 상단에서 **앱 배포**를 선택합니다. 1. **Amplify로 빌드 시작** 페이지에서 Git 리포지토리 공급자를 선택하고 **다음**을 선택합니다. GitHub 리포지토리의 경우, Amplify는 GitHub 앱 기능을 사용하여 Amplify에 액세스 권한을 부여합니다. GitHub 앱 설치 및 인증에 대한 자세한 내용은 [GitHub 리포지토리에 대한 Amplify 액세스 설정](setting-up-GitHub-access.md) 섹션을 참조하세요. **참고** Bitbucket, GitLab 또는를 사용하여 Amplify 콘솔에 권한을 부여하면 AWS CodeCommit Amplify는 리포지토리 공급자로부터 액세스 토큰을 가져오지만 *토큰은 서버에 저장되지 않습니다*. AWS Amplify는 특정 리포지토리에만 설치된 배포 키를 사용하여 리포지토리에 액세스합니다. 1. **리포지토리 브랜치 추가** 페이지에서 다음을 수행하세요. 1. 연결할 리포지토리의 이름을 선택합니다. 1. 연결할 리포지토리 브랜치의 이름을 선택합니다. 1. **다음**을 선택합니다. ## 2단계: 빌드 설정 확인 Amplify는 배포 중인 브랜치에 대해 실행할 빌드 명령 시퀀스를 자동으로 감지합니다. 이 단계에서는 빌드 설정을 검토하고 확인합니다. **앱의 빌드 설정을 확인하려면** 1. **앱 설정** 페이지에서 **빌드 설정** 섹션을 찾습니다. **프론트엔드 빌드 명령** 및 **빌드 출력 디렉터리**가 올바른지 확인합니다. 이 Next.js 예제 앱의 경우 **빌드 출력 디렉터리**가 `.next`로 설정되어 있습니다. 1. 서비스 역할을 추가하는 절차는 새 역할을 생성할지 아니면 기존 역할을 사용할지에 따라 달라집니다. + 새 역할을 생성하려면 1. **새 서비스 역할 생성 및 사용**을 선택합니다. + 기존 역할을 사용하려면 1. **기존 역할 사용**을 선택합니다. 1. 서비스 역할 목록에서 사용할 역할을 선택합니다. 1. **다음**을 선택합니다. ## 3단계: 애플리케이션 배포 이 단계에서는 AWS 글로벌 콘텐츠 전송 네트워크(CDN)에 앱을 배포합니다. **앱을 저장 및 배포하려면** 1. **검토** 페이지에서 리포지토리 세부 정보와 앱 설정이 올바른지 확인합니다. 1. **저장 및 배포**를 선택합니다. 프론트엔드 빌드는 일반적으로 1\$12 분이 소요되지만 앱 크기에 따라 다를 수 있습니다. 1. 배포가 완료되면 `amplifyapp.com` 기본 도메인에 대한 링크를 사용하여 앱을 볼 수 있습니다. **참고** Amplify 애플리케이션의 보안을 강화하기 위해 *amplifyapp.com* 도메인은 [공개 접미사 목록(PSL)](https://publicsuffix.org/)에 등록되어 있습니다. 보안 강화를 위해 Amplify 애플리케이션의 기본 도메인 이름에 민감한 쿠키를 설정해야 하는 경우, `__Host-` 접두사가 있는 쿠키를 사용하는 것이 좋습니다. 이렇게 쿠키를 설정하면 교차 사이트 요청 위조 시도(CSRF)로부터 도메인을 보호하는 데 도움이 됩니다. 자세한 내용은 Mozilla 개발자 네트워크의 [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) 페이지를 참조하세요. ## 4단계: (선택 사항) 리소스 정리 자습서용으로 생성한 앱이 더 이상 필요 없는 경우에는 삭제할 수 있습니다. 이렇게 하면 사용하지 않는 리소스에 요금이 청구되지 않습니다. **앱을 삭제하려면** 1. 탐색 창의 **앱 설정** 메뉴에서 **일반 설정**을 선택합니다. 1. **일반 설정** 페이지에서 **앱 삭제**를 선택합니다. 1. 확인 창에서 **delete**를 입력합니다. 그런 다음 **앱 삭제**를 선택합니다. ## 앱에 기능 추가 Amplify에 앱을 배포했으므로 호스팅된 애플리케이션에서 사용할 수 있는 다음 기능 중 일부를 살펴볼 수 있습니다. **환경 변수** 애플리케이션은 런타임에 구성 정보가 필요한 경우가 많습니다. 이러한 구성은 데이터베이스 연결 세부 정보, API 키 또는 파라미터가 될 수 있습니다. 환경 변수는 빌드 시 이러한 구성을 노출하는 수단을 제공합니다. 자세한 내용은 [환경 변수](environment-variables.md)를 참조하세요. **사용자 지정 도메인** 이 자습서에서는 Amplify가 `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`과 같은 URL을 사용하여 기본 `amplifyapp.com` 도메인에서 앱을 호스팅합니다. 앱을 사용자 지정 도메인에 연결하면 사용자는 앱이 `https://www.example.com`과 같은 사용자 지정 URL에서 호스팅되는 것을 볼 수 있습니다. 자세한 내용은 [사용자 지정 도메인 설정](custom-domains.md)을 참조하세요. **pull 요청 미리 보기** pull 요청 웹 미리 보기는 팀이 코드를 프로덕션 또는 통합 브랜치에 병합하기 전에 pull 요청(PR)의 변경 사항을 미리 볼 수 있는 방법을 제공합니다. 자세한 내용은 [pull 요청의 웹 미리 보기](pr-previews.md) 섹션을 참조하세요. **여러 환경 관리** Amplify가 기능 브랜치 및 GitFlow 워크플로와 함께 작동하여 여러 배포를 지원하는 방법을 알아보려면 [기능 브랜치 배포 및 팀 워크플로](multi-environments.md)를 참조하세요. # Amplify Hosting에 Nuxt.js 앱 배포 Nuxt.js 애플리케이션을 Amplify Hosting에 배포하려면 다음 지침을 따릅니다. Nuxt는 Nitro 서버를 사용하여 사전 설정된 어댑터를 구현했습니다. 이를 통해 추가 구성 없이 Nuxt 프로젝트를 배포할 수 있습니다. **Amplify Hosting에 Nuxt 앱을 배포하려면** 1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다. 1. **모든 앱** 페이지에서 **새 앱 생성**을 선택합니다. 1. **Amplify로 빌드 시작** 페이지에서 Git 리포지토리 공급자를 선택하고 **다음**을 선택합니다. 1. **리포지토리 브랜치 추가** 페이지에서 다음을 수행합니다. 1. 연결할 리포지토리의 이름을 선택합니다. 1. 연결할 리포지토리 브랜치의 이름을 선택합니다. 1. **다음**을 선택합니다. 1. Amplify가 Amazon CloudWatch Logs에 앱 로그를 전달할 수 있도록 하려면 콘솔에서 명시적으로 활성화해야 합니다. **고급 설정** 섹션을 열고 **서버 측 렌더링(SSR) 배포** 섹션에서 **SSR 앱 로그 활성화**를 선택합니다. 1. **다음**을 선택합니다. 1. **검토** 페이지에서 **저장 및 배포**를 선택합니다. # Amplify Hosting에 Astro.js 앱 배포 Astro.js 애플리케이션을 Amplify Hosting에 배포하려면 다음 지침을 따릅니다. 기존 애플리케이션을 사용하거나 Astro가 제공하는 공식 예제 중 하나를 사용하여 스타터 애플리케이션을 생성할 수 있습니다. 스타터 애플리케이션을 생성하려면 *Astro 설명서*의 [테마 또는 스타터 템플릿 사용](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template)을 참조하세요. SSR로 Astro 사이트를 Amplify Hosting에 배포하려면 애플리케이션에 어댑터를 추가해야 합니다. 당사는 Amplify 소유의 Astro 프레임워크용 어댑터를 유지 관리하지 않습니다. 이 자습서에서는 커뮤니티의 구성원이 생성한 `astro-aws-amplify` 어댑터를 사용합니다. 이 어댑터는 GitHub 웹 사이트의 [github.com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) 사용할 수 있습니다.이 어댑터는 유지 관리하지 AWS 않습니다. **Amplify Hosting에 Astro 앱을 배포하려면** 1. 로컬 컴퓨터에서 배포할 Astro 애플리케이션으로 이동합니다. 1. 어댑터를 설치하려면 터미널 창을 열고 다음 명령을 실행합니다. 이 예제에서는 [github.com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify)에서 사용할 수 있는 커뮤니티 어댑터를 사용합니다. *astro-aws-amplify*를 사용 중인 어댑터 이름으로 바꿀 수 있습니다. ``` npm install astro-aws-amplify ``` 1. 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', }); ``` 1. 변경 사항을 커밋하고 프로젝트를 Git 리포지토리로 푸시합니다. 이제 Astro 앱을 Amplify에 배포할 준비가 되었습니다. 1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다. 1. **모든 앱** 페이지에서 **새 앱 생성**을 선택합니다. 1. **Amplify로 빌드 시작** 페이지에서 Git 리포지토리 공급자를 선택하고 **다음**을 선택합니다. 1. **리포지토리 브랜치 추가** 페이지에서 다음을 수행합니다. 1. 연결할 리포지토리의 이름을 선택합니다. 1. 연결할 리포지토리 브랜치의 이름을 선택합니다. 1. **다음**을 선택합니다. 1. **앱 설정** 페이지에서 **빌드 설정** 섹션을 찾습니다. **빌드 출력 디렉터리**에 **.amplify-hosting**을 입력합니다. 1. 빌드 사양에서 앱의 프론트엔드 빌드 명령도 업데이트해야 합니다. 빌드 사양을 열려면 **YML 파일 편집**을 선택합니다. 1. `amplify.yml` 파일에서 프론트엔드 빌드 명령 섹션을 찾습니다. **mv node\$1modules ./.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/**/*' ``` 1. **저장**을 선택합니다. 1. Amplify가 Amazon CloudWatch Logs에 앱 로그를 전달할 수 있도록 하려면 콘솔에서 명시적으로 활성화해야 합니다. **고급 설정** 섹션을 열고 **서버 측 렌더링(SSR) 배포** 섹션에서 **SSR 앱 로그 활성화**를 선택합니다. 1. **다음**을 선택합니다. 1. **검토** 페이지에서 **저장 및 배포**를 선택합니다. # Amplify Hosting에 SvelteKit 앱 배포 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. **검토** 페이지에서 **저장 및 배포**를 선택합니다.