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.
- Seleccionamos el bucket creado, y en la sección de permisos, agregamos los permisos correspondientes:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::s3reactbucket/*"
}
]
}
- Volviendo al Cloud9, vamos a copiar los artefactos creados previamente a nuestra S3.
aws s3 cp ./dist s3://s3reactbucket --recursive
Dentro del bucket se deben cargar todos los archivos que copiamos,
- Ahora dentro de Propiedades de nuestro bucket, habilitamos la sección de Alojamiento de sitios web estáticos.
- Especificamos el archivo index.html y nos debería quedar así:
- Al abrir el enlace, se debería mostrar correctamente el proyecto desde la S3:
Espero que esta práctica te sirva para entender como usar AWS Cloud9 y copiar tus archivos a AWS S3.
