Edited at

AWS内で完結するウェブアプリケーションの作成 (アプリケーションの構築編)


前回の記事について

AWS内で完結するウェブアプリケーションの作成 (仮想環境の構築編)

AWS内で完結するウェブアプリケーションの作成 (仮想環境へのサンプルアプリケーションの搭載編)

の続きです。先ずはこちらを参照いただければ幸いです。


作成条件


構築手順


作成したプロジェクトへのアクセス

AWSにログインし、AWS マネジメントコンソールに移動する。

帰社日 画像集 (000).jpg

開発プロジェクトを開始をクリックする。

帰社日 画像集 (6).jpg

AWS内で完結するウェブアプリケーションの作成 (仮想環境へのサンプルアプリケーションの搭載編)

で作成したプロジェクトを選択する。

帰社日 画像集.jpg


サンプルアプリケーションの確認

ダッシュボードをクリックする

帰社日 画像集 (16).jpg

アプリケーションのエンドポイントのリンクをクリックする。

帰社日 画像集 (17).jpg

Amazonが用意したサンプルアプリケーション(ムービー)が再生される。

帰社日 画像集 (18).jpg


ソースコード改変

IDEをクリックする。

帰社日 画像集 (19).jpg

AWS内で完結するウェブアプリケーションの作成 (仮想環境へのサンプルアプリケーションの搭載編)で作成したAWS Cloud9環境のIDEを開くを選択する。

帰社日 画像集 (20).jpg

しばらくするとIDEが表示されるので、任意のソースコードを改変し、保存する。

今回は、ムービーの表示文字を「Congratulations!」から「Hello! World.」に変更する。

帰社日 画像集 (21).jpg


ターミナルからのGit操作

IDE下部の+ボタンをクリック、New Terminalを選択する。

帰社日 画像集 (22).jpg

ターミナルからgitで変更箇所をpushする。

New Terminalに以下の文字を打ち込む。

※最初の2行は初回のみ

※git add xxx はmodified の横に表示された文字列(改変したソースコードファイルの場所)を入力。

複数のファイルを改変した場合はその分だけ入力する。



git add xxx(enter)

git add yyy(enter)

・・・

ec2-user:~/environment $ git config --global user.name "(自分の名前)"

ec2-user:~/environment $ git config --global user.email "(自分のメールアドレス)"
ec2-user:~/environment $ pwd
/home/ec2-user/environment
ec2-user:~/environment $ ls
firstproject1 README.md
ec2-user:~/environment $ cd (プロジェクトID)
ec2-user:~/environment/firstproject1 (master) $ ls
appspec.yml buildspec.yml pom.xml README.md scripts src template.yml
ec2-user:~/environment/firstproject1 (master) $ git commit
On branch master
Your branch is up-to-date with 'origin/master'.

Changes not staged for commit:
modified: src/main/webapp/WEB-INF/views/index.jsp

no changes added to commit
ec2-user:~/environment/firstproject1 (master) $ git add src/main/webapp/WEB-INF/views/index.jsp
ec2-user:~/environment/firstproject1 (master) $ git commit -m "(好きなコミット名)"
[master 203f265] commit1
1 file changed, 1 insertion(+), 1 deletion(-)
ec2-user:~/environment/firstproject1 (master) $ git push
Counting objects: 8, done.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (8/8), 593 bytes | 296.00 KiB/s, done.
Total 8 (delta 3), reused 0 (delta 0)
To https://git-codecommit.us-east-2.amazonaws.com/v1/repos/firstProject1
a4c9ed7..203f265 master -> master
ec2-user:~/environment/firstproject1 (master) $


デプロイとテスト再生

ダッシュボードを開く。画面右側のDeployが「成功」になるまで待つ。

帰社日 画像集 (24).jpg

再びエンドポイントをクリックすると、ソースコード改変後のアプリケーションが再生される。

帰社日 画像集 (25).jpg

以上のように、ソースコード改変とデプロイを繰り返していくことで、サンプルアプリケーションを元に任意のウェブアプリケーションを構築できる。


最後に

以上で「AWS内で完結するウェブアプリケーションの作成」は終了となります。最後まで読んでいただき、ありがとうございました。