¿Cómo crear una web estática usando AWS S3 y Cloud9?

Blog / ¿Cómo crear una web estática … /
¿Cómo crear una web estática usando AWS S3 y Cloud9?

Por: Leonardo Narváez.

En: 31 de Enero de 2024 a las 15:57
AWS AWS Cloud AWS Cloud9 AWS EC2 AWS S3 linux

Para esta práctica vamos a utlizar AWS Cloud9 para nuestro entorno de trabajo


Creando AWS Cloud9

  • Dentro de la consola de AWS, buscamos Cloud9
  • Creamos un Entorno,

  • En este caso escogeré t3.small, pero dependerá de tus requisitos escoger la instancia que mejor te convenga, recuerda que t3.small, puede tener cargos extra.
  • En Configuración de red, marcamos Secure Shell (SSH)

  • Y creamos nuestro entorno.
  • Ahora abrimos Cloud9 IDE.


Una vez creado el entorno, vamos a levantar nuestra aplicación dentro del entorno para eso:

  • Clonaremos el repositorio de ejemplo:
git clone https://github.com/jgudo/ecommerce-react.git
  • Entramos a la carpeta que se creo:
cd ecommerce-react
  • Instalamos las dependencias:
npm install --global yarn
yarn install

Siguiendo los pasos del README del repositorio, crearemos un .env y agregamos las credenciales necesarias:

VITE_FIREBASE_API_KEY=AIzaKJgkjhSdfSgkjhdkKJdkjowf
VITE_FIREBASE_AUTH_DOMAIN=yourauthdomin.firebaseapp.com
VITE_FIREBASE_DB_URL=https://yourdburl.firebaseio.com
VITE_FIREBASE_PROJECT_ID=yourproject-id
VITE_FIREBASE_STORAGE_BUCKET=yourstoragebucket.appspot.com
VITE_FIREBASE_MSG_SENDER_ID=43597918523958
VITE_FIREBASE_APP_ID=234598789798798fg3-034
  • Iniciamos el servidor de desarrollo
yarn dev

Como vemos, se abre despliega en el puerto 3000, para cambiarlo al puerto 8080 que necesitamos, vamos al archivo 'vite.config.js', y cambiamos el puerto al 8080, veremos que el servidor a cambiado de puerto:

Ahora en el preview de Cloud9, ya podremos ver el proyecto desplegado.


Ahora para construir los artefactos de nuestra aplicación daremos:

yarn build


Creando nuestra AWS S3


  • Dentro de la consola de AWS, buscamos S3, dentro del dashboard de S3, damos en crear bucket.

  • Este bucket nos servirá como servidor de archivos estáticos para nuestra web, es por eso que habilitamos el acceso publico.