Ionic Angular でSSR
やること
Ionic7, Angular18 stand aloneでSSRなアプリを作成
環境構築
お好みの方法でnode環境を構築しましょう
nodenv が便利です
↓こちらなどを参考に
実行環境
Ubuntu 22.04.3 LTS on wsl2 Windows11
node 20.11.1
Angular18 の要求バージョンに合わせて今回は 20.11.1 にしました。
Ionic Angularのセットアップ
まずはionic angular環境をセットアップしましょう。
ionic cliをインストール
npm install -g @ionic/cli
インストールできたか確認
ionic --version
Ionicのプロジェクトを作成
今回はtabsのテンプレートを使用します
ionic start project-name tabs
使うフレームワークを何にするか聞いてくるのでAngularを選びます。
スタイルシート言語についても聞かれますが今回はscssを選びました。
プロジェクトの作成ができたら以下コマンドで起動できるようになります。
cd project-name
ionic serve
AngularのSSR化
さて、今回の本題です。
まずはAngularをSSR化します。
ng add @angular/ssr
IonicがセットアップしてくれるファイルとAngularがこうなってるだろうと思っている構成に差異があるので修正します。
-bootstrapApplication(AppComponent, {
- providers: [
- { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
- provideIonicAngular(),
- provideRouter(routes),
- ],
-});
+bootstrapApplication(AppComponent, appConfig);
src/app/app.config.ts を追加して
+export const appConfig: ApplicationConfig = {
+ providers: [
+ { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+ provideIonicAngular(),
+ provideRouter(routes),
+ ],
+}
@ionic/angualr-serverの追加
ionicコンポーネントをサーバ側でレンダリングするために@ionic/angular-server を追加します。
yarn add @ionic/angular-server@7
モジュールを追加しましょう。
const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering(),
+ importProvidersFrom(IonicServerModule),
]
};
動くか確認
yarn dev:ssr
SSR化できているかの確認方法ですが、開発ツールのネットワークをみるとサーバからレンダリング済みのページデータが送られてきていることが確認できます。
Angularのアップデート
2024-06現在では上記手順でセットアップするとAngularバージョンが17でした。
Angular update guideに従ってアップデートしましょう。
今回は17 -> 18なので簡単
@angular-eslint/schematicsの依存関係のほうでなんやかんや言われることになるので一緒に
yarn ng update @angular/core@18 @angular/cli@18 @angular-eslint/schematics@18
動くか確認
yarn dev:ssr
コマンドの紐づけ
ionic serve は ng serve を呼び出すので
"serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
+ "builder": "@angular-devkit/build-angular:ssr-dev-server",
"configurations": {
"development": {
"browserTarget": "app:build:development",
+ "serverTarget": "app:server:development"
},
"production": {
"browserTarget": "app:build:production",
+ "serverTarget": "app:server:production"
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "development"
},
このように設定を変更すればSSR化した状態で呼び出せます。
おまけ
Androidビルド
Android Studioのインストール
インストールしましょう。
公式のガイド通り進めます。
iOSビルド
XCodeの使える環境ではないのでこちらはやってません。
以下のドキュメントを読んでください。
参考記事
Discussion