Skip to content

Instantly share code, notes, and snippets.

@jdrydn
Last active Mar 27, 2021
Embed
What would you like to do?
Serve a Vue SPA through API-Gateway

Vue HTTP API-Gateway

Serve a Vue SPA through API-Gateway.

Deploy

$ aws cloudformation deploy \
  --stack-name vue-frontend-prod \
  --template-file ./vue-http-apig.yml
Description: Vue HTTP API-Gateway
Resources:
FrontendApi:
Type: AWS::ApiGatewayV2::Api
Properties:
Name: vue-prod-frontend
ProtocolType: HTTP
DisableExecuteApiEndpoint: true
Tags:
Environment: production
FrontendIntegration:
Type: AWS::ApiGatewayV2::Integration
Properties:
ApiId:
Ref: FrontendApi
IntegrationType: HTTP_PROXY
IntegrationMethod: GET
IntegrationUri: https://vue-prod-frontend.s3.amazonaws.com/index.html
PayloadFormatVersion: 1.0
FrontendStage:
Type: AWS::ApiGatewayV2::Stage
Properties:
ApiId:
Ref: FrontendApi
StageName: $default
AutoDeploy: true
FrontendRootRoute:
Type: AWS::ApiGatewayV2::Route
Properties:
ApiId:
Ref: FrontendApi
RouteKey: GET /
Target:
Fn::Join: [ '/', [ 'integrations', { Ref: FrontendIntegration } ] ]
FrontendAnyRoute:
Type: AWS::ApiGatewayV2::Route
Properties:
ApiId:
Ref: FrontendApi
RouteKey: GET /{any+}
Target:
Fn::Join: [ '/', [ 'integrations', { Ref: FrontendIntegration } ] ]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment