HACK EN LA NUBE: Cómo preparar la producción de alojamiento web estático GRATIS

Este artículo lo guiará por todo lo que necesita hacer para que su sitio web estático esté alojado y listo para la producción.

¡Soportará una cantidad increíble de tráfico y no le costará nada!

Juntos jugaremos con los registros DNS y algunas otras cosas de bajo nivel, pero es más fácil de lo que parece y vale la pena.

No pude encontrar una manera de obtener un nombre de dominio gratuito, por lo que, en el espíritu de la verdadera transparencia, debería decir que tendrá que pagar por eso.

Introducción

Vamos a hacer que Google y CloudFlare hagan el trabajo pesado por nosotros, por lo que solo tendremos que construir el sitio web y configurar todo.

En este artículo, haremos lo siguiente:

  • Configurar un proyecto de Google App Engine
  • Implemente un sitio web en la nube
  • Obtenga nuestro propio nombre de dominio
  • Configure nuestro propio nombre de dominio con CloudFlare
  • Juega con la configuración de DNS para apuntar el dominio a nuestro sitio web
  • Configure el almacenamiento en caché y HTTPS en el dominio para admitir una escala masiva

Suena difícil, especialmente si no estás acostumbrado a estos términos, pero caminaremos juntos por cada paso.

Considere compartir esto en las redes sociales con otras personas que puedan encontrarlo útil, o envíe el enlace a cualquier persona que conozca que esté pagando por el alojamiento estático del sitio web.

¿Qué es Google App Engine?

Google App Engine es un servicio de Google que le permite crear y alojar aplicaciones web complicadas que se ejecutan a una escala extremadamente alta. Puede interactuar con cientos de API para resolver todo tipo de desafíos técnicos como el almacenamiento de datos, la ejecución de consultas, el trabajo en cola, el suministro de capacidades de aprendizaje automático, el envío de correo electrónico ... oh sí, y el servicio de HTML y CSS.

La cuota gratuita en Google App Engine significa que su sitio web puede recibir una cierta cantidad de tráfico antes de que tenga que comenzar a pagarlo; pero en realidad, no nos acercaremos a eso gracias a CloudFlare.

¿Qué es CloudFlare?

CloudFlare es bastante difícil de describir, pero para nuestros propósitos, puede considerarlo como una capacidad de almacenamiento en caché de contenido impresionante (y gratuita) donde los servidores de CloudFlare tendrán una copia de su sitio web y lo servirán directamente a sus visitantes. Vale la pena señalar que CloudFlare almacena muchas copias del contenido en ubicaciones clave en todo el mundo, para que los navegadores web de los visitantes no tengan que llegar muy lejos en Internet para obtenerlo.

Para los sitios web que no cambian con frecuencia, puede configurar las políticas de caché para que sean bastante agresivas, por lo que su proyecto de Google App Engine terminará sin recibir muchas solicitudes. Si actualiza su sitio, tendrá que esperar a que caduque el caché o purgarlo manualmente (explicaré cómo más adelante).

PASO 1: Crea tu sitio web

Lo primero que debe hacer es construir su sitio web. Haga esto utilizando las herramientas a las que está acostumbrado, el objetivo es terminar con una carpeta que contenga todo su sitio web. No puede contener ningún contenido dinámico, por lo que los scripts CGI, las páginas .aspx, el código de Ruby on Rails, etc., están fuera de la tabla. Los sitios web estáticos suelen ser solo HTML, CSS, archivos JavaScript, imágenes, etc.

Asegúrese de que tenga una página index.html

Cuando los visitantes lleguen a su nombre de dominio sin ruta, se servirá la página index.html, así que asegúrese de que exista.

Ponga todo dentro de una carpeta www

Vamos a agregar una carpeta para contener nuestro sitio web estático para que la estructura de nuestro proyecto se vea así:

Ponga todo el sitio web dentro de una carpeta `www`

No te preocupes por ese archivo app.yaml más tarde; Lo agregaremos pronto.

Puede pensar en la carpeta www como lo que se servirá cuando sus visitantes visiten mywebsite.com.

PASO 2: Implementar en Google App Engine

Ahora que tiene su sitio web, es hora de implementarlo en Google App Engine.

Inicie sesión en la consola de Google Cloud Platform

Dirígete a https://console.cloud.google.com e inicia sesión con tu cuenta de Google.

Crear un proyecto

