本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 將 SvelteKit 應用程式部署至 Amplify 託管
<a name="get-started-sveltekit"></a>

使用下列指示將 SvelteKit 應用程式部署至 Amplify Hosting。您可以使用自己的應用程式，或建立入門應用程式。如需詳細資訊，請參閱 *SvelteKit 文件*中的[建立專案](https://kit.svelte.dev/docs/creating-a-project)。

若要使用 SSR 將 SvelteKit 應用程式部署至 Amplify Hosting，您必須將轉接器新增至專案。我們不會維護 SvelteKit 架構的 Amplify 擁有轉接器。在此範例中，我們使用社群成員`amplify-adapter`建立的 。轉接器可在 GitHub 網站上的 https：//[github.com/gzimbron/amplify-adapter](https://github.com/gzimbron/amplify-adapter) 取得。 AWS 不會維護此轉接器。

**將 SvelteKit 應用程式部署至 Amplify 託管**

1. 在本機電腦上，導覽至要部署的 SvelteKit 應用程式。

1. 若要安裝轉接器，請開啟終端機視窗並執行下列命令。此範例使用社群轉接器，網址為 https：//[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 管理主控台 並開啟 [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. 在**檢閱**頁面上，選擇**儲存並部署**。