Java-在Google App Engine标准上托管Angular应用程序. webapp文件夹与GCS存储桶? [英] Java - Hosting Angular application on google app engine standard. webapp folder vs. GCS bucket?

问题描述

我有一个使用App Engine标准JAVA作为后端API的Angular Web应用程序.

I have an angular web application that uses App Engine standard JAVA as the backend API.

在同一项目下托管有角度的Web应用程序的最佳方法是什么?

Whats the best way to host the angular web app under the same project ?

我想将Web应用程序托管在同一个Google项目下.

I would like to host the web application under the same google project.

当我将文件放在Java API项目下的src/main/Webapp文件夹下时，该应用程序运行正常.但是，这将需要在每次我需要更改Web应用程序时刷新后端API.

The app works fine when I place the files under src/main/Webapp folder under the Java API project. However, that would require backend APIs to be refreshed every time I need to change the web app.

或者，遇到了类似这样的事情，用于在GCS存储桶中托管角度应用程序: https://medium.com/@ asanoop24/deploying-angular-6-app-on-google-app-engine-b6259d4c16c2

Alternately, Came across something like this for hosting angular application inside a GCS bucket : https://medium.com/@asanoop24/deploying-angular-6-app-on-google-app-engine-b6259d4c16c2

关于在GAE上托管有角度的Web应用程序的首选方法有何建议?

Any suggestions on which is the preferred approach for hosting angular web apps on GAE ?

谢谢

推荐答案

这里是您可以考虑的一种方法.我将其用于Google AppEngine Standard上的多个完整堆栈部署，由于GAE功能(版本，流量拆分，日志...)，因此更喜欢此版本(相对于GCS).但是成本可能会高于GCS公共存储桶.

Here is one approach you could consider. I use it for multiple full stack deployments on Google AppEngine Standard, and prefer this (vs GCS) because of GAE features (versioning, split traffic, logs..). But the cost could be higher than a GCS public bucket.

要这样做:

1)为前端部署第一项服务

只需简单地部署由ng build --prod生成的Angular dist文件夹. 选择一个简单的标准python环境即可.

Just a simple deployment of your Angular dist folder generated by ng build --prod. Choose a simple standard python environment to do that.

app.yaml应该看起来像:

runtime: python27
threadsafe: true
api_version: 1

handlers:
- url: /(.+\.js)
  static_files: app/\1
  upload: app/(.+\.js)

- url: /(.+\.css)
  static_files: app/\1
  upload: app/(.+\.css)

- url: /(.+\.png)
  static_files: app/\1
  upload: app/(.+\.png)

- url: /(.+\.jpg)
  static_files: app/\1
  upload: app/(.+\.jpg)

- url: /(.+\.svg)
  static_files: app/\1
  upload: app/(.+\.svg)

- url: /favicon.ico
  static_files: app/favicon.ico
  upload: app/favicon.ico

- url: /(.+\.json)
  static_files: app/\1
  upload: app/(.+\.json)

- url: /(.+)
  static_files: app/index.html
  upload: app/index.html

- url: /
  static_files: app/index.html
  upload: app/index.html

我确信处理程序规则可能会得到优化.我不是regexp的专家. ;-)

I'm sure handlers rules could probably be optimized. I'm not an expert in regexp. ;-)

deploy文件夹的目录结构应类似于:

Directory structure of deploy folder should looks like:

/deploy
  app.yaml
  /app  =>  generated by ng build
    index.html
    ...bundles..js
    /assets
      ...

此默认服务将照常在https://YOUR_PROJECT_ID.appspot.com处提供.

This default service will be served at https://YOUR_PROJECT_ID.appspot.com as usual.

2)为后端部署第二项服务

然后(且仅在第一次前端部署之后)，在Java标准环境下为后端部署第二个服务.

Then (and only after 1st front-end deployment), deploy a second service for backend with Java standard environment.

但是我们在<service>标记内精确调整了服务的名称.在这里，我选择api，但任何其他名称都可以.

But we precise the name of service, inside <service> tag. Here I choose api, but any other name should be fine.

<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
    <version>1</version>
    <threadsafe>true</threadsafe>
    <runtime>java8</runtime>          
    <instance-class>F4</instance-class>
    ...
    <service>api</service>
    ...

此新服务将在https://YOUR_SERVICE_NAME-dot-YOUR_PROJECT_ID.appspot.com处提供，因此在https://api-dot-YOUR_PROJECT_ID.appspot.com.

This new service will be served at https://YOUR_SERVICE_NAME-dot-YOUR_PROJECT_ID.appspot.com, so here https://api-dot-YOUR_PROJECT_ID.appspot.com.

请注意在后端管理CORS，以正确接受来自https://YOUR_PROJECT_ID.appspot.com的请求.

Pay attention to manage CORS on backend, to correctly accept request from https://YOUR_PROJECT_ID.appspot.com.

这篇关于Java-在Google App Engine标准上托管Angular应用程序. webapp文件夹与GCS存储桶?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！