在GAE环境中运行支持Angular Universal的Ionic应用程序

我在上一篇文章中留下了关于在GAE环境中运行Ionic5 Angular应用的备忘录,为了支持SSR,在该应用中引入了@ionic/angular-server并在GAE上进行了运行。

程序

1. 添加所需的软件包。

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)

修改用于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端创建一个Web服务器。
※将npm build的结果复制到Docker容器内的路径改为从/www到/app/dist。

3. 建设和部署

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,然后再加载页面。

GAEの画面

虽然没有显示出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

广告
将在 10 秒后关闭
bannerAds