AWS de Amazon: Alojamiento de un sitio web estático

[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]

Alojamiento de un sitio web estático con HTTPS en AWS de Amazon, utilizando S3 y CloudFront

AWS de Amazon es una plataforma barata e ilimitadamente ascendente que será ideal para alojar sitios web estáticos rápidos, seguros y confiables. Alojo muchos sitios web y es barato alojar un sitio web utilizando los servicios de Amazon.

[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]


Usaremos los siguientes 4 servicios proporcionados por AWS:

AWS de Amazon
Registros DNS para distribución CF

Resumen

  • Aprovisionaremos y configuraremos dos depósitos de S3. Se puede servir contenido estático a través de S3. lo contrario se utilizará simplemente para redirigir la red informática tudominio.com a otro dominio.com.
  • Produciremos un certificado SSL asociado mediante el servicio AWS Certificate Manager
  • Nos encontraremos con 2 distribuciones de CloudFront que pueden usar los depósitos de S3 como orígenes. (El sitio web en sí se servirá a través de las ubicaciones de borde de CloudFront; sin embargo, los archivos se mantendrán en S3).
  • Encontraremos registros de alias de DNS que se destinan a CloudFront, con la ayuda del servicio de DNS de Route53.

Configurar el depósito de S3 para almacenar contenido

  1. Proporcionaremos 2 depósitos con cualquier nombre y uno guardará el contenido del sitio web y el otro estará vacío. Recomendamos nombrar los depósitos yourdomain.comwww.yourdomain.com
  2. Vaya a la consola de S3 y elija el depósito estático, haga clic en propiedades y asegúrese de habilitar “Alojamiento de sitios web estáticos”.
    Usaremos este depósito para alojar un sitio web.Aquí, asegúrese de hacer que el documento de índice sea parte como index.html y guarde
  3. Seleccione el segmento “www”, haga clic en propiedades y habilite “Alojamiento de sitios web estáticos”. Seleccione “Redirigir solicitudes”.
    Ingrese yourdomain.com como el “segmento de destino.
    Establezca “Protocolo” en https. Luego haga clic en Guardar.
  4. Note down endpoint (anote los extremos) de las URL que se muestran para cada depósito en el panel de propiedades “Alojamiento de sitios web estáticos”. (Las URL de los extremos se parecen a http://yourbucketname.s3-website-us-east-1.amazonaws.com).

Configure AWS Certificate Manager para su sitio web

AWS de Amazon
AWS Certificate manager

Si aún no tiene un certificado emitido para su dominio con ACM, vaya a AWS Certificate Manager en la consola de AWS de Amazon.

  1. Haga clic en “Solicitar un certificado” (Chill, es gratis por Amazon)
  2. Cree dos entradas en “Agregar nombres de dominio”: yourdomain.com and *.yourdomain.com.
  3. Elija el método de validación que funcione para usted (pero es casi seguro que debería usar la validación de DNS), luego solicite el certificado. Es posible que su certificado tarde una hora o más en emitirse y estar disponible.

Configurar CloudFront para la distribución de la región perimetral

AWS de Amazon
AWS cloud front

Pasos para configurar 2 distribuciones de Cloudfront

Anote el Domain Name de CloudFront para cada distribución. Es posible que los nombres de dominio tarden unos minutos en aparecer en la consola de CloudFront. (Los nombres de dominio de CloudFront se parecen a d1tj8z7yt99sdx.cloudfront.net.)

Distribuciones de Cloudfront


Configurar DNS usando Route 53

AWS de Amazon
Route53

Pasos para configurar DNS

DNS.yaml

Go to the Route 53 section of the AWS console.
Click:                     Hosted Zones
Click:                     your domain.
Delete:                    A-records listed for yourdomain.com. and www.yourdomain.com
Create:                    A new A-record by clicking "Create Record Set"
Name:                      blank
Type:                      A - IPv4 address
Alias:                     yes
Alias Target:              The CloudFront Domain Name of the distribution that points to your static bucket.
Click:                     Create
Create:                    a new A-record by clicking "Create Record Set". Use the following settings:
Name:                      www
Type:                      A - IPv4 address
Alias:                     yes
Alias Target:              The CloudFront Domain Name of the distribution that points to your -www bucket. (In the dropdown, make sure you select from the list of "CloudFront distributions" and not from "S3 website endpoints".)
Click:                     Create

dns.yaml

¡Está completo!


Una vez que hayamos terminado con las configuraciones, espere un tiempo, ya que las distribuciones de Cloudfront tardarán un poco en estar activas y la configuración del nombre de dominio se reflejará como se esperaba.

 

Nota: yourdomain-static y estarán disponibles en t https://yourdomain.com. Los visitantes de http(s)://www.yourdomain.com serán redirigidos a  https://yourdomain.com.

Después de que el sitio web esté activo y en ejecución, implemente algún código y desee realizar algunos cambios en los archivos de su dominio:

  1. Invalide los objetos almacenados en caché en CloudFront para hacer esto, vaya a la consola de CloudFront,
  2. Haga clic en Distribuciones
  3. Haga clic en Invalidaciones
  4. Crear invalidaciones
  5. Haga clic en Invalidar

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]

Diego Pacheco

Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Recent Post

[/vc_column_text][lvca_posts_carousel posts_query=”size:3|order_by:rand|post_type:post” image_linkable=”true” image_size=”full” taxonomy_chosen=”post_tag” display_title=”true” display_post_date=”true” display_summary=”true” autoplay_speed=”3000″ animation_speed=”300″ display_columns=”3″ scroll_columns=”3″ gutter=”3″ tablet_display_columns=”2″ tablet_scroll_columns=”2″ tablet_gutter=”3″ tablet_width=”800″ mobile_display_columns=”1″ mobile_scroll_columns=”1″ mobile_gutter=”3″ mobile_width=”480″][vc_empty_space height=”20px”][/vc_column][/vc_row]