如何使用 AWS 部署帶有自定義域的 React 項(xiàng)目？-魔扣目錄

使用 aws（amazon web services）等云提供商通過自定義域部署 react 應(yīng)用程序可能看起來令人畏懼，但當(dāng)分解為可管理的步驟時，它就很簡單。在本文中，我們將指導(dǎo)您完成從構(gòu)建應(yīng)用程序到使其在您的自定義域上運(yùn)行的整個過程。

當(dāng)您準(zhǔn)備好與世界分享您的 react 項(xiàng)目時，使用自定義域部署它可以為您的應(yīng)用程序帶來專業(yè)的觸感。 aws 提供了一個強(qiáng)大的、可擴(kuò)展的平臺來托管靜態(tài)網(wǎng)站，使其成為部署 react 應(yīng)用程序的絕佳選擇。本指南將引導(dǎo)您逐步完成使用自定義域在 aws s3 上部署 react 應(yīng)用程序的過程。

準(zhǔn)備部署您的 react 應(yīng)用程序**

在部署之前，您需要構(gòu)建您的 react 應(yīng)用程序：

構(gòu)建您的應(yīng)用程序：在終端中運(yùn)行以下命令來生成 react 應(yīng)用程序的生產(chǎn)版本：

   npm run build

登錄后復(fù)制登錄后復(fù)制

此命令創(chuàng)建一個優(yōu)化的構(gòu)建文件夾，其中包含您需要部署的所有文件。

測試構(gòu)建：在部署之前在本地測試你的構(gòu)建是個好主意。您可以使用像服務(wù)這樣的包：

   npx serve -s build

登錄后復(fù)制

此命令將在本地為您的應(yīng)用程序提供服務(wù)，以便您可以確保一切按預(yù)期工作。

設(shè)置 aws s3**

aws s3（簡單存儲服務(wù)）是托管 react 應(yīng)用程序等靜態(tài)網(wǎng)站的絕佳選擇。

創(chuàng)建s3存儲桶:

前往aws s3控制臺。
點(diǎn)擊“創(chuàng)建存儲桶”。
輸入唯一的存儲桶名稱（這將是您的應(yīng)用程序的名稱）。
選擇離目標(biāo)受眾較近的地區(qū)。
取消選中“阻止所有公共訪問”選項(xiàng)并確認(rèn)您的存儲桶將可公開訪問（對于托管網(wǎng)站很重要）。

上傳你的react應(yīng)用:

創(chuàng)建存儲桶后，點(diǎn)擊它打開它。
點(diǎn)擊“上傳”并選擇構(gòu)建文件夾中的所有文件。
上傳后，點(diǎn)擊“屬性”，然后啟用“靜態(tài)網(wǎng)站托管”。
將“索引文檔”設(shè)置為index.html，將“錯誤文檔”設(shè)置為index.html

公開存儲桶:

轉(zhuǎn)到您存儲桶中的“權(quán)限”選項(xiàng)卡。
點(diǎn)擊“存儲桶策略”并粘貼以下 json，將 your-bucket-name 替換為您的實(shí)際存儲桶名稱：

 {
   "version": "2012-10-17",
   "statement": [
     {
       "sid": "publicreadgetobject",
       "effect": "allow",
       "principal": "*",
       "action": "s3:getobject",
       "resource": "arn:aws:s3:::your-bucket-name/*"
     }
   ]
 }

登錄后復(fù)制

保存政策以允許公眾訪問您的文件。

設(shè)置自定義域**

要使用自定義域，您需要配置 aws 的 dns web 服務(wù) route 53。

注冊您的域名:

如果您沒有域名，可以直接通過aws route 53注冊一個。
如果您已有域名，您仍然可以通過 route 53 為其創(chuàng)建托管區(qū)域來管理它。

配置53號路線:

在 route 53 儀表板中，轉(zhuǎn)到“托管區(qū)域”并單擊您的域。
點(diǎn)擊“創(chuàng)建記錄”并選擇“a – ipv4地址”。
選擇“別名”并選擇您的s3存儲桶作為別名目標(biāo)。

更新您域名的dns:

如果您的域是在 aws 外部管理的，請更新您的 dns 設(shè)置以指向您創(chuàng)建托管區(qū)域時提供的 route 53 名稱服務(wù)器。

使用 aws certificate manager 設(shè)置 ssl（可選但推薦）**

為了安全和seo的好處，使用https至關(guān)重要：

申請證書:

前往aws證書管理器。
申請公共證書并輸入您的域名（包括www.yourdomain.com和yourdomain.com）。
按照aws提供的說明驗(yàn)證域名。

配置cloudfront:

設(shè)置 aws cloudfront 以通過 https 安全地提供您的內(nèi)容。
在 cloudfront 控制臺中，創(chuàng)建一個新的分配并選擇您的 s3 存儲桶作為源。
在ssl證書下，選擇“自定義ssl證書”并選擇您創(chuàng)建的證書。
更新域設(shè)置以指向cloudfront分配而不是直接指向s3存儲桶。

示例：部署示例 react 應(yīng)用程序

假設(shè)您已經(jīng)使用 react 創(chuàng)建了一個個人作品集，并且想要將其部署到 www.myportfolio.com:

構(gòu)建你的 react 應(yīng)用：

   npm run build

登錄后復(fù)制登錄后復(fù)制

上傳到s3：

創(chuàng)建名為 myportfolio.com 的 s3 存儲桶。
上傳您的構(gòu)建文件夾內(nèi)容。
啟用s3靜態(tài)網(wǎng)站托管。

配置53號路線:

在 route 53 中注冊 myportfolio.com.
在 route 53 中創(chuàng)建一條指向您的 s3 存儲桶的 a 記錄。

設(shè)置ssl:

為myportfolio.com申請ssl證書。
設(shè)置 cloudfront 發(fā)行版以通過 https 安全地為您的應(yīng)用程序提供服務(wù)。

片尾曲

在 aws 上使用自定義域部署 react 應(yīng)用程序一開始可能看起來很復(fù)雜，但通過上述步驟，您可以放心地托管您的應(yīng)用程序，并享受專業(yè)部署的所有優(yōu)勢。無論您是部署個人項(xiàng)目還是生產(chǎn)級應(yīng)用程序，aws 都能提供滿足您需求的工具和可擴(kuò)展性。