[Part 1]將React App上傳到AWS S3 並經過Cloudfront CDN加速

[Part 1]React App 經過 AWS S3 存儲，cloudfront CDN 加速並經過Google Search Console 作搜索引擎優化 SEO

第一部分：將React App上傳到AWS S3 並經過Cloudfront CDN加速

建立React App

最方便的方式就是經過官方的Create-react-app來建立。create-react-app默認安裝的環境參數和軟件包可見我以前的博客：https://brucediscovery.com/20...

npx create-react-app my-app

建立好網頁的應用後，咱們經過npm run build來生成對應的生產環境版本的React應用。

AWS S3 存儲桶

建立存儲桶

在對應的服務頁面，選擇建立存儲桶。

若是選擇將網頁的App放在自有的域名上而不是AWS的域名，須要將存儲桶的名稱改成對應的域名名稱。

以本博客網址爲例：brucediscovery.com。 在建立存儲桶時，存儲桶的名稱要改成brucediscovery.com。

取消阻止訪問的權限是爲了下一步將咱們本身的存儲桶策略寫入S3中，若是不事先取消，是沒有辦法寫入咱們本身的策略的。

配置存儲桶

第一步咱們要將本身的存儲桶賦予外部的訪問權限，這樣，其餘的人才可以訪問到咱們存放在S3上的網頁。

點擊權限，存儲桶策略，複製以下的存儲桶策略代碼：

須要注意的是，將*XXX存儲桶的名稱XXX*替換爲你建立S3時的存儲桶名稱。
若是以本博客爲例的話，XXX存儲桶的名稱XXX須要替換爲brucediscovery.com。

{  
 "Version": "2012-10-17", "Statement": \[ { "Sid": "PublicReadForGetBucketObjects", "Effect": "Allow", "Principal": "\*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::XXX存儲桶的名稱XXX/\*" } \]}

該段策略的大意是說，容許（"Effect": "Allow"）外部的任何人（"Principal": "*"）來讀取（"Action": "s3:GetObject"）這個存儲桶（"Resource":）內的信息。

設置完成後，我我的建議在權限，阻止公共訪問權限中將"阻止所有公共訪問權限"設置爲打開，並取消勾選最後一個選項（或者直接勾選前三個服務）。最後一個選項須要取消勾選，不然沒法實現公共訪問。這樣的話，可以進一步保護存儲桶咱們已經設置好的公共訪問權限不會被更改。

第二步，咱們須要開啓網頁託管。

打開屬性，靜態網站託管。

勾選使用此存儲桶託管網站。

在索引文檔選項下，寫入index.html,一樣在錯誤文檔下，也須要寫入index.html，點擊保存。

這裏錯誤文檔也須要寫入index.html的緣由是，由於React做爲單網頁的應用，只具備一個html文檔，就是index.html。雖然React router可讓網頁的前端看起來有網頁的跳轉功能，但實際上，這種功能是經過javascript寫入瀏覽器的網頁歷史中。

所以，當S3託管網站時，就只有頂級域名的html文件，而若是訪問其餘子域名，由於沒法轉到對應路徑的html文件，就會回傳404。

以本博客網頁爲例，當訪問brucediscovery.com時，可以正確顯示網頁，但若是訪問brucediscovery.com/tech時，就會產生404。

因此咱們須要讓404的狀況自動跳轉到index.html，這樣，javascript就可以抓到網頁歷史中的路徑並顯示對應的網頁。

將本地的React App上傳

最笨的方法，就是咱們把public文件夾下的全部文件，都手動上傳到S3上。可是，考慮到咱們的網頁可能會不斷的更新，咱們若是每次都手動就會很麻煩，所以，咱們採用AWS的cli（command line interface）來實現一鍵上傳。

AWS cli 一鍵部署

爲了可以使用aws cli，咱們須要兩個步驟來完成。第一步，安裝cli，第二步，爲咱們的本地cli申請訪問AWS服務的權限。

安裝aws cli

根據你本身的操做系統，選擇對應的AWS Cli安裝方法並安裝，連接以下：AWS Cli version 2.

由於個人操做系統是Mac OS，只想要使用command line，不要GUI，就按照以下的步驟安裝：Installing using the macOS command line

安裝好以後，咱們就須要配置用戶權限，從而使得cli工具可以訪問AWS的服務。

IAM用戶管理

咱們找到AWS服務中的Identity and Access Management (IAM)。

點擊左側菜單，訪問管理中的用戶，咱們點擊添加用戶，來管理咱們AWS S3的服務。

