Next.jsベースのWebアプリケーションをAlibaba Cloud Function Computeでデプロイしてみる

1. 全体構成図

Alibaba Cloud Function Computeは、イベント駆動型のフルマネージドコンピューティングサービスです。ユーザーは、ビジネスコードを書くだけで、Function Computeサービス上に拡張性の高いWebアプリケーションを素早く構築できます。同時に、これらのアプリケーションは高可用性を備えた複数のデータセンターで実行できるため、スケーラビリティやバックアップの冗長性などの管理作業を行う必要がなくなります。今回、WebアプリケーションをFunction ComputeのServerless Application Centerを使うことで、ユーザーはアプリケーションデプロイ作業のためのStepとして build 、パッケージング、Publish といった追加作業を排除してくれます。そのため、Serverless Application CenterのGitOps機能により、アプリケーションの迅速なデプロイと管理を実現することができます。

＜参考＞

Alibaba Cloud Function Compute

アプリケーションシナリオ

Serverless Application Center

Serverless Application Centerは、Web開発フレームワークやWebアプリケーション、ML/AIら人工知能、ファイルおよびデータ処理など、さまざまな種類のサーバーレス専用アプリケーションテンプレートを提供しています。ここにはstable-diffusion、Springboot、Django、Flask、Expressなどの人気フレームワークやアプリケーションを含む約100種類のテンプレートがあり、ユーザーはこれらのテンプレートを直接設定するだけで、簡単にデプロイすることができます。さらにServerless Application Centerは、GitHubやGitLabなどのServerless Devs規格に準したCode Repositoryからアプリケーションテンプレートをインポートすることもサポートしており、迅速なデプロイと効率的な保守運用サービスを提供しています。

Serverless Application Centerには、Next.jsのアプリケーションテンプレートがあります。以降のステップでは、このテンプレートを使ってAlibaba Cloud上にNext.jsをデプロイします。

2. FCアプリケーションテンプレートを使用したNext.jsアプリケーションのデプロイ

Serverless Application Centerでは、テンプレートをデプロイする2つの方法を提供しています：

• 直接デプロイ（Directly Deploy）：この方法では、アプリケーションのコードを直接ライブ環境にデプロイします。ユーザーが後続のメンテナンスを手動で行う必要があり、CI/CDや他の機能の適用も自分で管理する必要があります。アプリケーションのデモンストレーションや初期体験に適しており、プロジェクトのソリューション選択や開発フレームワークの選定プロセスでよく使用されます。

• Code Repositoryからのデプロイ（Deploy from Code Repository）：アプリケーションセンターは関連するコードをCode Repositoryにプッシュし、パイプラインの設定を行います。これは正式なプロジェクト開発やリリースプロセスに適しています。

＜参考＞  Manage applications

`直接デプロイ（Directly Deploy）` を選択したアプリケーションは、コンソールでCode Repositoryを初期化することもできます。

今回、 `Code Repositoryからのデプロイ（Deploy from Code Repository）` を使って、Next.jsアプリケーションをデプロイします。Serverless Application Centerで、設定済みのNext.jsアプリケーションテンプレートを見つけます。

アプリケーションテンプレートの詳細ページでは、Serverless Devsツールを使ってNext.jsアプリケーションをローカルにデプロイする方法を説明しています。

`Create Now`ボタンをクリックして、アプリケーションの作成プロセスに入ります。デプロイ方法として、`Deploy from Code Repository`を選択します。

GitHubのCode Repositoryを例にとってみます。Serverless Application Centerに関連付けられたServerless Devs サービスに認証済みの GitHub アカウントがない場合、`User`および `Code Repository` ドロップダウン ボックスにデータがみつからないままになります。なので、 `Authorize`ボタンをクリックしてGitHubアカウントにログインし、Serverless DevsサービスアカウントのCode Repositoryに関連する権限を付与します。

認証に成功すると、操作の成功メッセージが表示された後、前のアプリケーション作成ページにジャンプします。

この時点で、認証されたGitHubアカウントのCode Repository情報が設定項目に自動的に入力されます。

アプリケーション、Code Repository、FCサービス、および機能に関連する構成情報を変更します。今回はサンプルアプリケーションとして、FC関連付けロールをデフォルト構成情報へアタッチします。Pipelineはクイック構成方式を選択することで、システムはデフォルトの環境とPipeline設定ファイルを作成します。そうすることで、GitHub Actionsと同様に、ユーザーはPipelineとタスクモデルでCI/CDプロセスを素早く構築することができます。

＜参考＞  Pipeline

`Create and Deploy Default Environment`ボタンをクリックすると、Serverless Application Centerが関連設定に基づいてアプリケーションと必要なデプロイ環境を作成します。

Serverless Application Centerでは、アプリの作成手順と実行状況がポップアップウィンドウにて表示されます。

アプリが正常に作成されると、アプリの詳細ページへジャンプします。この時システムは現在、アプリケーションを展開中となります。ユーザーは、バージョン、ステータス、ログなど、配置に関する情報をコンソール ページから表示できます。