Seleccione Crear proyecto en el menú y elija un nombre de proyecto adecuado que refleje su nombre de dominio. Entonces, si su dominio es matswebsite.com, quizás llame a este sitio web de Mats del proyecto. Generará automáticamente una ID de proyecto para usted, pero puede hacer clic en el pequeño enlace Editar para cambiarlo y elegir el suyo. Usaremos este ID de proyecto más adelante, así que hágalo agradable y fácil de recordar. La identificación del proyecto debe ser globalmente única, por lo que usar su dominio no es una mala idea, p. matswebsitecom.

Haz clic en CREAR.

Crear un proyecto en Google Cloud Platform

Después de un tiempo, se creará el proyecto y podremos habilitar Google App Engine.

Acceda al menú (haga clic en las tres líneas en la esquina superior izquierda) y elija App Engine para acceder a la consola de App Engine.

Instale el SDK de Google Cloud

Dirígete a https://cloud.google.com/sdk/ y descarga el SDK de Google Cloud para tu computadora. El SDK contiene herramientas de línea de comandos que nos permiten utilizar para implementar su sitio web.

Agregar un archivo app.yaml

Para decirle a Google App Engine cómo nos gustaría que se implemente nuestro sitio, necesitamos crear un pequeño archivo de configuración en la carpeta raíz de nuestro sitio web.

Inserte lo siguiente en el nuevo archivo:

tiempo de ejecución: ir
api_version: go1
manejadores:
- url: /
  static_files: www / index.html
  subir: www / index.html
- url: /(.*)
  archivos_estáticos: www / \ 1
  subir: www /(.*)

En los archivos YAML, el espacio en blanco es importante, así que asegúrese de que haya dos espacios antes de static_files y líneas de carga.

Puede obtener más información sobre el archivo app.yaml leyendo la documentación, por ahora, es suficiente saber que estamos publicando estáticamente el contenido de la carpeta www.

Agregar un archivo main.go

Para que nuestro proyecto sea un proyecto Go válido, necesitamos agregar un código Go. No se preocupe, le daré la cantidad mínima absoluta de código requerida.

Cree un archivo en su carpeta (junto con el archivo app.yaml) llamado main.go e inserte el siguiente código:

paquete de aplicaciones
func main () {}
Si no ha oído hablar de Go antes, le recomiendo que lo eche un vistazo. Es un lenguaje divertido y extremadamente útil: ¿por qué no hacer el recorrido?

Desplegar

En un shell de terminal, primero use el comando gcloud (del SDK de Google Cloud) para iniciar sesión:

inicio de sesión de autenticación de gcloud
Si te quedas atascado aquí, dirígete a la guía de inicio rápido para obtener ayuda.

Esto abrirá un navegador web y le pedirá que inicie sesión en su cuenta de Google. Una vez hecho, el terminal indicará que el inicio de sesión fue exitoso.

Ahora cd a la carpeta de su sitio web para que al hacer ls o dir muestre la carpeta www en la lista.

Ahora configure el nombre del proyecto:

gcloud config set project PROYECTO_ID

Reemplace PROJECT_ID con el ID del proyecto que configuró cuando creó su proyecto en Google Cloud Console.

Ahora vamos a comenzar la implementación:

implementación de la aplicación gcloud

Si Google Cloud SDK necesita algún componente adicional (para mí necesitaba app-engine-go), se le solicitará que lo instale. Responda S (por sí) para cada pregunta.

Finalmente, le preguntará si desea implementar la aplicación: presione Y e ingrese nuevamente.

Después de un tiempo, la aplicación se implementará y estará accesible a través del dominio appspot.com:

https://PROJECT_ID.appspot.com
Recuerde reemplazar PROJECT_ID con su ID de proyecto.

PASO 3: Configura tu nombre de dominio

Seleccionar y comprar un dominio

Para que los visitantes puedan ver su sitio web, deberán visitar un nombre de dominio, y si bien puede usar el apppot.com que Google App Engine le ofrece de forma gratuita, es mucho mejor tener el suyo propio.

Dirígete a namecheap.com, o busca una compañía que venda nombres de dominio y compre tu dominio. Deberá poder cambiar los servidores de nombres, así que asegúrese de que la compañía lo admita (Namecheap lo hace).

Configurar CloudFlare

