Google App Engine에 기본 Angular 2 앱을 배포합니다.

Question

Angular 2를 사용하여 기본 프런트 엔드 애플리케이션을 만들 수 있으며 Python을 사용하여 Google App Engine에서 엔드 포인트가있는 백엔드를 만들 수 있습니다. 그러나 두 가지 방법을 함께 모아 클라우드 SDK와 함께 배포하는 방법을 알아낼 수는 없습니다.

여기 GAE에서 백엔드 호출이없는 간단한 angular2 앱을 호스팅 할 수없는 기본 예제가 있습니다. angular2 CLI로 빌드 한 후에 dist 폴더를 가져 와서 app.yaml 파일로 연결하려고했습니다. 내가 생각하기로는 index.html 파일과 관련하여 GET 요청을 통해 SDK에서 404 오류가 발생하지만 브라우저 개발자 (dev_appserver.py app.yaml)에서 작동하는 것으로 보입니다. 그런 다음 빈 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 back-end를 필요로합니까? 노드 모듈 또는 Angular2의 다른 종류 또는 파일을 포함해야합니까? 어떤 도움이라도 대단히 감사 할 것입니다! 감사합니다

Answer 1

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 

이 향상 될 수 있는지에 대한 피드백을 찾고 : 4 각도와 앱 엔진의 최신 버전나는 다음과 같은 내장.

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

내 app.yaml 파일의 핸들러를 Google 클라우드 플랫폼에 대한 정적 업로드에 대해 다음과 같이 업데이트합니다. 정규식이 이와 같지 않은 경우 Angular Router에 문제가있었습니다. DIST 폴더 각도 CLI ng build에서 출력 :

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 : 생산 ng build --prod를 들어

, 이것은 내 애플리케이션 제목의 파일이 보일 것이다 방법입니다

는

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)