AWSエンジニアが学習するAlibaba Cloud【Function Compute編 (6)】

普段AWSを主に利用しているエンジニアがAlibabaCloudを学習するために調べた情報や手順を紹介します。

今回の内容は

- start-web-frameworkの紹介(再掲)
- Javaフレームワークを実装および開発【開発用ECSインスタンス】
※Javaフレームワーク(Tomcat/JettyやSpringBoo,Quarkus)をServerless Devsで実装する為の事前準備

となります。

## ■ Disclaimer

本記事は掲載時点の情報であり、最新の情報とは異なる場合があります。
本記事は完全性、正確性、有用性、安全性などを保証するものではありません。
本記事をご利用の場合は自己責任にてお願いします。

## ■ Prerequisites

- Alibaba Cloudアカウントを作成済みであることを前提とします。
  - [Alibaba Cloud アカウントを作成](https://www.alibabacloud.com/help/ja/maxcompute/latest/create-an-alibaba-cloud-account)
- [AWSエンジニアが学習するAlibaba Cloud【Function Compute編 (5)】](https://qiita.com/junk87/items/a44670c6fb93b1ce7f82)までを実施済みの環境であることを前提とします。

## ■ Overview

### 1. start-web-framework

前回の再掲となりますが、start-web-frameworkはAlibaba Cloudを活用したのWebフレームワーク応用事例となります。
Alibaba CloudのFunction ComputeへWEBフレームワークをデプロイする方法が公開されています。
また、Serverless Devsのプロジェクトのデフォルトレポジトリにもなっているようです。

- start-web-framework
    - https://github.com/devsapp/start-web-framework/blob/master/readme_en.md

現在start-web-frameworkへ公開されているWebフレームワークのデプロイ方法は以下のとおりとなっています。
[start-web-framework](https://github.com/devsapp/start-web-framework/blob/master/readme_en.md)へ表記されているWebフレームワークと違いがありますが正しい表記はこちらとなります。
※[start-web-framework](https://github.com/devsapp/start-web-framework/blob/master/readme_en.md)の表記は修正中のようです

| Node.js   | Python   | PHP   | Go | Java | Others    |
| -- | -- | -- | -- | -- | -- |
| Express [custom]   | Flask [python3]   | Think PHP [custom]   | BeeGo   | Tomcat/Jetty | Gatsby   |
| Egg [custom]   | Tornado [custom]   | Laravel [custom]   | Gin [custom]   | SpringBoot [custom] | Hugo [custom]   |
| Nextjs [custom]   | Bottle [python3]   | Discuz [custom]   | -   | Quarkus | -   |
| Nuxtjs [custom]   | Web.py [python3]   | WordPress [custom]  | - | - | - |
| Hapi [custom]  |  Django [python3] | Zblog [custom] | - | - | - |
| Koa [custom]  |  FastAPI [custom] | Ecshop [custom] | - | - | - |
| Nest [custom]  |  Web2py | Metinfo [custom] | - | - | - |
| Midway-koa [custom]  |  Pyramid [python3] | Whatsns [custom] | - | - | - |
| Vue.js [custom]  |  - | Typecho [custom] | - | - | - |

今回はJavaフレームワークであるTomcat/JettyやSpringBoot、Quarkusをstart-web-frameworkを参考にServerless Devsで実装してみます。


## ■ Let’s Get Started

Python版まではCloudShell上よりServerless Devsを実行してきましたがJava版からは以下の流れで実装します。

1. 開発用ECSインスタンスを作成
1. Javaフレームワークを実装および開発【開発用ECSインスタンス】
1. 開発したソースコードをServerless Devsを用いてJavaフレームワークへデプロイ【Function Compute】

[前回](https://qiita.com/junk87/items/a44670c6fb93b1ce7f82)では「開発用ECSインスタンスを作成」を実施しましたので今回は

「Javaフレームワークを実装および開発【開発用ECSインスタンス】」

までを実施します。なお、開発についてはデモ画面の作成までとなります。

Javaフレームワークについては[start-web-frameworkのJavaフレームワーク例](https://github.com/devsapp/start-web-framework/tree/master/web-framework/java)で公開されているSpringBootをServerless Devsへデプロイする前提ですすめていきます。

また、本手順では管理画面から接続できる「ワークベンチ接続」を利用して開発用ECSインスタンスへ接続します。

#### 1.1. AlibabaCloudにサインイン

自分のアカウント（メールアドレス）とパスワードを入力の上、【サインイン】をクリックします。

![FunctionCompute_10001.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/646bbf8a-6b64-02d8-ead7-3d55f6f5e859.png)

#### 1.2. 開発用ECSインスタンスへの接続

ECS管理コンソールへ移動後、前回構築を行った開発用ECSインスタンスを選択します。

![ECS_50010.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/13a4aa35-ffbf-bb75-d8a4-dce6ae09df0d.png)

ECS管理コンソールのインスタンス詳細画面にて【接続】を選択します。
開発用ECSインスタンスが停止済みの場合は【起動】を選択後、【接続】を選択してください。

![ECS_50011.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/26b9234a-ee9b-b1d3-c699-36bce136939f.png)

接続とコマンド画面にて「ワークベンチ（デフォルト）」の【今すぐサインイン】を選択します。

![ECS_60004.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/e9063b44-9469-dcb4-e88a-d5d7f0fdd02d.png)


InstanceLogin画面にて[前回](https://qiita.com/junk87/items/a44670c6fb93b1ce7f82)RunInstanceコマンドにて入力したパスワードをPasswordの箇所へ入力後、【OK】を選択します。

![ECS_50013.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/93ec6532-0ad5-dd05-6b28-a60084cbd24b.png)

ECS管理コンソールからECSインスタンスへ接続できたことを確認します。

![ECS_50014.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/f3e503f6-a69d-4221-7583-006c38b33e30.png)

#### 1.3. Apache Mavenの導入

開発用ECSインスタンスは「CentOS Stream 9」で構築を行った為、[How to install Apache Maven on CentOS 9 Stream](https://unixcop.com/install-apache-maven-centos-9-stream/)の手順を参考に実施します。

本手順はApache Mavenに関する内容となりますので設定の詳細は省略します。
Apache Mavenについて詳細を理解したい方は[Apache Maven Project](https://maven.apache.org/)などをご確認ください。

##### 1.3.1. Java17のインストール

[How to install Apache Maven on CentOS 9 Stream](https://unixcop.com/install-apache-maven-centos-9-stream/)ではJava11をインストールしていますが、今回はSpringBootおよびFunctoin Computeの両方をサポートなおかつ最新版のJava17をインストールの上、バージョンを確認します。

```bash:
dnf install -y java-17-openjdk
java --version
```

##### 1.3.2. Mavenのダウンロード・展開およびシンボリックリンク作成

/opt以下にMaven3系の最新パッケージをダウンロードして展開の上、シンボリックリンクを作成します

```bash:
cd /opt
wget https://dlcdn.apache.org/maven/maven-3/3.9.0/binaries/apache-maven-3.9.0-bin.tar.gz
tar xzf apache-maven-3.9.0-bin.tar.gz
ln -s apache-maven-3.9.0 maven
```

##### 1.3.3. 環境変数の設定

mvnコマンドのPATHを通す為、環境変数を設定します。

```bash:
echo 'export MVN_HOME=/opt/maven' > /etc/profile.d/maven.sh
echo 'export PATH=${MVN_HOME}/bin:${PATH}' >> /etc/profile.d/maven.sh
source /etc/profile.d/maven.sh
```

##### 1.3.4. Mavenのバージョン確認

mvnコマンドを実行してMavenのバージョンを確認します。

```bash:
mvn --version
```

#### 1.4. SpringBootの導入

本手順はSpringBootに関する内容となりますので設定の詳細は省略します。
詳細を理解したい方は[Spring Boot リファレンスドキュメント](https://spring.pleiades.io/spring-boot/docs/current/reference/html/)などをご確認ください。

##### 1.4.1. SpringBootプロジェクトの雛形をダウンロード

Spring Bootプロジェクトの雛形を生成する[Spring Initializr](https://start.spring.io/)にアクセス後、下記項目を設定後、画面右の【ADD DEPENDENCIES】をクリックします。

- Project : Maven
- Language : Java
- Spring Boot : 2.7.9
- Project Metadata
    - Group : com.example
    - Artifact : springbootdemo
    - Name : springbootdemo
    - Description : SpringBootDemo project for Spring Boot
    - Package name : com.example.springbootdemo
    - Packaging : Jar
    - Java : 17

![ECS_60101.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/d6807ea9-d6c6-8393-b5b7-91b8bcc7ac6c.png)

DEPENDENCIESの追加画面にて【Spring Web】を選択します。

![ECS_60102.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/04df7be2-9401-15e2-b847-65b3c4f207da.png)

下記内容の設定になっていることを確認後、画面下の【GENERATE】をクリックしてZIPファイル(springbootdemo.zip)をダウンロードします。

![ECS_60103.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/9faa3ada-6e0d-4a4d-03b0-c3ff3e457571.png)

##### 1.4.2. ZIPファイル(springbootdemo.zip)をアップロード

SCPもしくはSFTPが利用可能なファイル送受信ソフト(WinSCP等)を使って開発用ECSインスタンスの/tmp以下へZIPファイル(springbootdemo.zip)をアップロードします。

##### 1.4.3. プロジェクトフォルダ(/opt/springboot)の作成

ZIPファイル(springbootdemo.zip)を/opt以下に移動後、展開してプロジェクトフォルダ(/opt/springboot)に移動します。

```bash:
cd /opt
mv -i /tmp/springbootdemo.zip /opt/
unzip springbootdemo.zip
cd springbootdemo
```

##### 1.4.4. デモ画面(index.html)作成

SpringBootアプリを実行した際に「Spring Bootアプリのデモ画面です」の文字を表示するデモ画面(index.html)をsrc/main/resources/static以下に作成します。

```bash:
vi src/main/resources/static/index.html
```

```html:src/main/resources/static/index.html
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Spring Boot Demo</title>
</head>
<body>
        <h1>Spring Bootアプリのデモ画面です</h1>
</body>
</html>
```

##### 1.4.5. コントローラークラス(DemoController.java)の作成

/demoへアクセスした際にデモ画面(index.html)を表示するコントローラークラス(DemoController.java)を作成します。

```bash:
vi src/main/java/com/example/springbootdemo/DemoController.java
```

```java:src/main/java/com/example/springbootdemo/DemoController.java
package com.example.springbootdemo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class DemoController {

    @RequestMapping(value="/demo")
    private String demo(){
        return "/index.html";
    }
}
```

##### 1.4.6. jarファイルの生成

Mavenのコマンドを実行してjarファイルを生成します。

```bash:
mvn install
```

上記コマンド完了後、lsコマンドを使用してtarget以下にjarファイルが作成されていることを確認します。

```bash:
ls -al target
```

#####  1.4.7. Mavenの起動

MavenのコマンドでSpringBootを起動します。

```bash:
mvn spring-boot:run
```

正常に起動した場合は下記のような画面となります。
次の手順の動作確認が終わり次第、[Ctrl + C] で終了します。

![ECS_60002.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/2889c73b-35eb-420e-6938-68c1123fbee5.png)

#####  1.4.8. 動作確認

ワークベンチ接続の画面より別ターミナルを開いた後、curlコマンドでアクセスしてデモ画面を確認します。

```bash:
curl http://localhost:8080/demo/
```

```html:動作確認結果
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Spring Boot Demo</title>
</head>
<body>
        <h1>Spring Bootアプリのデモ画面です</h1>
</body>
</html>
```

※赤枠の【+】をクリックすると別ターミナルを開きます
![ECS_60003.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/7253997a-a67d-7286-c1fe-b02e19025fd5.png)


以上で「Javaフレームワークを実装および開発【開発用ECSインスタンス】」は完了となります。

## ■ Next Time

次回は次の手順の「開発したソースコードをServerless Devsを用いてJavaフレームワークへデプロイ【Function Compute】」を実施します。