前回の記事で、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