デプロイに成功すると、ページにはメッセージとアプリケーションにアクセスするための URL が表示されます。

`Access Domain Name`で表示されるURLをクリックして、Next.jsをベースに開発されたサンプルWebアプリケーションにアクセスします。

3. Serverless Application CenterによるCI/CDの実装

アプリケーションの作成時にパイプラインを構築することで、ユーザーは独自のCI/CDプロセスを定義できます。上記のステップでは、デフォルトのパイプライン設定を使用しています。Code Repositoryのマスターブランチが更新されると、アプリケーションのデプロイメントステップが自動的にトリガーされます。

GitHubのCode Repositoryからサンプルプロジェクトのコードをダウンロードします。

インデックスページの更新後、更新したコードをCode Repositoryにプッシュします。Serverless Application Centerは自動的に最新のコードを取得し、アプリケーションを再デプロイしてくれます。

デプロイに成功したら、URLからインデックスページにアクセスして更新を見ることができます。

CI/CDプロセスは、Cloud IDEが提供するServerless Application Centerコンソールを使用して完了することもできます。`Cloud Development`ボタンをクリックしてクラウドIDEに移動し、インデックスページを更新します。もし、このページに初めて入る場合は、`Activate Cloud-based Development`ボタンをクリックしてクラウドIDEを初期化する必要があります。

クラウドIDE画面へ遷移後、関連するGitHubのCode Repositoryにアクセスし、最新のコードをPullします。

index.jsファイルを見つけ、インデックスページを修正します。

`Save Code to Repository`ボタンをクリックして、更新したコードをCode Repositoryにコミットします。

Pipelineは、コードが送信された後、自動デプロイタスクを完了するために色々な操作処理をトリガーとしています。

ブラウザーのページを更新することで、更新されたインデックスページが閲覧できます。

4. 補足事項

4-1. Serverless DevsサービスのGitHub認証の表示と解除方法

アプリケーションの作成プロセスを通じて Serverless Devs サービスを認証した後、GitHub アカウントの設定ページで対応する認証情報を確認します。Serverless Devsサービスの認可が不要になった場合は、認可情報の`Revoke Access`ボタンをクリックすることで認可を取り消すことができます。キャンセル後は、Serverless Application Centerでアプリケーションを作成する際に、対応するGitHubアカウントは関連付けられなくなります。また、Serverless Devs サービスの使用には再度の承認処理が必要なので、注意が必要です。

＜参考＞  GitHubアカウントの認証情報

4-2. アプリケーションの作成とデプロイにおけるエラーへの対処法

Alibaba CloudServerless Application Centerを使用してアプリケーションを作成およびデプロイする過程で、さまざまなエラーメッセージが表示されることがあります。

Serverless Application Centerは対応するエラーを捕捉し、コンソールに表示します。異なるエラーに応じて設定ファイルやプロジェクトコードなどを調整した後、システムはPipeline設定に応じて関連プロセスを開始します。ユーザーは、コンソールの適切なボタンをクリックして再試行することもできます。

4-3. デプロイメントにおけるNode.jsとNext.jsのバージョン管理の問題に対処する方法

Node.js v16は2023年9月以降にサポートが終了するため、Next.jsもv14.0.0リリース以降はNode.js v16をサポートしません。しかし、Alibaba Cloud Function Computeが提供するNode.jsランタイムの最新バージョンは、まだNode.js v16です。この結果、最新バージョンのNext.jsは、Serverless Application Centerが提供するアプリケーションテンプレートを使用してデプロイすることができなくなります。

＜参考＞

Alibaba Cloud Function Compute Node.jsランタイム

Next.js v14.0.0

package.jsonに定義されているNext.jsのバージョンが高過ぎると、デプロイ時にNode.jsのバージョンに関するエラーメッセージが表示されます。Next.jsで開発したWebアプリケーションをAlibaba CloudServerless Application Centerにデプロイする場合は、Next.js v14.0.0より前のバージョンを利用する必要があります。 サンプルアプリケーションはNext.js v13.1.2を利用しています。

より高いバージョンのNext.jsを使用する必要がある場合は、Serverless Devsサービスを使ってカスタムランタイムまたはイメージをローカルで build し、それをAlibaba Cloud Function Computeサービスに公開することができます。また、サーバーレスK8Sなど、Alibaba Cloud上の他のサーバーレスサービスを使ってデプロイすることもできます。

5. さいごに

本記事では、Alibaba CloudのServerless Application Centerを利用してWebアプリケーションを素早く構築し、GitOps機能を使ってCI/CDを効率化する手法をご紹介しました。この記事ではNext.jsを紹介していますが、他のWebフレームワークやGo、Rust、C++など他言語による開発もサポートしていますし、こういったアプローチからマルチプラットフォーム対応アプリケーションの迅速な開発とデプロイが見込めれます。開発者はこのアプローチを使うことで開発やインフラ管理にかかる時間を大幅に削減できますので、参考に頂ければ幸いです。

関連サービス