このチュートリアルでは、AWS CodeStar と AWS Cloud9 を使用して、Node.js のサーバーレスウェブアプリケーションを開発、構築、デプロイする方法を学習します。開発者にとって、自動化されたソフトウェア開発ワークフローをセットアップすることは、時間のかかる、きめ細かなタスクです。AWS CodeStar は、AWS で迅速にアプリケーションを開発、構築、デプロイできるようにするソフトウェア開発ツールです。CodeStar を使用すると、継続的デリバリーのツールチェーン全体を数分でセットアップできるため、コードのリリースをすぐに開始できます。

Cloud9 は、コードを記述、実行、デバッグできるクラウドベースの IDE です。Cloud9 には、一般的な多数のプログラミング言語 (JavaScript、Python、PHP など) に不可欠なツールがあらかじめパッケージ化されているため、さまざまなコンパイラやツールチェーンのインストールを検討する必要はありません。

これから数分間で、AWS CodeStar を使用して、AWS Lambda ベースの新しい Node.js サーバーレスウェブアプリケーションを構築します。AWS CodeStar を用いて継続的デリバリーのツールチェーンをセットアップしますが、その際、ソース管理には AWS CodeCommit を、リリースプロセスの自動化には AWS CodePipeline を使用します。そして、Node.js プロジェクトでコードにいくつかの変更を加え、その変更をコミットします。これにより、継続的パイプラインをトリガーして、プロジェクトを再デプロイします。

このチュートリアルで使用する AWS のサービスは AWS 無料利用枠の適用内です。

このチュートリアルには AWS アカウントが必要です

無料アカウントの作成

AWS CodeStar または AWS Cloud9 には追加料金はかかりません。このチュートリアルで作成するリソースは無料利用枠の対象です。

AWS 無料利用枠の詳細 »

AWS マネジメントコンソール を開きます。このステップバイステップガイドは開いたままにしておいてください。右の画面が読み込まれたら、ユーザー名とパスワードを入力して、作業を開始します。検索バーに「CodeStar」と入力し、[CodeStar] を選択して CodeStar コンソールを開きます。

build-serverless-app-codestar-cloud9-00

(クリックして拡大)

build-serverless-app-codestar-cloud9-00

このステップでは、CodeStar をセットアップし、サーバーレスの AWS Lambda Node.js プロジェクトを作成およびデプロイします。


a.CodeStar のホームページで、[Start a project] をクリックします。

 

build-serverless-app-codestar-cloud9-01

(クリックして拡大)

build-serverless-app-codestar-cloud9-01

b.CodeStar では、ユーザーに代わって AWS リソースの管理を行います。この機能を有効にするには、CodeStar で AWS サービスロールを作成する必要があります。[Create service role] ダイアログで、[Yes, create role] をクリックします。

build-serverless-app-codestar-cloud9-01a

(クリックして拡大)

build-serverless-app-codestar-cloud9-01a

c.[Choose a project template] ページで、Node.js テンプレートを選択します。これにはウェブアプリケーションと AWS Lambda が含まれます。CodeStar を使用すると、ウェブサイト、ウェブアプリケーション、ウェブサービス、Alexa スキルなどのさまざまなアプリケーションの開発が可能になります。Java、JavaScript、PHP、Ruby、C#、Go、HTML、Python で開発できます。

build-serverless-app-codestar-cloud9-02

(クリックして拡大)

build-serverless-app-codestar-cloud9-02

d.[Project details] ページで、プロジェクト名に「nodejs-serverless-project」と入力します。AWS CodeCommit を選択したことを確認し、[Next] を選択します。

build-serverless-app-codestar-cloud9-03

(クリックして拡大)

build-serverless-app-codestar-cloud9-03

e.[Review project details] ページで、CodeStar によって完全な継続的インテグレーションのパイプラインがセットアップされることを確認します。バージョンコントロールには CodeCommit が、構築とテストには AWS CodeBuild が、Lambda へのデプロイには AWS CloudFormation が使用されています。また、CodeStar では Amazon CloudWatch を使用してアプリケーションのモニタリングを行います。[Create Project] を選択します。

build-serverless-app-codestar-cloud9-04

(クリックして拡大)

build-serverless-app-codestar-cloud9-04

f.[Set up tool] ページの [Pick how you want to edit your code] で、[AWS Cloud9] を選択してから [Next] を選択します。

build-serverless-app-codestar-cloud9-05

(クリックして拡大)

build-serverless-app-codestar-cloud9-05

g. [Set up your AWS Cloud9 environment] ページの [Recommended instances] で、[t2.micro] を選択してから [Next] を選択します。Cloud9 IDE は、このインスタンスで実行されます。これにはブラウザを使用してアクセスします。

build-serverless-app-codestar-cloud9-06

(クリックして拡大)

build-serverless-app-codestar-cloud9-06

h. AWS CodeStar で CodeStar プロジェクトがセットアップされ、Cloud9 IDE からアクセスできるようになりました。数分で、「Success! Your project and IDE are set up and ready to use」というメッセージが表示されます。

build-serverless-app-codestar-cloud9-07

(クリックして拡大)

build-serverless-app-codestar-cloud9-07

