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

## 前回の記事について
[AWS内で完結するウェブアプリケーションの作成 （仮想環境の構築編）](https://qiita.com/MMorioka/items/33e0eed7482fd03ee310)
[AWS内で完結するウェブアプリケーションの作成 （仮想環境へのサンプルアプリケーションの搭載編）](https://qiita.com/MMorioka/items/614452550fb3392d4414)
の続きです。先ずはこちらを参照いただければ幸いです。

## 作成条件
- 基本的にAWS内で完結させる。ローカルへのアプリダウンロード等は行わない。
- できる限り無料枠を利用する。
- AWSアカウントを所持していることを前提条件とする。
- [AWS内での仮想環境の構築](https://qiita.com/MMorioka/items/33e0eed7482fd03ee310)及び
[サンプルアプリケーションの搭載](https://qiita.com/MMorioka/items/614452550fb3392d4414)が完了していることを前提条件とする。

## 構築手順
### 作成したプロジェクトへのアクセス
AWSにログインし、[AWS マネジメントコンソール](https://us-east-2.console.aws.amazon.com/console/home?region=us-east-2#)に移動する。
![帰社日 画像集 (000).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/ea825795-0d72-37d1-8a8f-4bc384098f51.jpeg)

**開発プロジェクトを開始**をクリックする。
![帰社日 画像集 (6).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/c7883581-7d53-1c61-a87e-5dc7bd12dd31.jpeg)

[AWS内で完結するウェブアプリケーションの作成 （仮想環境へのサンプルアプリケーションの搭載編）](https://qiita.com/MMorioka/items/614452550fb3392d4414)
で作成したプロジェクトを選択する。
![帰社日 画像集.jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/f637f124-b571-c0dc-8611-e4fa644d921c.jpeg)

### サンプルアプリケーションの確認
ダッシュボードをクリックする
![帰社日 画像集 (16).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/3507d813-0ed7-68c9-3071-535d55a94be7.jpeg)

アプリケーションのエンドポイントのリンクをクリックする。
![帰社日 画像集 (17).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/47fb1fad-2703-2a45-83e3-25cf46a1617b.jpeg)

Amazonが用意したサンプルアプリケーション（ムービー）が再生される。
![帰社日 画像集 (18).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/12f8e0fd-c4c0-f04c-fc7f-2af4d120134d.jpeg)

### ソースコード改変
IDEをクリックする。
![帰社日 画像集 (19).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/aafd1380-fbe1-4d5d-3275-6ddda60a1b00.jpeg)

[AWS内で完結するウェブアプリケーションの作成 （仮想環境へのサンプルアプリケーションの搭載編）](https://qiita.com/MMorioka/items/614452550fb3392d4414)で作成したAWS Cloud9環境の**IDEを開く**を選択する。
![帰社日 画像集 (20).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/8b72e73c-46f4-7374-c840-2b451f5bf053.jpeg)

しばらくするとIDEが表示されるので、任意のソースコードを改変し、保存する。
今回は、ムービーの表示文字を**「Congratulations!」**から**「Hello! World.」**に変更する。
![帰社日 画像集 (21).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/08dc18ad-0cc3-f42b-2663-5bd474256c71.jpeg)

### ターミナルからのGit操作
IDE下部の+ボタンをクリック、**New Terminal**を選択する。
![帰社日 画像集 (22).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/a9a2063b-91a4-6409-b9b2-74eef9f94d7e.jpeg)

ターミナルからgitで変更箇所をpushする。
New Terminalに以下の文字を打ち込む。
※最初の2行は初回のみ
※git add xxx はmodified の横に表示された文字列（改変したソースコードファイルの場所）を入力。
複数のファイルを改変した場合はその分だけ入力する。
例
git add xxx(enter)
git add yyy(enter)
・・・ 

```bash
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](https://qiita-image-store.s3.amazonaws.com/0/243247/56559c3f-3fc8-fd30-ef7a-fc6fcfb3d13d.jpeg)


再びエンドポイントをクリックすると、ソースコード改変後のアプリケーションが再生される。
![帰社日 画像集 (25).jpg](https://qiita-image-store.s3.amazonaws.com/0/243247/211bf14a-5ee1-4425-36cf-44b1f05b2a5f.jpeg)

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

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