在第一步這裏，由於咱們的用戶主要是用來管理S3的上傳功能，所以，起名爲s3-upload。在訪問類型下，勾選編程訪問。

第二步，咱們須要將這個用戶添加到已有的用戶組中，由於咱們以前並無建立任何的用戶組，所以，須要建立一個用戶組。咱們點擊建立組。

在建立組這個目錄下，咱們這個用戶組的主要功能就是管理咱們的AWS S3存儲桶服務，所以，咱們將組名命名爲S3，並在策略中篩選和S3有關的服務。

在搜索框中咱們輸入S3，在結果中咱們勾選"AmazonS3FullAccess"來管理全部的S3服務，點擊建立組就完成了用戶組的建立。

而後咱們一路點擊下一步，直到建立用戶。

建立用戶成功後，咱們會看到一個安全憑證頁面以下圖，這就是咱們須要配置AWS cli的用戶信息。咱們先不要關閉這個頁面，打開咱們的電腦終端。

配置AWS cli

在terminal中，咱們輸入以下的指令來配置aws cli。

aws configure

在這以後，會一行一行的顯示出咱們須要輸入的指令信息:

AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY  
Default region name [None]: us-west-2  
Default output format [None]: json

"AWS Access Key ID" 對應的就是咱們網頁中的訪問密鑰ID，咱們直接複製粘貼。"AWS Secret Access Key "則是咱們"私有訪問密鑰"對應的值,須要點擊顯示才能看到，也是複製粘貼便可。
"Default region name"這個是默認的服務地區，由於比較窮，我選的是美東弗吉尼亞，代號是"us-east-1"，填入便可。這個信息能夠在AWS網頁的右上角地區裏查看，就在用戶名的右側。這個也能夠先空着，在具體使用cli時再指明便可。
"Default output format"我直接略過了，回車。咱們的cli設定就大功告成。

React 添加AWS 指令

如今咱們的AWS cli已經配置完成，爲了一鍵上傳，咱們要在咱們的React App中設置對應的cli 指令。

咱們打開"package.json" 文件，在script指令區域,咱們添加deploy指令以下：

"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "sitemap": "babel-node src/util/sitemap/sitemap-generator.js", "deploy": "aws s3 sync build/ s3://shortcutmac.com" #deploy 指令 },

這裏面要注意把"shortcutmac.com"替換成你的S3存儲桶名稱，這個command的意思是，把build目錄下的文件，同步到S3對應的存儲桶下。

若是以前沒有設置區域的話，或者默認的區域和S3服務的區域不一樣，還須要指明S3對應的區域信息，例如：

"deploy": "aws s3 sync build/ s3://shortcutmac.com --region ap-east-1",

在這裏，個人S3存儲桶服務沒有放在我默認的區域中（us-east-1），而是選擇了香港(ap-east-1).

好了。咱們這時就能夠跑以下的指令，生成對應的react 生產版本文件，並上傳到AWS 的S3存儲桶內。

npm run build  
npm run deploy

此時，咱們回到AWS S3服務，打開屬性，靜態網站託管，點擊終端節點中的網址就可以看到你本身的網頁啦。

http://shortcutmac.com.s3-web...

固然，對大部分人來講，這是不夠的，所以，咱們經過將S3存儲桶的網址導航到本身的域名上，來進行訪問。

（固然這裏最簡單的方式是在DNS設置中將本身的域名CNAME指向S3的網址，可是這裏咱們想要採用HTTPS進一步保護本身的網站並採用CDN來加速訪問來得到更好的用戶瀏覽體驗。）

AWS cloudfront來加速並將網頁導航到本身的域名上

Route 53 託管本身的域名

首先在Route 53中建立託管區域，並將本身的域名信息填入。

以後在本身的域名註冊商那裏，把Route 53新域名NS的記錄值填入，並保存。

此時，Route 53將提供你本身域名的DNS服務，而且能夠用Amazon自家的證書服務，爲你的域名申請SSL證書。

SSL 證書

在AWS的服務中選擇certificate manager，並選擇預置證書，點擊開始使用。

此後，選擇請求共有證書，點擊請求證書。

在添加域名選項中，寫入本身須要申請證書的域名,若是有多個域名，須要點擊添加另外一個名稱添加另外一個域名。而後選擇下一步。

以我本身的react 項目shortcutmac.com爲例，我申請了兩個域名www.shortcutmac.com 和shortcutmac.com 。由於我提供的只有網頁的服務，就只有兩個域名須要申請。