i.プロジェクトダッシュボードが表示されます。[Application endpoints] というタイルを探し、水平のバーの間にあるリンクを選択します。新しい Node.js アプリケーションが、新しいタブまたはウィンドウに表示されます。 継続的デプロイのプロセスが完了すると、待機中であることを示すために表示されていた立方形のアイコンが消えます。

build-serverless-app-codestar-cloud9-08

(クリックして拡大)

build-serverless-app-codestar-cloud9-08

このステップでは、Cloud9 を使用してアプリケーションのコードに変更を加え、その変更を CodeCommit にコミットします。これにより、CodeBuild を使用したコードのビルドと CloudFormation を使用した Lambda へのデプロイを自動的にトリガーするよう CodePipeline に指示が伝えられます。


a.AWS CodeStar ダッシュボードに戻り、[Start coding] を選択します。これで、CodeStar によって git リポジトリが Cloud 9 環境にクローンされ、ブラウザで Cloud9 IDE が開きます。Cloud9 IDE の下部の bash タブで、以下のコマンドを使用してディレクトリを変更し、コーディングを開始します。

cd /home/ec2-user/environment/nodejs-serverle
build-serverless-app-codestar-cloud9-09

(クリックして拡大)

build-serverless-app-codestar-cloud9-09

b.新しい Cloud 9 環境をセットアップするときに、以下のコマンドを実行して git の「user.name」「user.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 ファイルが開きます。

build-serverless-app-codestar-cloud9-10

(クリックして拡大)

build-serverless-app-codestar-cloud9-10

d.ほとんどの IDE と同様に、Cloud9 にはテキストの編集と検索に利用可能なショートカットキー操作が用意されています。変更対象のコードを見つけるには、macOS では Command-F、Windows と Linux では Ctrl + F を押します。検索バーで「appl」とタイプすると、Cloud9 エディタではスクロールが実行されて、62 行目の、または 62 行目あたりの「appl」という文字列がハイライト表示されます。

build-serverless-app-codestar-cloud9-11

(クリックして拡大)

build-serverless-app-codestar-cloud9-11

e.Cloud9 IDE で、「application」という単語の後に 3 つの感嘆符を追加して、macOS では Command-S、Windows と Linux では Ctrl + S というキーの組み合わせを押して変更を保存します。

build-serverless-app-codestar-cloud9-12

(クリックして拡大)

build-serverless-app-codestar-cloud9-12

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
build-serverless-app-codestar-cloud9-14

(クリックして拡大)

build-serverless-app-codestar-cloud9-14

h. CodeCommit で変更をマスターブランチにプッシュしたら、CodePipeline によって継続的デプロイのプロセスがトリガーされます。AWS CodeStar ダッシュボードにアクセスして [Continuous deployment] というタイルまで下にスクロールし、プロセスをモニタリングします。数分の間に、コードが [Source] ステージから [Build] ステージを通過して、最終的に [Deploy] ステージに移動することを確認できます。

build-serverless-app-codestar-cloud9-15

(クリックして拡大)

build-serverless-app-codestar-cloud9-15

i.[Deploy] に到達したら、CodeStar の [Application endpoints] タイルの URL を選択し、本番のウェブアプリケーションに変更が反映されていることを確認します。ブラウザでページが読み込まれたら、追加した感嘆符が含まれていることを確認してください。

build-serverless-app-codestar-cloud9-16

(クリックして拡大)

build-serverless-app-codestar-cloud9-16

このステップでは、CodeStar プロジェクト、Cloud9 環境、およびすべての関連リソースを終了します。

重要: あまり使用されていないリソースを終了することは、コストの削減につながるベストプラクティスです。リソースを終了しないと、料金が発生する場合があります。


a.CodeStar コンソールのメインページにアクセスして [AWS CodeStar]、[ellipsis] の順に選択し、[Delete] を選択します。

build-serverless-app-codestar-cloud9-17

(クリックして拡大)

build-serverless-app-codestar-cloud9-17

b.[Delete project] 画面で、テキストボックスに「nodejs-serverle」と入力し、[Delete] を選択します。

AWS CodeStar と AWS Cloud9 を使用して、AWS Lambda ベースの Node.js サーバーレスウェブアプリケーションを構築、開発、デプロイすることができました。

AWS CodeStar は、ウェブサイト、ウェブアプリケーション、ウェブサービス、Alexa スキルなどのさまざまなアプリケーションを開発、構築、デプロイするために最適な選択肢です。Java、JavaScript、PHP、Ruby、C#、Python で開発できます。

AWS Cloud9 は、JavaScript、Python、PHP でのコードの記述、実行、デバッグに最適な IDE です。さまざまなコンパイラやツールチェーンをセットアップして維持する必要はありません。

これで、AWS CodeStar と AWS Cloud9 を使用してサーバーレスアプリケーションを構築する方法を確認できました。さらに学習するには、以下のオプションのいずれかを選択してください。

IDE を AWS CodeStar と統合する

お好みの環境でコードを記述して開発し、CodeStar にプッシュしてください。

IDE を AWS CodeStar と統合する »

AWS CodeStar チームと協力する

他のユーザーの AWS CodeStar プロジェクトへのアクセスを承認することによって、他のユーザーと協力しましょう。

AWS CodeStar チームに他のユーザーを追加する »

AI ブログ

Cloud9 の統合開発環境をセットアップおよびカスタマイズしてください。

Cloud9 をカスタマイズする»

はい
いいえ