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

# 開始將應用程式部署到 Amplify 託管
<a name="getting-started"></a>

為了協助您了解 Amplify 託管的運作方式，下列教學課程會逐步引導您建置和部署使用 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)

# 將 Next.js 應用程式部署至 Amplify 託管
<a name="getting-started-next"></a>

本教學課程會逐步引導您從 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 儲存庫
<a name="step-1-connect-repository"></a>

在此步驟中，您將 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：確認建置設定
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

Amplify 會自動偵測要為您部署的分支執行的建置命令序列。在此步驟中，您將檢閱並確認建置設定。

**確認應用程式的建置設定**

1. 在**應用程式設定**頁面上，找到**建置設定**區段。

   驗證**前端建置命令**和**建置輸出目錄**是否正確。對於此 Next.js 範例應用程式，**建置輸出目錄**設定為 `.next`。

1. 新增服務角色的程序會因您要建立新角色或使用現有角色而有所不同。
   + 若要建立新的角色：

     1. 選擇**建立並使用新的服務角色**。
   + 若要使用現有角色：

     1. 選擇**使用現有角色**。

     1. 在服務角色清單中，選取要使用的角色。

1. 選擇**下一步**。

## 步驟 3：部署應用程式
<a name="step-3-save-and-deploy"></a>

在此步驟中，您將應用程式部署至 AWS 全球內容交付網路 (CDN)。

**儲存和部署應用程式**

1. 在**檢閱**頁面上，確認您的儲存庫詳細資訊和應用程式設定正確無誤。

1. 選擇 **Save and deploy (儲存並部署)**。您的前端建置通常需要 1 到 2 分鐘，但可能會因應用程式的大小而有所不同。

1. 部署完成時，您可以使用`amplifyapp.com`預設網域的連結來檢視您的應用程式。

**注意**  
為了增強 Amplify 應用程式的安全性，在[公有字尾清單 (PSL)](https://publicsuffix.org/) 中註冊 *amplifyapp.com* 網域。為了提高安全性，如果您需要在 Amplify 應用程式的預設網域名稱中設定敏感 Cookie，建議您使用具有`__Host-`字首的 Cookie。此做法將有助於保護您的網域免受跨站請求偽造 (CSRF) 攻擊。如需更多資訊，請參閱 Mozilla 開發人員網路中的[設定 Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) 頁面。

## 步驟 4：（選用） 清除資源
<a name="step-4-clean-up"></a>

如果您不再需要為教學課程部署的應用程式，可以將其刪除。此步驟協助確保您不會為了未使用的資源而付費。

**刪除應用程式**

1. 從導覽窗格中**的應用程式設定**選單中，選擇**一般設定**。

1. 在**一般設定**頁面上，選擇**刪除應用程式**。

1. 在確認視窗中，輸入 **delete**。然後選擇**刪除應用程式**。

## 將功能新增至您的應用程式
<a name="next-steps"></a>

現在您已將應用程式部署到 Amplify，您可以探索下列一些可供託管應用程式使用的功能。

**環境變數**  
應用程式通常需要在執行時間取得組態資訊。這些組態可以是資料庫連線詳細資訊、API 金鑰或參數。環境變數提供在建置時公開這些組態的方法。如需詳細資訊，請參閱[環境變數](environment-variables.md)。

**自訂網域**  
在本教學課程中，Amplify 會將您的應用程式託管在具有 URL 的預設`amplifyapp.com`網域上，例如 `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com`。當您將應用程式連線至自訂網域時，使用者會看到您的應用程式託管在自訂 URL 上，例如 `https://www.example.com`。如需詳細資訊，請參閱[設定自訂網域](custom-domains.md)。

**提取請求預覽**  
Web 提取請求預覽可讓團隊預覽提取請求 (PRs) 的變更，然後再將程式碼合併到生產或整合分支。如需詳細資訊，請參閱[提取請求的 Web 預覽](pr-previews.md)。

**管理多個環境**  
若要了解 Amplify 如何與特徵分支和 GitFlow 工作流程搭配使用以支援多個部署，請參閱[特徵分支部署和團隊工作流程](multi-environments.md)。

# 將 Nuxt.js 應用程式部署至 Amplify 託管
<a name="get-started-nuxt"></a>

使用以下指示將 Nuxt.js 應用程式部署到 Amplify Hosting。Nuxt 已使用 Nitro 伺服器實作預設轉接器。這可讓您部署 Nuxt 專案，無需任何其他組態。

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

1. 登入 AWS 管理主控台 並開啟 [Amplify 主控台](https://console.aws.amazon.com/amplify/)。

1. **在所有應用程式**頁面上，選擇**建立新應用程式**。

1. 在**開始使用 Amplify 建置**頁面上，選擇您的 Git 儲存庫提供者，然後選擇**下一步**。

1. 在**新增儲存庫分支**頁面上，執行下列動作：

   1. 選取要連線的儲存庫名稱。

   1. 選取要連線的儲存庫分支名稱。

   1. 選擇**下一步**。

1. 如果您希望 Amplify 能夠將應用程式日誌交付至 Amazon CloudWatch Logs，您必須在 主控台中明確啟用此功能。開啟**進階設定**區段，然後在**伺服器端轉譯** **(SSR) 部署區段中選擇啟用 SSR 應用程式日誌**。

1. 選擇**下一步**。

1. 在**檢閱**頁面上，選擇**儲存並部署**。

# 將 Astro.js 應用程式部署至 Amplify 託管
<a name="get-started-astro"></a>

使用以下指示將 Astro.js 應用程式部署到 Amplify Hosting。您可以使用現有的應用程式，或使用 Astro 提供的其中一個官方範例來建立入門應用程式。若要建立入門應用程式，請參閱 *Astro 文件*中的[使用佈景主題或入門範本](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template)。

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

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

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

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

# 將 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. 在**檢閱**頁面上，選擇**儲存並部署**。