Vaya a CloudFlare.com y cree una cuenta. Luego seleccione Agregar sitio en la barra de menú en la parte superior. Ingrese su dominio y haga clic en Iniciar escaneo. Una vez que haya terminado de hacer su magia de Dios sabe qué, haga clic en Continuar con la configuración y siga los pasos restantes, haga clic en Continuar donde pueda hasta llegar a la página Seleccionar un plan CloudFlare.

Elija el plan GRATUITO y haga clic en Continuar.

El plan de sitio web gratuito tiene todo lo que necesitamos: CloudFlare es bastante generoso.

Luego se le pedirá que actualice sus servidores de nombres, así que regrese al lugar donde compró su nombre de dominio e ingrese los valores que le da CloudFlare.

Para enrutar el tráfico a través de CloudFlare, necesitamos actualizar los servidores de nombres. CloudFlare le dice qué valores usar.

En Namecheap, vas al Panel y haces clic en GESTION junto a tu dominio. Luego busque NAMESERVERS y elija DNS personalizado. Copie y pegue los servidores de nombres en los dos cuadros provistos:

Namecheap le permite especificar sus propios servidores de nombres. Recuerde hacer clic en la pequeña marca de verificación verde para confirmar sus cambios.

Cuando haya hecho esto, haga clic en Continuar en CloudFlare y espere. Los cambios pueden tomar algún tiempo para que surtan efecto, así que ve y toma una taza de té u otra bebida apropiada (o inapropiada).

Eventualmente, se volverá verde (puede actualizar tantas veces como desee):

Una vez que se actualicen los servidores de nombres, su sitio estará en vivo en CloudFlare.

Dile a App Engine sobre tu dominio

De vuelta en Google Cloud Console, acceda nuevamente a la consola de App Engine y seleccione Configuración.

En la pestaña Dominios personalizados, seleccione Agregar un dominio personalizado.

Deberá verificar que es el propietario del dominio antes de pedirle a Google App Engine que le sirva contenido; haga esto seleccionando Verificar un nuevo dominio de la lista e ingresándolo en el cuadro provisto.

Al hacer clic en Verificar, se activará un nuevo proceso donde podremos demostrar que poseemos y controlamos ese nombre de dominio. En la nueva ventana, seleccione el nombre de su proveedor (con suerte, Namecheap, ya que es fácil) y observe que se le pide que agregue un registro TXT DNS:

Para demostrarle a Google que controlamos un nombre de dominio, debemos agregar un código DNS especial que proporcionen.

No se preocupe, esto no da tanto miedo como parece. Seleccione el texto extraño dentro del cuadro, cópielo y regrese a CloudFlare, y agregaremos el valor.

Asegúrese de que su dominio esté seleccionado en CloudFlare y elija la pestaña DNS.

En la parte superior de la tabla, hay un formulario donde podemos agregar el registro que Google quiere:

En el campo Nombre, ingrese un carácter @, y para el Contenido, pegue el valor que Google nos dio. Haz clic en Agregar registro.

Se agregará a la lista de registros DNS.

Ahora, regrese a Google Cloud Platform y haga clic en Verificar.

Esto puede llevar algo de tiempo, así que no se moleste si no funciona de inmediato. Siempre que pegue el valor correcto en CloudFlare, eventualmente se actualizará. En realidad, estás esperando que los servidores DNS se propaguen, lo que suena más mágico de lo que es, pero de cualquier manera, si no quieres esperar, considera usar los servidores DNS públicos de Google, son muy rápidos.

Finalmente, obtendrá la página de éxito anterior.

De vuelta en Google Cloud Console> App Engine> Configuración> Dominios personalizados, haga clic en Actualizar dominios y observe que su dominio ahora es una opción en la lista desplegable. Selecciónelo y haga clic en Continuar, luego haga clic en Guardar asignaciones.

Después de un momento, haga clic en Continuar nuevamente y observe que Google App Engine ahora nos está dando nuevas configuraciones de DNS. Necesitamos asegurarnos de que nuestra página DNS de CloudFlare tenga los mismos valores.

Google quiere que pongamos cada uno de estos valores en la consola de CloudFlare: copiar y pegar nunca hace daño a nadie, ¿verdad?

De vuelta en CloudFlare, presione la X junto a todos los registros DNS, excepto el TXT que agregamos (lo dejaremos allí para que Google sepa que siempre controlamos ese dominio).

