利用 AWS CodeStar 和 AWS Cloud9

在本教學課程中,您將學習如何使用 AWS CodeStar 和 AWS Cloud9 開發、建立、部署 Node.js 無伺服器 web 應用程式。身為開發人員,設置自動化的軟體開發工作流程是一項耗時又瑣碎的工作。AWS CodeStar 是一個軟體開發工具,可讓您在 AWS 上迅速開發、建立及部署應用程式。使用 CodeStar,您可以在最短的時間內設定持續交付工具鏈,讓您可以更快速地開始發佈程式碼。

Cloud9 是用來編寫、執行、偵錯程式碼的雲端 IDE。Cloud9 內含許多熱門程式設計語言 (包括 JavaScript、Python、PHP 等) 的重要工具,讓您不必忙於安裝各種編譯器和工具鏈。

在接下來的幾分鐘,您將使用 AWS CodeStar 建立一個以 AWS Lambda 為基礎的 Node.js 無伺服器 web 應用程式。您將使用 AWS CodeStar 設定持續交付工具鏈,包括以 AWS CodeCommit 進行原始碼控制,以 AWS CodePipeline 將您的發佈程序自動化。接著您要使用 Cloud9 變更 Node.js 專案的部分程式碼,然後遞交變更以觸發您的連續管道,並重新部署您的專案。

您在本教學中使用的 AWS 服務包含在 AWS 免費方案中。

本教學需要 AWS 帳戶

建立免費帳戶

使用 AWS CodeStar 或 AWS Cloud9 無需額外付費。您在本教學建立的資源符合免費方案資格。

查看 AWS 免費方案詳細資訊 »

開啟AWS Management Console (AWS 管理主控台),以便讓此逐步指南保持開啟狀態。當畫面載入時,輸入您的使用者名稱和密碼以開始使用。接著在搜尋列中輸入 Codestar,然後選擇 CodeStar 以開啟 CodeStar 主控台。

(按一下以縮放)

在此步驟中,您將設定 CodeStar,然後建立和部署無伺服器的 AWS Lambda Node.js 專案。


a.在 CodeStar 首頁中,選取 Start a project (開始專案)

 

(按一下以縮放)


b.CodeStar 可以協助代表您管理 AWS 資源,為了啟用此功能,CodeStar 需要為您建立一個 AWS 服務角色。在 Create service role (建立服務角色) 對話方塊中,選擇 Yes, create role (是的,建立角色)

(按一下以縮放)


c.在 Choose a project template (選擇專案範本) 頁面上,選擇包含 web 應用程式和 AWS Lambda 的 Node.js 範本。您可以使用 CodeStar 開發各種應用程式,例如網站、web 應用程式、web 服務、Alexa 技能。您可以 Java、JavaScript、PHP、Ruby、C#、Go、HTML、Python 進行開發。

(按一下以縮放)


d.在 Project details (專案詳細資訊) 頁面上的 Project name (專案名稱) 輸入 nodejs-serverless-project。確認您已選取 AWS CodeCommit,然後選取 Next (下一步)​。

(按一下以縮放)


e.在 Review project details (檢閱專案詳細資訊) 頁面中,請注意 CodeStar 將設置完整的持續整合管道,包括使用 CodeCommit 進行版本控制、使用 AWS CodeBuild 進行建立和測試、使用 AWS CloudFormation 部署到 Lambda。此外,CodeStar 將使用 Amazon CloudWatch 監控您的應用程式。選擇 Create project (建立專案)

(按一下以縮放)


f.在 Set up tool (設定工具) 頁面上,請在 Pick how you want to edit your code (選擇您要編輯程式碼的方式) 選取 AWS Cloud9,然後選取 Next (下一步)

(按一下以縮放)


g.在 Set up your AWS Cloud9 environment (設定您的 AWS Cloud9 環境) 頁面中,請在 Recommended instances (建議的執行個體) 選取 t2.micro,然後選取 Next (下一步)。​Cloud9 IDE 將在此執行個體上執行,而您將透過瀏覽器進行存取。

(按一下以縮放)


h.現在,AWS CodeStar 將設定您的 CodeStar 專案,並將其與您的 Cloud9 IDE 連線。幾分鐘後,您將收到成功! 您的專案和 IDE 已設定好,可開始使用訊息。

(按一下以縮放)


i.系統很快會顯示您的專案儀表板。找到 Application endpoints (應用程式端點) 圖磚,選擇水平長條之間的連結。您的新 Node.js 應用程式應會在新的標籤或瀏覽器視窗中顯示。 當您的連續部署程序完成時,等待圖示方塊將繼續顯示然後消失。

(按一下以縮放)

在此步驟中,您將使用 Cloud9 變更您的應用程式程式碼,然後將變更遞交到 CodeCommit,CodeCommit 會叫 CodePipeline 自動觸發程式碼的建置 (透過 CodeBuild) 以及部署到 Lambda (透過 CloudFormation)。


