この記事は、AWS Amplify ( Gen2 )でIonic Frameworkを利用したAngularアプリケーションをデプロイする方法を紹介する、「AWS Community Builders Advent Calendar 2024」の9日目記事です。

やりたいこと

Ionic Frameworkで構築したウェブアプリケーションをAWS Amplifyでホストする方法を調べています。AWS Amplifyでホストすることにより、ウェブアプリが呼び出すサーバー側のAPIをLambda / AppSyncなどで作成し、同一のリポジトリで管理することを目指そうと思っています。

Ionic CLIを使ってアプリをセットアップする

今回はアプリケーションのセットアップをIonic CLIから開始しました。アプリを新しく作る場合は、ionic startコマンドを実行します。

% ionic start
? Use the app creation wizard? (Y/n) 

初手でウィザードを使用するかどうかを聞かれます。このウィザードを実行するには、下のスクリーンショットのようにIonicアカウントの作成が必要となります。Ionicを本格導入する前であれば、nと回答したほうがよいかもしれません。今回はウィザードを使わずに作業を進めます。

CLIの対話形式でアプリをセットアップする

実はウィザードはCLI側でも提供されています。テキストでの対話形式になりますので、Web上で行うものよりは情報量が少ないですが、アカウントを作るほど本格的にIonicでのアプリケーション開発に取り組んでいるわけでなければ、CLI側で十分かなと思います。

初手の質問は、どのJSフレームワークを使うか？です。今回はAngularを選びました。

? Use the app creation wizard? No

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: (Use arrow keys)
❯ Angular | https://angular.io 
  React   | https://reactjs.org 
  Vue     | https://vuejs.org 

続いてプロジェクト名を入力します。これがディレクトリ名にもなる様子です。

? Framework: Angular

Every great app needs a name! 😍

Please enter the full name of your app. You can change this at any time. To
bypass this prompt next time, supply name, the first argument to ionic start.

? Project name: 

その後セットアップするアプリテンプレートを選べます。

? Starter template: (Use arrow keys)
❯ tabs         | A starting project with a simple tabbed interface 
  sidemenu     | A starting project with a side menu with navigation in the
 content area 
  blank        | A blank starter project 
  list         | A starting project with a list 
  my-first-app | A template for the "Build Your First App" tutorial 

Angularを選んだ場合、NgModulesとStandaloneどちらを使うかも選択できました。

? Would you like to build your app with NgModules or Standalone Components?
 
 Standalone components are a new way to build with Angular that simplifies 
the way you build your app. 
 To learn more, visit the Angular docs:
 https://angular.io/guide/standalone-components

 (Use arrow keys)
❯ NgModules 
  Standalone 

ここまで回答を終わらせると、ディレクトリの作成やライブラリのインストールなどが始まります。

✔ Preparing directory ./ng-app in 1.08ms
✔ Downloading and extracting tabs starter in 868.43ms
> ionic integrations enable capacitor --quiet -- ng-app
io.ionic.starter
> npm i --save -E @capacitor/core@latest

AWS Amplifyのセットアップを行う

アプリケーションのセットアップが終わったので、続いてAWS Amplify側の準備をしましょう。まずはライブラリを追加します。

npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest typescript

これでAmplify CLIコマンドが使えるようになりました。Gen2ではnpx ampx [コマンド]で実行します。

 % npx ampx help
ampx <コマンド>

コマンド:
  ampx generate             Generates post deployment artifacts
  ampx sandbox              Starts sandbox, watch mode for Amplify backend deplo
                            yments
  ampx pipeline-deploy      Command to deploy backends in a custom CI/CD pipelin
                            e. This command is not intended to be used locally.
  ampx configure <command>  Configure AWS Amplify
  ampx info                 Generates information for Amplify troubleshooting

オプション:
      --debug    Print debug logs to the console             [真偽] [デフォルト: false]
  -h, --help     ヘルプを表示                                                     [真偽]
  -v, --version  バージョンを表示                                                   [真偽]

続いてAmplifyのリソース定義を行うファイルを追加します。

mkdir amplify
touch amplify/backend.ts

作成したamplify/backend.tsファイルにバックエンドの定義を追加しましょう。まだリソース定義などはしていませんので、2行コピーアンドペーストするだけです。

import { defineBackend } from '@aws-amplify/backend';

defineBackend({});

これは不要かもしれませんが、package.jsonも追加しておきます。

touch amplify/package.json

package.jsonの中身は次のようにしておきます。

{
    "type": "module"
}

これで大体準備ができた様子です。

.gitignoreにAWS Amplify系の定義を追加する

Ionic CLIで作成した.gitignoreに次のファイルを追加しておきましょう。

# amplify
.amplify
amplify_outputs*
amplifyconfiguration*

Amplify CLIでサンドボックスを作る

開発環境はampx sandboxで追加できるらしいです。

npx ampx sandbox

コマンドを実行すると、CDKを使ったデプロイが始まりました。

  Amplify Sandbox
  
  Identifier:   okamotohidetaka
  Stack:        amplify-demo-angular-app-sandbox-69abd81b5d
  
  To specify a different sandbox identifier, use --identifier

✨  Synthesis time: 0.02s

⚠️ The --hotswap and --hotswap-fallback flags deliberately introduce CloudFormation drift to speed up deployments
⚠️ They should only be used for development - never use them for your production Stacks!

中身はBootstrapテンプレートみたいなものでした。amplify/backend.tsに定義を追加すると増える・・・のかもしれません。

デプロイはGit経由で行う

Amplify ( Gen2 )では、基本的にGitリポジトリまたはS3バケット経由でアプリケーションをデプロイします。今回はGitHubを利用しました。この辺りの設定については、ウィザードに従って簡単に進めることができます。

ただしAngular ( v18 )など一部のフレームワークでは、デフォルト設定のビルドがNode versionに関連したエラーで失敗します。

 > ng build
2024-10-25T13:14:13.900Z [WARNING]: Node.js version v18.18.2 detected.
The Angular CLI requires a minimum Node.js version of v18.19.
Please update your Node.js version or visit https://nodejs.org/ for additional instructions.

ビルドのエラーログにNodeのバージョンへの言及が見つかった場合は、ビルドの設定でNodeのバージョンを変えましょう。

これでビルド時のNodeのバージョンが変わります。Nodeのバージョンを変更するステップが入るためか、ビルド時間が体感1・2分ほど伸びている気がします。

ちなみにほぼ素の状態のIonic Angularアプリケーションで、ビルドに4分半ほどかかりました。失敗時も同じくらいかかっているあたり、ビルドの準備に時間がかかっている・・・のでしょうか？

成功すると、AmplifyのURLでIonicアプリが表示されます。

やってみて

まず、Ionic / Angular or Amplifyどっちでセットアップするかで迷うことがありそうです。これはNext.jsアプリを作る場合や、デプロイ先がCloudflareになる場合などでも起きそうですので、トライされた方が記事を出していくか、DocsへのPull requestチャレンジかなと思います。

AWS Amplifyに関しては、Nodeバージョンで初回ビルドがコケることもあることを念頭に置かないとちょっとハマるかもしれません。とはいえ Basic 認証を簡単かつ無料で使えるのはありがたいなーと思いますし、CDKベースで色々できるらしいので、その辺りもわかってくると便利さが実感できるのかなと思います。

参考にした記事など

• https://docs.amplify.aws/angular/start/manual-installation/
• https://ionicframework.com/docs/ja/intro/cli
• https://docs.amplify.aws/angular/start/quickstart/
• https://docs.aws.amazon.com/amplify/latest/userguide/custom-build-image.html