Google App Engineに基本Angular 2アプリをデプロイ

Question

Angular 2を使用して基本的なフロントエンドアプリケーションを作成し、Pythonを使用してGoogle App Engineでエンドポイントを持つバックエンドを作成できます。しかし、私は2つをまとめてクラウドSDKで展開する方法を理解できないようです。

ここでは、GAEでバックエンドコールを使用しない単純なangular2アプリケーションをホストできない基本的な例を示します。私はangular2 CLIでビルドした後にdistフォルダを取り出し、app.yamlファイルで接続しようとしました。ブラウザの開発者（dev_appserver.py app.yaml）でも動作しているようですが、私はindex.htmlファイルとGETリクエストで404エラーが発生していると思います。空のindex.yamlファイルを作成して展開しようとしますが、appspot.comの場所に404エラーが表示されます。これはapp.yamlファイルです：

application: 
version: 
runtime: python27 
threadsafe: true 
api_version: 1 

handlers: 
- url: /favicon\.ico 
    static_files: favicon.ico 
    upload: favicon\.ico 

- url: (.*)/ 
    static_files: dist\1/index.html 
    upload: dist 

- url: (.*) 
    static_files: dist\1 
    upload: dist 

私は間違って何をしているのか分かりません。 distファイルに接続するために、何らかのmain.application pythonバックエンドが必要ですか？ Angular2のノードモジュールや他の種類のファイルを含める必要がありますか？どんな助けでも大いに感謝されるでしょう！ありがとう

Answer 1

最新バージョンのAngular 4とApp Engineについては、次のように作成しました。

service: stage 
runtime: python27 
api_version: 1 
threadsafe: true 

skip_files: 
- ^(?!dist) # Skip any files not in the dist folder 

handlers: 
# Routing for bundles to serve directly 
- url: /((?:inline|main|polyfills|styles|vendor)\.[a-z0-9]+\.bundle\.js) 
    secure: always 
    redirect_http_response_code: 301 
    static_files: dist/\1 
    upload: dist/.* 

# Routing for a prod styles.bundle.css to serve directly 
- url: /(styles\.[a-z0-9]+\.bundle\.css) 
    secure: always 
    redirect_http_response_code: 301 
    static_files: dist/\1 
    upload: dist/.* 

# Routing for typedoc, assets and favicon.ico to serve directly 
- url: /((?:assets|docs)/.*|favicon\.ico) 
    secure: always 
    redirect_http_response_code: 301 
    static_files: dist/\1 
    upload: dist/.* 

# Any other requests are routed to index.html for angular to handle so we don't need hash URLs 
- url: /.* 
    secure: always 
    redirect_http_response_code: 301 
    static_files: dist/index.html 
    upload: dist/index\.html 
    http_headers: 
    Strict-Transport-Security: max-age=31536000; includeSubDomains 
    X-Frame-Options: DENY 

これを改善する方法についてのフィードバックをお寄せください。

Answer 2

あなたのapp.yamlを次のものに置き換えてください。それが動作します！

application: you-app-name-here 
version: 1 
runtime: python 
api_version: 1 

default_expiration: "30d" 

handlers: 
- url: /(.*\.(appcache|manifest)) 
    mime_type: text/cache-manifest 
    static_files: static/\1 
    upload: static/(.*\.(appcache|manifest)) 
    expiration: "0m" 

- url: /(.*\.atom) 
    mime_type: application/atom+xml 
    static_files: static/\1 
    upload: static/(.*\.atom) 
    expiration: "1h" 

- url: /(.*\.crx) 
    mime_type: application/x-chrome-extension 
    static_files: static/\1 
    upload: static/(.*\.crx) 

- url: /(.*\.css) 
    mime_type: text/css 
    static_files: static/\1 
    upload: static/(.*\.css) 

- url: /(.*\.eot) 
    mime_type: application/vnd.ms-fontobject 
    static_files: static/\1 
    upload: static/(.*\.eot) 

- url: /(.*\.htc) 
    mime_type: text/x-component 
    static_files: static/\1 
    upload: static/(.*\.htc) 

- url: /(.*\.html) 
    mime_type: text/html 
    static_files: static/\1 
    upload: static/(.*\.html) 
    expiration: "1h" 

- url: /(.*\.ico) 
    mime_type: image/x-icon 
    static_files: static/\1 
    upload: static/(.*\.ico) 
    expiration: "7d" 

- url: /(.*\.js) 
    mime_type: text/javascript 
    static_files: static/\1 
    upload: static/(.*\.js) 

- url: /(.*\.json) 
    mime_type: application/json 
    static_files: static/\1 
    upload: static/(.*\.json) 
    expiration: "1h" 

- url: /(.*\.m4v) 
    mime_type: video/m4v 
    static_files: static/\1 
    upload: static/(.*\.m4v) 

- url: /(.*\.mp4) 
    mime_type: video/mp4 
    static_files: static/\1 
    upload: static/(.*\.mp4) 