Ahora, para cada elemento en la página de Google, cree un registro en CloudFlare. Esto es lo más difícil que tenemos que hacer, lea primero estos consejos:

  • El menú desplegable TXT es donde especifica el tipo (necesitará A, AAAA y CNAME)
  • En Google App Engine, el campo Alias ​​es el Nombre en Cloudflare. Donde no hay alias, use el carácter @ nuevamente. (También puede dejarlo en blanco y CloudFlare sabrá lo que quiere decir, o le pedirá que lo configure en @)
  • Deje el TTL como TTL automático
  • CloudFlare sabe lo que está haciendo y es difícil cometer un error, así que copie y pegue cada valor y confíe en CloudFlare para que le diga si comete un error
  • Tenga cuidado con los espacios en blanco adicionales cuando copie y pegue, podría causar un error de validación pero es difícil de ver

Terminará luciendo así:

De vuelta en Google App Engine, haga clic en Listo.

Dale tiempo a internet para ponerse al día

Para que su dominio funcione, Internet necesita ponerse al día con estos cambios. Dicen que esto puede tomar 24 horas, pero si está utilizando los servidores DNS de Google, generalmente es bastante inmediato.

Mientras espera, puede habilitar el almacenamiento en caché agresivo y HTTPS en CloudFlare.

PASO 4: Configurar el almacenamiento en caché y HTTPS

El truco para mantener el alojamiento estático gratuito, independientemente de la cantidad de tráfico que obtenga, es habilitar el almacenamiento en caché en CloudFlare.

Haga clic en la pestaña Reglas de página y haga clic en Crear regla de página.

En el cuadro de coincidencia de URL, ingrese su dominio en la forma: * .mywebsite.com / *, que indica que la regla debe aplicarse independientemente del subdominio y de la ruta.

En la configuración, elija Edge Cache TTL y establezca el valor en un mes. Haga clic en Guardar e implementar.

Establecer el Edge Cache TTL en un mes (en teoría) hará que nuestro sitio web de Google App Engine solo se ejecute una vez al mes. El resto del tiempo, el CDN de borde de CloudFlare lo servirá. Obviamente, esto es agresivo: puedes jugar con la configuración para encontrar los valores correctos para ti.

Para que nuestro sitio sea accesible a través de HTTPS, agregaremos otra regla de página:

Esta vez, coloque el valor de coincidencia de URL como: http: //*.mywebsite.com/*

Usando una regla de página en CloudFlare, podemos decirle que siempre use HTTPS para nuestro sitio web.

Elija Usar siempre HTTPS de la lista y haga clic en Guardar e implementar.

Opcionalmente, puede agregar una URL de reenvío para asegurarse de que todo el tráfico se enruta a www.mywebsite.com o mywebsite.com.

Estas son las reglas finales de la página para honorablecode.com

Purga el caché cuando quieras

Cada vez que realice cambios en su sitio web, acceda a la consola de CloudFlare, acceda a la pestaña Almacenamiento en caché y elija Purgar todo en el menú desplegable:

Las nuevas solicitudes para su sitio web ahora irán a Google App Engine y se servirá la última versión (y CloudFlare la almacenará en la memoria caché para futuras solicitudes).

¡Tu sitio web está en vivo!

Una vez que los servidores DNS se hayan puesto al día, su sitio web estático seguro y gratuito estará en línea.

Conclusión

Simplemente usando las opciones GRATUITAS de Google App Engine y CloudFlare, y un poco de magia DNS, podemos alojar nuestro sitio web estático listo para producción sin costo alguno.

Fuimos capaces de:

  • Configurar un proyecto de Google App Engine
  • Implemente un sitio web en la nube
  • Obtenga nuestro propio nombre de dominio
  • Configure nuestro propio nombre de dominio con CloudFlare
  • Juega con la configuración de DNS para apuntar el dominio a nuestro sitio web
  • Configure el almacenamiento en caché y HTTPS en el dominio para admitir una escala masiva

Buen trabajo.

Comprar mi libro

En teoría, acabo de ahorrarle mucho dinero, así que, ¿por qué no decir gracias comprando mi libro? :)

Si te gusta hacer cosas como en este artículo, te encantará lo que puedes hacer con Go. En mi libro Go Programming Blueprints, creamos cosas reales. Flexiona tus músculos de desarrollo.

Obtenga su copia de https://www.packtpub.com/application-development/go-programming-blueprints-second-edition

Además, tuiteame @matryer si te quedas atascado, y veré si puedo ayudarte.