在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,然后再加载页面。
虽然没有显示出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