a.回到 AWS CodeStar 儀表板,選取 Start coding (開始編寫程式碼)。​現在,CodeStar 會將您的 git 儲存庫複製到您的 Cloud9 環境,並在您的瀏覽器中開啟 Cloud9 IDE。在 Cloud9 IDE 底部的 bash 標籤中變更目錄,以便以下列命令開始使用您的程式碼:

cd /home/ec2-user/environment/nodejs-serverle

(按一下以縮放)


b.在您使用以下命令設定新的 Cloud9 環境時,設定 git user.nameuser.email 是最佳實務:

git config --global user.name YOUR_USER_NAME
git config --global user.email YOUR_EMAIL_ADDRESS

c.現在您的環境已設定完成,您可以開始開發應用程式。在 Cloud9 IDE 中,選取左側的 Navigate (瀏覽) 標籤,然後選取 index.html。​會在您的 Cloud9 IDE 中開啟 index.html 檔案。

(按一下以縮放)


d.和大多數 IDE 一樣,Cloud9 有編輯和尋找文字的快捷鍵。若要尋找要變更的程式碼,在 macOS 上可使用 Command-f,在 Windows 上可使用 Ctrl-f,在 Linux 上可使用 Ctrl-f。在 find (尋找) 搜尋列中輸入 appl,Cloud9 編輯器將捲動到 appl 字串並加以反白,大約在第 62 行。

(按一下以縮放)


e.在 Cloud9 IDE 中,在 application 之後加上 3 個驚嘆號,然後使用按鍵組合 (macOS 為 Command-s,Windows 為 Ctrl-s,Linux 為 Ctrl-s) 儲存變更。

(按一下以縮放)


f.使用 Cloud9 IDE 底部的 bash 標籤,輸入以下命令來確認您已儲存變更:

git status

如果 git 傳回紅色的 modified: public/index.html,表示您已成功儲存變更,您可以開始進行變更階段流程和遞交變更。

如果 git 傳回 nothing to commit, working tree clean,則您需要在 Cloud9 IDE 中儲存您的變更。


g.現在,在 CodeCommit 上使用以下命令進行變更階段流程、遞交變更,並將變更進送到 git 中的主要分支:

  git add public/index.html
  git commit -m "add three bangs"
  git push origin master

(按一下以縮放)


h.在 CodeCommit 中將變更推送到主要分支後,CodePipeline 會觸發連續部署程序。使用您的 AWS CodeStar 儀表板並捲動到 Continuous deployment (連續部署) 圖磚,即可監控程序。幾分鐘後,您會看到程式碼從 Source (原始碼) 階段、經過 Build (建立) 階段,最終進入 Deploy (部署) 階段。

(按一下以縮放)


i.一旦程式碼到達 Deploy (部署),請選取 CodeStar Application endpoints (應用程式端點) 圖磚中的 URL,來確認您的變更已到達您的即時 web 應用程式。當您的瀏覽器載入頁面後,請確認其中有您加入的驚嘆號。

(按一下以縮放)

在此步驟中,您將終止 CodeStar 專案、Cloud9 環境以及所有相關資源。

重要:終止非使用中的資源可降低成本,這是最佳實務。未終止資源可能產生費用。


a.若要存取 CodeStar 主控台主要頁面,選取 AWS CodeStar,選取省略符號,然後選取 Delete (刪除)。​

(按一下以縮放)


b.在 Delete project (刪除專案) 畫面的文字方塊中輸入 nodejs-serverle,然後選取 Delete (刪除)

您已使用 AWS CodeStar 和 AWS Cloud9 建立、開發、部署以 AWS Lambda 為基礎的 Node.js 無伺服器 web 應用程式。

AWS CodeStar 是開發、建立、部署各種應用程式 (例如網站、web 應用程式、web 服務、Alexa 技能) 的絕佳選擇。您可以 Java、JavaScript、PHP、Ruby、C#、Python 進行開發。

AWS Cloud9 是雲端 IDE,適合編寫、執行、偵錯 JavaScript、Python 或 PHP 程式碼,讓您不需要設定和維護多種編譯器和工具鏈。

現在您已學會如何使用 AWS CodeStar 和 AWS Cloud9 建立無伺服器應用程式,請選擇以下選項之一來進一步了解:

整合您的 IDE 與 AWS CodeStar

在您慣用的環境中編寫和開發程式碼,然後推送到 CodeStar。

整合您的 IDE 與 AWS CodeStar »

與 AWS CodeStar 團隊合作

將 AWS CodeStar 專案的存取權授予其他人,以便和他們合作。

將其他人加入您的 AWS CodeStar 團隊 »

AI 部落格

設定及自訂已整合 Cloud9 的開發環境。

自訂 Cloud9 »