將 Gatsby 網站部署至 Azure Static Web Apps

本文示範如何將 Gatsby Web 應用程式建立及部署至 Azure Static Web Apps。最後的結果是新的靜態 Web Apps 網站（與相關聯的 GitHub Actions），可讓您控制應用程式的建置和發佈方式。

在本教學課程中，您會了解如何：

如果您沒有 Azure 訂閱，請在開始之前，先建立 Azure 免費帳戶。

必要條件

使用 Gatsby 命令列介面建立 Gatsby 應用程式（CLI）：

開啟終端機
使用 npx 工具來使用 Gatsby CLI 建立新的應用程式。這可能需要幾分鐘的時間。
```
npx gatsby new static-web-app
```
移至新建立的應用程式
```
cd static-web-app
```

初始化 Git 存放庫

git init
git add -A
git commit -m "initial commit"

注意

如果您使用最新版本的 Gatsby，您可能需要修改package.json以包含 “engine”： { “node”： “>=18.0.0” }，

您必須在 GitHub 上擁有存放庫，才能建立新的 Azure Static Web Apps 資源。

從 https://github.com/new 具名 gatsby-static-web-app 建立空白 GitHub 存放庫（不要建立自述檔）。
接下來，將您剛才建立的 GitHub 存放庫新增為本機存放庫的遠端。請務必在下列命令中新增您的 GitHub 用戶名稱，以取代 <YOUR_USER_NAME> 佔位元。
```
git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
```
將本機存放庫推送至 GitHub。
```
git push --set-upstream origin main
```

下列步驟示範如何建立新的靜態網站應用程式，並將其部署至生產環境。

在 [基本] 索引標籤中，輸入下列值。

屬性	值
訂用帳戶	您的 Azure 訂用帳戶名稱。
資源群組	my-gatsby-group
名稱	my-gatsby-app
方案類型	免費
Azure Functions API 和預備環境的區域	選取最靠近您的區域。
來源	GitHub

如果您不打算繼續使用此應用程式，您可以透過下列步驟刪除 Azure 靜態 Web 應用程式資源：