如何在Google App Engine上部署Angular多语言应用程序

Question

I've built my Angular 8 application, with angular/cli and i18n multilanguage support (with translations for English, Spanish, French).

So that I can build my app multiple times, one for each language and the build is saved in dist/my-app/en , dist/my-app/es , dist/my-app/fr and so on...

Now I'd like to deploy my app on Google App Engine, but I cannot understand what I should do/configure to deploy all my lang specific versions of my app.

I've already published my default (English) version on GAE and it works, but I don't know how/where to deploy all the other versions (es, fr, etc).

Should I use the dispatch file? What's your best way to do that?

Thanks!

Answer 1

You can consider dist/my-app as your root folder regarding AppEngine.

• Add an index.html inside this folder (to redirect to default locale depending on browser preferences or by let user choosing).
• Deploy entire folder as one app in GAE.
• Each localized app will be sub-folders, and then served by GAE as https:///xxxx.appspot.com/en/ ...

To build multiple application with multiple locales, check Angular official docs .

Each href should be set to locale:

"baseHref": "/en/",

Then, update app.yaml and handlers to serve all sub-folders.

For instance, this should looks like :

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

But I'm not an expert of handlers regexp, so it could be optimized I'm sure.

Deploy folder should looks like :

deploy
  app.yaml
  app
    index.html // page to propose user to select locale or auto redirect
    fr
      index.html
      bundles.js...
    en
      index.html
      bundles.js...