將使用angular-cli創建的Angular4（Angular）部署到Google App Engine

Question

我已經使用Angular-CLI創建了Angular4或只是“ Angular”應用程序。 現在，我可以使用“ ng serve”在本地運行它，並且效果很好。 現在，我要將其部署到Google App Engine中，ng build --prod會將所有文件構建到dist文件夾。

現在我應該如何將它們部署到Google App Engine？

編輯：

我忘了提及這一點，我想使用Maven進行部署。 有什么可以添加到pom.xml的依賴項嗎？ 這樣我就可以從mvn做所有事情？

Answer 1

您可以通過這種方式將maven用作包裝，以創建構建並創建要上傳的zip。 這是使用yarn和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>

Answer 2

我創建了一個App Engine Yaml，用於提供Angular 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