- url: /(.*\.(ogg|oga)) 
    mime_type: audio/ogg 
    static_files: static/\1 
    upload: static/(.*\.(ogg|oga)) 

- url: /(.*\.ogv) 
    mime_type: video/ogg 
    static_files: static/\1 
    upload: static/(.*\.ogv) 

- url: /(.*\.otf) 
    mime_type: font/opentype 
    static_files: static/\1 
    upload: static/(.*\.otf) 

- url: /(.*\.rss) 
    mime_type: application/rss+xml 
    static_files: static/\1 
    upload: static/(.*\.rss) 
    expiration: "1h" 

- url: /(.*\.safariextz) 
    mime_type: application/octet-stream 
    static_files: static/\1 
    upload: static/(.*\.safariextz) 

- url: /(.*\.(svg|svgz)) 
    mime_type: images/svg+xml 
    static_files: static/\1 
    upload: static/(.*\.(svg|svgz)) 

- url: /(.*\.swf) 
    mime_type: application/x-shockwave-flash 
    static_files: static/\1 
    upload: static/(.*\.swf) 

- url: /(.*\.ttf) 
    mime_type: font/truetype 
    static_files: static/\1 
    upload: static/(.*\.ttf) 

- url: /(.*\.txt) 
    mime_type: text/plain 
    static_files: static/\1 
    upload: static/(.*\.txt) 

- url: /(.*\.unity3d) 
    mime_type: application/vnd.unity 
    static_files: static/\1 
    upload: static/(.*\.unity3d) 

- url: /(.*\.webm) 
    mime_type: video/webm 
    static_files: static/\1 
    upload: static/(.*\.webm) 

- url: /(.*\.webp) 
    mime_type: image/webp 
    static_files: static/\1 
    upload: static/(.*\.webp) 

- url: /(.*\.woff) 
    mime_type: application/x-font-woff 
    static_files: static/\1 
    upload: static/(.*\.woff) 

- url: /(.*\.xml) 
    mime_type: application/xml 
    static_files: static/\1 
    upload: static/(.*\.xml) 
    expiration: "1h" 

- url: /(.*\.xpi) 
    mime_type: application/x-xpinstall 
    static_files: static/\1 
    upload: static/(.*\.xpi) 

# image files 
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png)) 
    static_files: static/\1 
    upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png)) 

# audio files 
- url: /(.*\.(mid|midi|mp3|wav)) 
    static_files: static/\1 
    upload: static/(.*\.(mid|midi|mp3|wav)) 

# windows files 
- url: /(.*\.(doc|exe|ppt|rtf|xls)) 
    static_files: static/\1 
    upload: static/(.*\.(doc|exe|ppt|rtf|xls)) 

# compressed files 
- url: /(.*\.(bz2|gz|rar|tar|tgz|zip)) 
    static_files: static/\1 
    upload: static/(.*\.(bz2|gz|rar|tar|tgz|zip)) 

# index files 
- url: /(.+)/ 
    static_files: static/\1/index.html 
    upload: static/(.+)/index.html 
    expiration: "15m" 

- url: /(.+) 
    static_files: static/\1/index.html 
    upload: static/(.+)/index.html 
    expiration: "15m" 

# site root 
- url:/
    static_files: static/index.html 
    upload: static/index.html 
    expiration: "15m" 

Answer 3

正規表現の一致が間違っているようです。

handlers: 
- url: /favicon\.ico 
    static_files: favicon.ico 
    upload: favicon\.ico 
- url:/
    static_files: dist/index.html 
    upload: dist/index.html 
- url: /(.*) 
    static_files: dist/\1 
    upload: dist/(.*) 

これはテストとStatic Hosting tutorial on App Engineを作成しながら、私たちが遭遇したいくつかの奇妙から来ている：このフォーマットを試してみてください。

Answer 4

Googleのクラウドプラットフォームへの静的アップロードの場合、app.yamlファイルのハンドラーを更新するようになりました。正規表現がこれと似ていない場合、Angular Routerに問題がありました。

handlers: 
- url: /favicon.ico 
    static_files: dist/favicon.ico 
    upload: dist/assets/favicon.ico 

- url: /(.*\.(gif|png|jpg|css|js)(|\.map))$ 
    static_files: dist/\1 
    upload: dist/(.*)(|\.map) 

- url: /(.*) 
    static_files: dist/index.html 
    upload: dist/index.html 

UPDATE：ディストフォルダは角CLI ng buildから出力された生産ng build --prodについては

、これは私のapp.yamlファイルがどのように見えるかです：

runtime: python27 
threadsafe: true 
api_version: 1 

handlers: 
- url: /(.*\.(gif|png|jpeg|jpg|css|js|ico))$ 
    static_files: dist/\1 
    upload: dist/(.*) 
- url: /(.*) 
    static_files: dist/index.html 
    upload: dist/index.html 

私はいずれかを追加しますdistフォルダ内の他のファイルタイプを最初のハンドラの正規表現グループ化文字に置き換えます。(gif|png|jpeg|jpg|css|js|ico)