Cómo construir un sitio web React en AWS en 15 minutos

Este tutorial lo ayudará a lanzar un sitio web personal o profesional simple alojado en AWS S3 y creado con React. React es una biblioteca Javascript para construir interfaces de usuario. Supongamos que todavía está aprendiendo a reaccionar y otras tecnologías relacionadas con el diseño web y desea una forma rentable de construir y jugar con su propio sitio web en vivo. La mejor manera de lograr esto es alojar el sitio web en AWS S3, ya que ofrece un uso de nivel gratuito durante 12 meses: 5 GB de almacenamiento estándar de Amazon S3, 20,000 solicitudes de obtención y 2,000 solicitudes de colocación. Esto significa que pagará menos de un dólar por mes hasta que su sitio web comience a recibir tráfico serio.

Paso 1: crear una aplicación de reacción localmente

Para crear una aplicación de reacción, primero debe instalar node y npm. Para instalar ambos:

Si está utilizando Mac y Homebrew instalados, ejecute brew install node
Otras opciones para Mac OS: https://nodejs.org/en/download/package-manager/#macos
Windows: https://nodejs.org/en/download/package-manager/#windows
Descargas: https://nodejs.org

Una vez que se completa la instalación, puede crear una nueva aplicación ejecutando:

npx create-react-app my-app
cd my-app
npm start

Una vez que esto se complete, se abrirá su navegador con la dirección localhost: 3000. Cualquier cambio que realice en el código de su aplicación de reacción se reflejará inmediatamente en el navegador.

Paso 2: construir el sitio web local para la implementación

Una vez que haya terminado de realizar cambios en la versión local de su sitio web, puede compilarlo para producción ejecutando el siguiente comando en la carpeta de la aplicación de reacción:

npm run build

Esto exportará todos los activos y creará un solo archivo Javascript minificado al agrupar correctamente React y optimizar la aplicación para obtener el mejor rendimiento. Una vez que se complete este comando, todos los activos de su sitio web estarán en la carpeta de compilación. Ahora su sitio web está listo para implementarse en AWS.

Paso 3: cree una cuenta de AWS

Si ya tiene una cuenta de Amazon, puede omitir este paso. Vaya a aws.amazon.com y cree una nueva cuenta. Tenga en cuenta que la creación de una cuenta de AWS requiere información de la tarjeta de crédito para facturación, pagos y para evitar el uso fraudulento.

Paso 4: crear un depósito de S3

Inicie sesión en su cuenta de AWS. Abra S3 desde su consola AWS. Haga clic en "Crear cubo".

Si planea utilizar un nombre de dominio para su sitio web, cree el depósito con el mismo nombre. Si el nombre de dominio de su sitio web es "abc.com", entonces su nombre de depósito S3 también debe ser "abc.com".

Ingrese un nombre de depósito y haga clic en "Crear".

Paso 5: Configurar el alojamiento de sitios web estáticos en S3

Vaya a las propiedades del depósito S3 y habilite "Alojamiento de sitios web estático". Seleccione "Usar este depósito para alojar un sitio web". Proporcione "index.html" como documento de índice y documento de error.

Tome nota de su punto final. Esta es la URL con la que puede acceder a su sitio web. Una vez que haya terminado, haga clic en Guardar.

Paso 6: Establezca los permisos de lectura del depósito S3 en público

Dado que cualquier persona en Internet debe acceder a su sitio web, el acceso de lectura del depósito S3 debe ser público. Para hacer esto, abra los "Permisos" del depósito y pegue la siguiente política después de sustituirla por el nombre del depósito.

{
    "Versión": "2012-10-17",
    "Declaración": [
        {
            "Sid": "PublicReadGetObject",
            "Efecto": "Permitir",
            "Director de escuela": "*",
            "Acción": "s3: GetObject",
            "Recurso": "arn: aws: s3 :::  / *"
        }
    ]
}

Paso 7: suba los contenidos del sitio web a S3

Ahora debe cargar el contenido de su carpeta de compilación en su bucket de S3.

Abra su cubo S3 y haga clic en "Cargar". Arrastre y suelte el contenido de su carpeta de compilación a la ventana de carga. Compruebe si todo el contenido de su carpeta de compilación está presente, incluidas las subcarpetas y los archivos. Una vez que verifique esto, haga clic en "Cargar".

Eso es. Tu sitio web está en vivo. Puede acceder a él utilizando el punto final que anotó como parte del paso 5.

Paso 8: (Opcional) Configurar la implementación rápida en S3

Cada vez que realice cambios en su sitio web localmente, debe cargar el contenido de su directorio de compilación en S3 manualmente para enviar sus cambios al sitio web en vivo. Para evitar esto, puede instalar AWS CLI y configurarlo con sus credenciales de AWS. Una vez que haga eso, puede cargar el contenido de su directorio de compilación utilizando el siguiente comando.

aws s3 cp build / s3: //  --recursive

Para simplificar esto aún más, también puede agregar este comando a la sección de secuencias de comandos del archivo package.json que puede encontrar en la carpeta de la aplicación de reacción.

"guiones": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "predeploy": "construcción de react-scripts",
  "deploy": "aws cp build s3: //  --recursive",
  "test": "react-scripts test --env = jsdom",
  "eject": "react-scripts eject"
}

Ahora puede ejecutar npm run deploy para implementar el contenido de su carpeta de compilación en S3.

Según mi experiencia, usar AWS para un sitio web simple es mucho más barato que usar cualquier otra solución alojada. Además, puede extender su aplicación para usar AWS Lambda y otras ofertas de AWS. ¡Feliz pirateo!