Cuando creé mi primer portafolio el año pasado, lo basé en lo que había aprendido de freeCodeCamp (HTML, CSS y un poco de JavaScript).
En ese momento, solo había visto mi cartera en localhost al ver los archivos en mi computadora local. No sabía nada sobre cómo alojar un sitio web en línea.
Aprender a alojar mi primer sitio web no fue fácil, pero fue una gran experiencia de aprendizaje. Si eres un aspirante a desarrollador web o simplemente estás interesado en lanzar tu propio sitio web estático, espero que esta guía te resulte útil.
¿Para quién es esta guía?
Esta guía está dirigida a principiantes que desean alojar un sitio web estático (un sitio con contenido fijo). Proporcionaré una guía práctica para lo siguiente:
- Cómo comprar un dominio.
- Cómo configurar su dominio para un proveedor de alojamiento externo.
- Cómo alojar su sitio web con Amazon Web Services (AWS).
- Cómo hacer que su sitio web sea seguro (certificación SSL) utilizando Amazon Certification Manager.
Puede que haya alguna terminología que sea nueva para usted. Continúe y busque términos que no le resulten familiares. He incluido enlaces y explicaciones útiles donde creía apropiado.
¿Qué es un nombre de dominio y DNS (sistema de nombres de dominio)?
Un nombre de dominio es la dirección de su sitio web. Por ejemplo, thecodinghamster.com. Pero para una computadora, un nombre de dominio es en realidad una serie de números (una dirección IP). Una dirección IP se ve así: 123.321.0.1
No es fácil para nosotros recordar una larga serie de números. Entonces, su computadora se refiere a un DNS para traducir una dirección de sitio web basada en texto en una dirección IP que luego puede entender. Un DNS es como un directorio.
Vi este gran video que explica el nombre de dominio, DNS y cómo funciona esto en menos de cinco minutos. Mire los primeros cinco minutos del video si está interesado:
¿Dónde puedes comprar tu nombre de dominio?
Puede comprar un nombre de dominio de un registrador de nombres de dominio. Los precios comienzan desde unos pocos dólares. Su nombre de dominio es único. Cada registrador de nombres de dominio ofrece diferentes niveles de servicios / soporte. Pero puede registrar su dominio con cualquier registrador.
¿Qué es un proveedor de hosting?
“Un servicio de alojamiento de Internet es un servicio que ejecuta servidores de Internet, lo que permite a las organizaciones y las personas ofrecer contenido en Internet. Hay varios niveles de servicio y varios tipos de servicios ofrecidos ".Cuando buscaba un proveedor de alojamiento para mi sitio web, exploré diferentes opciones. Los precios oscilaron entre £ 2,00 y £ 5,00 por mes con varias opciones de almacenamiento de 0,5 GB a 10 GB. Los precios parecían razonables, pero todo lo que quería hacer era alojar un sitio web estático. Tenía algunas imágenes, archivos HTML, CSS y JavaScript. Sin contenido dinámico.
¿Por qué AWS?
Después de investigar un poco más, encontré AWS. AWS ofrece una opción de nivel gratuito. Básicamente, obtienes muchos productos gratuitos. Algunos caducan a los 12 meses y otros son gratuitos a perpetuidad. El único costo en el que incurrirá por alojar un sitio web estático es el costo de configurar una zona alojada. Esto cuesta $ 0.50 por mes. Entonces fui con AWS y configuré mi cuenta.
Lo mejor de AWS es el precio y es un proveedor de alojamiento confiable. Pero una cosa a tener en cuenta es que depende de su documentación. Cuando comencé a leer sobre los servicios que ofrecía AWS, ¡rápidamente se volvió confuso! Utilicé la guía oficial de AWS proporcionada para configurar sitios web estáticos. Pero me perdí al hacer clic en un enlace a otro enlace y así sucesivamente. Comencé a investigar otras guías para compensar las lagunas de conocimiento.
Encontré esta excelente guía de Victoria Drake.
Seguí la guía de Victoria Drake junto con la de AWS y logré salir adelante. Pero aún quedan algunas cosas que no se explicaron y que espero profundizar.
Antes de continuar, aquí está su lista de tareas pendientes:
- Investigue un poco sobre los registradores de dominios y compre su nombre de dominio.
- Regístrese para obtener una cuenta gratuita con AWS.
- Tenga abierta la documentación de AWS y la guía de Victoria Drake. Use mi guía para guiarlo a través de la documentación (¡espero que tenga sentido!).
¡Aquí vamos!
AWS: cree una zona alojada en la ruta 53.
Route 53 es donde se manejan todas sus solicitudes de DNS.
Lo primero que debe configurar es su zona alojada con Route 53. Esto es realmente fácil si compró su dominio a través de AWS. Una zona alojada se crea automáticamente una vez que la compra. Si ha hecho esto, pase a la siguiente sección ( Configure sus S3 Buckets ).
Sin embargo, si fue como yo y compró su nombre de dominio a través de otro registrador, haga lo siguiente.
La siguiente parte es cómo crear una zona alojada en la ruta 53 si no ha comprado su nombre de dominio en AWS:
- Vaya a Route 53 en su consola y haga clic en "Crear zona hospedada". Ingrese su dirección de dominio, el comentario es opcional y elija una "Zona Hospedada Pública". Haga clic en "Crear".
2. Una vez que se crea su zona alojada, necesita sus registros NS (Servidores de nombres):
3. Vaya a su registrador de nombres de dominio e inicie sesión. Dependiendo de su registrador, debería encontrar una sección en su configuración llamada "Servidores de nombres" que puede editar. Debe copiar los registros NS de AWS y cambiar los registros NS existentes en la configuración de su dominio.
Tenga en cuenta que no copie el punto / punto completo al final del registro NS. Por ejemplo, debe ser "ns-63.awsdns-07.com", no "ns-63.awsdns-07.com".
La propagación tardará hasta 24 horas.
Configure sus S3 Buckets
Mientras tanto, puede configurar sus S3 Buckets. El S3 Bucket es el almacenamiento de sus archivos, como su index.html.
Debe configurar dos depósitos para su sitio web: 1) yourdomainname.com y 2) www.yourdomainname.com.
El primer depósito es su depósito principal donde cargará todos sus documentos, como su index.html. El segundo depósito redirige al primer depósito. Para configurar sus depósitos de S3, siga la documentación de AWS sobre cómo configurar su depósito de S3 (2: Crear y configurar depósitos y cargar datos).
Además de la documentación, hay algunas cosas a tener en cuenta:
- En la sección 2.1 (parte 2): haga clic en el enlace ¿Cómo creo un bucket de S3? Esta es una guía paso a paso y explica todas las configuraciones que debe elegir.
- En la sección 2.1 (parte 3): todavía no tiene que cargar los archivos de su sitio web. Mientras tanto, puede agregar un archivo index.html de prueba.
Tome nota de su punto final . Puede encontrarlo en su bucket de S3> pestaña "Propiedades"> cuadro "Alojamiento web estático". Debería verse así: //yourdomainname.com.s3-website.eu-west-2.amazonaws.com
Agregue los registros de Alias / "A" en la Ruta 53
Finalmente, regrese a la Ruta 53 y abra su zona hospedada para configurar sus registros de Alias. Puede seguir la documentación del “Paso 3: Agregar registros de alias para example.com y www.example.com”. Es bastante sencillo.
Una vez que la configuración de NS se haya propagado, ¡ su sitio estará activo ! Podrá visitar su sitio en la dirección de dominio, por ejemplo, su nombre de dominio.com
Sin embargo, tenga en cuenta que no será seguro y verá un prefijo // en la barra de direcciones. Llegaré a eso en la siguiente sección.
¿Cómo hacer que su sitio web sea seguro y qué es un certificado SSL?
Es muy importante que su sitio web sea seguro y, para ello, deberá obtener un certificado SSL. SSL son las siglas de Secure Sockets Layer y utiliza cifrado para transferir datos de forma segura entre un usuario y un sitio. Google también aumentará la clasificación de los sitios web con HTTPS.
Si protege el sitio web con un certificado SSL, verá // y un símbolo de candado en la barra de direcciones.
Hay diferentes tipos de certificados SSL: certificado de validación extendida y certificado de dominio validado. Para un sitio web o blog personal, solo se requiere un certificado de dominio validado. Tampoco verá el nombre de su empresa a la izquierda de la barra como en el ejemplo anterior. Solo lo obtiene si tiene un Certificado de validación extendida, que es más para grandes empresas / empresas.
¿Cuánto cuesta un certificado SSL?
He visto una variedad de formas de obtener un certificado SSL. Puede pagar una prima por un servicio que hará esto en su nombre o puede hacerlo de forma gratuita con Let's Encrypt. Let's Encrypt es una autoridad certificadora (CA) oficial. Pero tienes que renovar tu certificado cada tres meses y el proceso es bastante complicado.
No quería pagar una prima ni quería la molestia de renovar cada tres meses. Convenientemente, AWS puede emitir certificados SSL por una tarifa muy pequeña. Paga $ 0,75 por cada certificado emitido y tiene una duración de un año.
Si elige no utilizar AWS, asegúrese de investigar y elegir una CA de confianza.
¿Cómo se obtiene un certificado SSL con AWS?
Inicie sesión en su consola de AWS y navegue hasta AWS Certificate Manager (ACM).
Asegúrese de cambiar la región predeterminada (Ohio) a N. Virginia. Esto no está explícito en las guías y solo la región de Virginia del Norte puede emitir certificados. ¡Aprendí de la manera difícil y perdí mucho tiempo!
Luego haga clic en "Comenzar" en "Provisión de certificados".
Siga la documentación con AWS ("Solicitar un certificado público mediante la consola") y utilice la guía de Victoria Drake (en "Certificado SSL").
Además de las guías, hay algunas cosas que no se explicaron completamente:
- Deberá validar la propiedad de su dominio por correo electrónico o directamente con DNS. Sugeriría siempre verificar la propiedad mediante la validación de DNS .
- Una vez que haya solicitado su certificado, obtendrá algo como esto (excepto que el estado estará pendiente). Haga clic en "Exportar archivo de configuración DNS":
Es una hoja de cálculo de Excel que contendrá algo como esto:
- Deberá agregar estos registros a su configuración de DNS con su registrador. Inicie sesión y vaya a la configuración de DNS. La interfaz varía con los diferentes registradores, pero está buscando sus registros de Host en su configuración de DNS.
- Haga clic en "Agregar registro"> el tipo de registro es CNAME :
Debe agregar dos registros: 1) El nombre de host debe ser "@" y el nombre de destino debe ser el valor de registro del archivo de configuración de DNS.
2) El nombre de host debe ser * (asterisco) y el nombre de destino debe ser el valor de registro del archivo de configuración de DNS.
Si desea obtener más información sobre el CNAME y los tipos de registro, encontré este artículo útil.
Es bastante largo, pero he sacado la parte útil:
“Nota: El nombre de host se refiere al prefijo antes del nombre de dominio. Para crear un registro en blanco, use una @ en el campo Nombre de host. Esto representa un prefijo vacío (por lo que el nombre coincide exactamente con el nombre de dominio; por ejemplo, divapirate.com). El @ nombre de host también se conoce como la raíz del dominio. Un * (asterisco) en el nombre de host es un comodín y representa cualquier prefijo. Por ejemplo, crear un registro para * .divapirate.com apuntará .divapirate.com a la dirección IP proporcionada ".Solo tiene que esperar la verificación. Para mí, esto tomó alrededor de una hora.
¿Cómo agrega su certificado SSL?
Con AWS, puede agregar un certificado SSL a su sitio web mediante la configuración de CloudFront . CloudFront es ideal para acelerar su sitio web. Usé la documentación de AWS y la guía de Victoria Drake (busque sus útiles consejos).
Tenga en cuenta que cuando crea su distribución de CloudFront, hay un menú desplegable para agregar su certificado SSL. Si ya se le ha emitido un certificado SSL, se completará previamente en el menú desplegable.
Su estado en su panel de CloudFront debería cambiar a "Activado". Esto no es instantáneo y lleva un poco de tiempo.
Casi ahí…
Finalmente, debe obtener su nombre de dominio de la distribución de CloudFront. Debería ser algo como esto dsfdser83543. cloudfront.net .
Vuelva a Ruta 53> zona hospedada> cambie ambos registros de alias (destino de alias) al nombre de dominio de CloudFront.
¡Voila! Ha alojado su primer sitio web estático seguro con AWS.
Espero que te haya resultado útil. Si tiene alguna pregunta o simplemente quiere decir hola, búsqueme en Twitter @PhoebeVF
Un gran agradecimiento a Victoria Drake por su guía. Para obtener un tutorial más avanzado sobre este tema, consulte el artículo de Victoria: "Alojamiento de su sitio estático con AWS S3, Route 53 y CloudFront".
Ilustraciones cortesía de //undraw.co