2017-03-27 139 views
0

我已經使用Angular-CLI創建了Angular4或簡單的「Angular」應用程序。現在我可以使用「ng serve」在本地運行它,它工作正常。現在我想將它部署到Google App Engine,ng build --prod將所有文件構建到dist文件夾。將使用angular-cli創建的Angular4(Angular)部署到Google App Engine

現在我應該如何將它們部署到谷歌應用程序引擎?

編輯:

我忘了提到這一點,我想部署使用maven。有沒有任何依賴我可以添加到pom.xml。所以我可以做任何事情從mvn?

+0

您必須爲您的前端代碼創建一個app.yaml。 –

+1

[將基本Angular 2應用程序部署到Google App Engine]的可能重複(http://stackoverflow.com/questions/39782506/deploying-basic-angular-2-app-to-google-app-engine) –

回答

2

你可以用這種方式使用maven作爲包裝來創建構建並創建一個zip上傳。這是使用紗線 和npm的實施。

$ {} project.artifactId

<plugins> 

    <!-- ############################## --> 
    <!-- npm scripts     --> 
    <!-- ############################## --> 

    <plugin> 
    <groupId>org.codehaus.mojo</groupId> 
    <artifactId>exec-maven-plugin</artifactId> 
    <executions> 
     <execution> 
     <id>exec-yarn-install</id> 
     <phase>generate-sources</phase> 
     <configuration> 
      <executable>npm</executable> 
      <arguments> 
      <argument>install</argument> 
      <argument>--global</argument> 
      <argument>yarn</argument> 
      </arguments> 
     </configuration> 
     <goals> 
      <goal>exec</goal> 
     </goals> 
     </execution> 
     <execution> 
     <id>exec-project-dependencies-install</id> 
     <phase>generate-sources</phase> 
     <configuration> 
      <executable>yarn</executable> 
     </configuration> 
     <goals> 
      <goal>exec</goal> 
     </goals> 
     </execution> 

     <!-- run `ng build -prod -aot` --> 
     <!-- * clean dist/ before generating distribution files --> 
     <execution> 
     <id>exec-compile</id> 
     <phase>generate-sources</phase> 
     <configuration> 
      <executable>yarn</executable> 
      <arguments> 
      <argument>run</argument> 
      <argument>build</argument> 
      </arguments> 
     </configuration> 
     <goals> 
      <goal>exec</goal> 
     </goals> 
     </execution> 
    </executions> 
    </plugin> 

    <!-- generate zip --> 
    <plugin> 
    <groupId>org.apache.maven.plugins</groupId> 
    <artifactId>maven-assembly-plugin</artifactId> 
    <version>2.3</version> 
    <configuration> 
     <descriptors> 
     <descriptor>src/assembly/static.xml</descriptor> 
     </descriptors> 
    </configuration> 
    <executions> 
     <execution> 
     <id>make-assembly</id> 
     <phase>package</phase> 
     <goals> 
      <goal>single</goal> 
     </goals> 
     </execution> 
    </executions> 
    </plugin> 
</plugins> 

0

我創建了一個App Engine的YAML爲服務角4 DIST文件夾。尋找有關如何改進它的任何反饋。

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 
相關問題