前回の記事で、Ionic5のAngularアプリをGAE環境で動かすメモを残したが、そのアプリでSSRに対応するために@ionic/angular-serverを導入してGAEで動かした

手順

1. 必要なpackageを追加

ng add @nguniversal/express-engine

npm install --save @ionic/angular-server

npm install --save @angular/animations
# Required by @angular/platform-server (from @ionic/angular-server)

2. CloudBuildで利用するDockerfileを変更

FROM node:12-alpine as buildContainer
WORKDIR /app
COPY ./package.json ./package-lock.json /app/
RUN npm install
COPY . /app
RUN npm run build:ssr

FROM node:12-alpine
WORKDIR /app
COPY --from=buildContainer /app/package.json /app
COPY --from=buildContainer /app/dist /app/dist
COPY --from=buildContainer /app/dist/app/server /app/dist/app/server
EXPOSE 4000
CMD ["npm", "run", "serve:ssr"]

Dockerイメージからnginxにnodeに変更して、node側でWebサーバを立てるようにしている
※ npm buildの結果をDockerコンテナ内にコピーするパスは、/wwwから/app/distに変更した

3. Build & Deploy

npm run build:ssr  # 「ionic build --prod」または「ng run app:build:production」から変更
gcloud builds submit
gcloud app deploy --image-url us.gcr.io/your-app-name/angular-nginx-container

4. 動作確認

ここらへんを参考に、ブラウザのJavaScriptを無効にしてからページを読み込み

ioniconsが表示されてないが、ちゃんとSSRされている。良さそう！

※ 前回の記事で作成した、以下のファイルは必要なくなったので削除した

nginx.conf
.dockerignore
src/assets/envconfig.js
src/assets/envconfig.template.js

参考

SSR with Angular Universal And Ionic - Ionic Blog
Server Side Rendering (SSR) - Ionic 5 Full Starter App
node.js - Deploying Angular Universal 9 to Google App Engine - Stack Overflow
I