es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Hostear la aplicación de Angular en CloudFront/S3 *sin* utilizar el alojamiento de sitios estáticos de S3.

Hostear la aplicación de Angular en CloudFront/S3 *sin* utilizar el alojamiento de sitios estáticos de S3.

18 Jun, 2023 Programación

Estoy construyendo una aplicación Angular utilizando AWS CDK. Es para mi trabajo y InfoSec no aprueba los buckets S3 públicamente accesibles. Me gustaría utilizar la nueva API de Distribución sin configurar el bucket S3 para alojamiento de sitios web. En ese caso, “el bucket se manejará como origen y se usarán la redirección y el manejo de errores de CloudFront”. Cuando configuro la distribución utilizando el siguiente código, la raíz de la aplicación funciona (es decir, /index.html) pero la redirección de autenticación (/login/callback) produce una respuesta de XML “Acceso denegado”. ¿Cómo le digo a CloudFront que redirija todo a index.html?

“` const bucket = new Bucket(this, “WebUIBucket”, { versioned: false, removalPolicy: RemovalPolicy.DESTROY, autoDeleteObjects: true, })

<pre><code> new BucketDeployment(this, "DeployWebUI", { sources: [Source.asset(path.resolve(__dirname, "../../frontend/dist/myapp"))], destinationBucket: bucket, })

const cloudFront = new Distribution(this, "CloudFront", { defaultBehavior: { origin: new S3Origin(bucket), viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS, }, domainNames: [this.frontendFQDN], certificate: this.certificate, priceClass: PriceClass.PRICE_CLASS_100, defaultRootObject: "index.html", }

const zone = HostedZone.fromLookup(this, 'Zone', { domainName: 'my.tld' })

new ARecord(this, "frontendDNS", { zone: this.zone, recordName: 'my-angular-app', target: RecordTarget.fromAlias(new CloudFrontTarget(cloudFront)), }

“`

<p>“`

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para redirigir todo a index.html, puede agregar una respuesta de error personalizada a su distribución de CloudFront que redirige cualquier código de estado de error a su archivo index.html.

    Puede hacer esto agregando el siguiente código a su distribución de CloudFront:

    cloudFront.addBehavior("customErrorPage", {
    origin: new S3Origin(bucket),
    allowedMethods: CloudFrontAllowedMethods.GET_HEAD_OPTIONS,
    cachePolicy: CachePolicy.CACHING_DISABLED,
    viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
    errorResponses: [
        {
            httpStatus: 404,
            responseHttpStatus: 200,
            responsePagePath: '/index.html',
        },
        {
            httpStatus: 403,
            responseHttpStatus: 200,
            responsePagePath: '/index.html',
        },
        {
            httpStatus: 500,
            responseHttpStatus: 200,
            responsePagePath: '/index.html',
        },
    ],
});

    Esto agregará una respuesta de error personalizada a su distribución de CloudFront que redirigirá cualquier código de estado de error (404, 403 y 500) al archivo index.html. Esto debería asegurar que todas las solicitudes se redireccionen al archivo index.html, incluida la redirección de autenticación.

Comments are closed.