由於咱們的域名DNS服務就是由AWS提供的，所以，咱們選擇DNS驗證，會很是方便。（郵件驗證須要每隔一段時間驗證一次，DNS配置好後就不須要再進行反覆驗證）

下一步以後，請求證書。若是DNS服務是由AWS的Route53提供的，咱們能夠直接點擊"在 Route 53 中建立記錄"，Route 53會自動幫咱們在DNS中設置證書的驗證。

等一段時間後刷新，SSL證書就會頒發給咱們的域名啦。

HTTP是一種文件的傳輸方式，它的缺點是在這個文件傳輸路徑上的人都可以看到裏面的內容，就至關於咱們在裸奔。SSL是一套加密協議，有了這個協議，咱們就穿上了衣服。其餘人也沒法得到你訪問的網頁信息，他們看到的只是一堆亂碼，這就至關於穿上厚衣服，胸小了看不出來哈。

但SSL並不可以隨意頒發，它須要有認證的機構進行頒發，同時也須要頒發者證實他們持有這個域名。所以，咱們須要從權威的機構（AWS certificate manager）證實咱們持有域名（能夠更改域名的DNS信息），從而授予SSL證書。

Cloudfront 加速

好了，這裏咱們採用AWS的cloudfront服務來加速咱們的站點，在cloudfront服務中咱們點擊建立分配，選擇web入門。

在下面這個設置頁面中有不少咱們須要一一設置的。

首先是原域名。這裏須要注意的是咱們不可以直接在下拉菜單中選擇咱們的S3存儲桶路徑。由於此處給出的存儲桶路徑並無註明區域的信息，咱們的存儲桶不一樣於cloudfront是全球分佈的，而是分佈於AWS的某一數據中心中。

所以，咱們須要抓到本身S3存儲桶的位置信息，咱們須要在新的頁面中打開AWS S3存儲桶服務，在靜態網站託管中找到咱們終端節點的網站信息。複製"http://"以後的網址並放入原域名當中，這樣，咱們的S3存儲桶連帶着它的區域信息就被cloudfront識別到了。

這裏推薦設置的另外一個是"默認緩存行爲設置"下的"查看器協議策略"，咱們選擇"將 HTTP 重定向到 HTTPS"。由於咱們已經申請了SSL證書，將用戶裸奔的HTTP訪問轉化爲加密的HTTPS訪問可以進一步保護用戶的隱私。

下面在"分配設置"中，在備用域名選項填入你想要讓域名得到此CDN加速服務的域名。

一樣以個人小網站爲例，由於我只有兩個域名須要做爲個人網站，我只填入www.shortcutmac.com 和shortcutmac.com 。多個域名須要用逗號或者空行隔開。

在SSL證書中選擇"自定義 SSL 證書"，並在下拉菜單中找到咱們已經申請的SSL證書。這裏須要注意的是，咱們在備用域名中填入的域名要提早在certificate manager申請SSL纔可以使用。

而後點擊右下角的建立分配，咱們的CDN服務就建立完成了！

由於CDN服務要在全球部署，須要消耗一些時間，能夠活動一下，半個小時後繼續咱們的項目。

Route 53 接上 CDN

刷新cloufront 分配頁面，當咱們的狀態顯示爲已部署後，咱們就能夠去作最後一步了。

咱們打開Route 53服務，在咱們的域名下方選擇建立記錄集，在類型中咱們選擇"A-IPv4 地址"，而後咱們別名中選擇是，（由於咱們的CDN服務是由
埃文斯、提供的，不須要網址來導航），在別名目標的下拉菜單中咱們找到"–– cloudfront 分配 –– "下咱們的cloudfront項目，並選擇。

點擊保存記錄集，咱們的網站shortcutmac.com如今就經過CDN進行加速啦，並且有HTTPS的保護。

大功告成！在下一篇博客中，咱們將把咱們已經作好的react網站經過Google Search
Console進行搜索引擎優化。由於咱們若是隻是丟一個網站在互聯網中，真的是滄海一粟，很難被其餘人發現，所以，咱們須要作SEO，當其餘人搜索到和咱們相關的關鍵詞時，咱們就可以將本身的網站展現出來。

Part 2 React App 經過 AWS S3 存儲，cloudfront CDN 加速並經過Google Search Console 作搜索引擎優化 SEO

由於須要上傳的圖片太多了，傳不過來，能夠訪問個人博客看原文：https://brucediscovery.com/20...