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

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

今回の内容は

- start-web-frameworkの紹介
- Function Computeを利用したWebフレームワーク(laravel)を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編 (2)】](https://qiita.com/junk87/items/aa19c264f835c20f40dd)を実施済みの環境であることを前提とします。

## ■ 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フレームワークのデプロイ方法は以下のとおりとなっています。


| 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] | - | - | - |


今回はPHP開発でメジャーなWEBフレームワークであるlaravelをstart-web-frameworkを参考にServerless Devsで実装してみます。

## ■ Let’s Get Started

### 1. Function Computeの実行（Serverless Devs）

今回はServerless Devsを利用してLaravelをデプロイの上、「Hello World」の表示するところまでを行います。
本手順は[前回](https://qiita.com/junk87/items/aa19c264f835c20f40dd)の続きとなる為、

-「AliyunFcDefaultRoleロール」の作成
-「RAMユーザー(serverlessdevstest)」の作成およびAccessKey/AccessKey Secret発行
-「RAMユーザー(serverlessdevstest)」へのAdministratorAccess権限追加

は実施済みの前提となります。


#### 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. CloudShellの起動

今回も検証の為、CloudShellよりServerlessDevsを実行します。
画面上のメニューより【CloudShell】をクリックします。

![FunctionCompute_10008.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/e978ac8e-20be-b8dd-5ae4-a51fb23dfa3f.png)

画面下にCloudShellのターミナルが表示されていることを確認します。

![FunctionCompute_10009.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/d0372798-de03-e572-45b1-b3e5403256f2.png)


#### 1.3. Serverless Devs developer toolsの導入

CloudShellのターミナル上より以下のコマンドを実行してServerless Devs developer toolsを導入します。
CloudShell以外で導入する場合はNode.js12以降を導入後に実行してください。

```
npm install @serverless-devs/s -g
```

![FunctionCompute_10009_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/0cc086be-f127-230c-2710-09e9c9752030.png)


#### 1.4. Serverless Devsのプロジェクトの初期化

Serverless Devs developer toolsを導入後、以下のコマンドを実行してプロジェクトを初期化します。
今回はinitの後ろに start-laravel を追加することでデフォルトレポジトリからLavavel のプロジェクトテンプレートを取得します。
initコマンドの詳細はDocの[init command](https://docs.serverless-devs.com/en/serverless-devs/command/init)をご確認ください。


```
s init start-laravel -d start-laravel
```

![FunctionCompute_10010.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/65b2b888-a163-74b6-9c22-3beb14bae7c2.png)

プロジェクトの初期化画面では以下の項目を入力または選択します。

- please input region
    - 東京リージョン(ap-northeast-1)を入力
- please input serviceName
    - Function Computeのサービス名を入力（今回は「FirstWebFlameworkServerlessDevs」と入力）
- please input functionName
    - Function Computeの関数名を入力（今回は「FirstWebFlameworkServerlessDevs」と入力）
- please select credential alias (Use arrow keys)
    - default_serverless_devs_access を選択

![FunctionCompute_10011.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/b7e6852d-9466-20a4-b210-79ee643dc190.png)


#### 1.5. Serverless Devsのプロジェクトデプロイ

プロジェクトの初期化が終わりましたらCloudShellのターミナル上より以下のコマンドを実行します。


```
cd start-laravel && s deploy -y
```

![FunctionCompute_10012.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/a91a74eb-b4ea-34dc-d356-64774844976b.png)


デプロイ完了後にデプロイ結果が表示されますので確認します。
デプロイ結果（今回の場合は「framework」以下）は動作確認にて必要となる為、控えておきます。

![FunctionCompute_10013.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/dbe92767-88f9-0714-18bd-8d00b76259ca.png)


デプロイ結果を控えていない場合は後ほど以下のコマンドを実行することで確認可能です。

```
cd [プロジェクト名]
s info
```

#### 1.6. Serverless Devsプロジェクト作成後の動作確認(初期画面)

デプロイ結果に出力されているURLに対して、ブラウザ(Chromeなど)やコマンド(curlなど)で動作を確認します。

- system_url : https://firstwelessdevs-firstwelessdevs-***********.ap-northeast-1.fcapp.run
    - 「Laravel」の初期画面が出力されたHTMLファイルを取得
- custom_domain : http://firstwebflameworkserverlessdevs.firstwebflameworkserverlessdevs.***********.ap-northeast-1.fc.devsapp.net
    - 「Laravel」の初期画面が表示

![FunctionCompute_10014.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/f239fc59-0944-8787-6508-34511ff40b97.png)


#### 1.7. Serverless Devsプロジェクト作成後のバージョン確認

Laravelのバージョン等はcomposer.jsonで確認可能です。
今回のプロジェクトではLaravel 5.8を利用していることがわかります。

```
cat ~/start-laravel/code/mylaravel/composer.json 
```

![FunctionCompute_10018.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/b30e18c9-a518-a201-c5f1-534bc9193eb1.png)

#### 1.8. 「Hello World」を追加実装

本手順はLaravelに関する内容となりますので設定の詳細は省略します。
詳細を理解したい方は[Laravel日本語ドキュメント](https://readouble.com/)などをご確認ください。

今回は

http://[デプロイ結果に出力されているURL(custom_domain)]/hello 

へアクセスすると「Hello World」を表示する設定を追加実装します。


LaravelはRouteファイル(web.php)にて「特定のURLにアクセスされた際にどのような処理をするのか」を定義している為、mylaravelディレクトリへ移動後、routesディレクトリ以下のweb.phpをviコマンドで開きます。

```
cd ~/start-laravel/code/mylaravel
vi routes/web.php
```

次に「/helloにアクセスを行った場合はhelloというviewファイルを利用して表示」の設定(下記行)を最終行に追加の上、保存します。

```
Route::get('/hello', function () {
    return view('hello');
});
```


最後にresoucesディレクトリ配下のviewsディレクトリ以下へhello.blade.php(Routeファイルにて指定したviewファイル)をviコマンドで新規作成します。

```
vi resources/views/hello.blade.php
```

hello.blade.phpには「Hello World」を表示するHTML(下記内容)を新規追加の上、保存します。

```
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
         Hello World
    </body>
</html>
```

#### 1.9. Serverless Devsプロジェクト作成後の動作確認(Hello World)

再度プロジェクトのデプロイを実施します。

```
cd ~/start-laravel && s deploy -y
```

デプロイ完了後、/helloを追記した下記URLに対して、ブラウザ(Chromeなど)やコマンド(curlなど)で動作を確認します。

- custom_domain : http://firstwebflameworkserverlessdevs.firstwebflameworkserverlessdevs.***********.ap-northeast-1.fc.devsapp.net/hello

正常に動作している場合は下記画面が表示されます。

![FunctionCompute_10019.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74171/0d87333d-9357-4f98-18b0-0b81fd0a6c8c.png)


## ■ Next Time

次回は別のWebフレームワークをServerless Devsで実装してみたいと思います。