En este instructivo, se describe cómo configurar un bucket de Cloud Storage para alojar un sitio web estático para un dominio que poseas. Las páginas web estáticas pueden incluir tecnologías del lado del cliente, como HTML, CSS y JavaScript. No pueden incluir contenido dinámico como secuencias de comandos del lado del servidor como PHP.
En este instructivo, se muestra cómo entregar contenido mediante HTTP. Para ver un instructivo que use HTTPS, consulta Aloja un sitio web estático.
Si buscas ejemplos y sugerencias sobre páginas web estáticas, incluido cómo alojar elementos estáticos para un sitio web dinámico, consulta la página de sitios web estáticos.
Objetivos
En este instructivo, realizarás las siguientes acciones:- Apuntar tu dominio a Cloud Storage con un registro
CNAME
- Crear un bucket que esté vinculado a tu dominio
- Subir y compartir los archivos de tu sitio
- Probar el sitio web
Costos
En este instructivo, se usa el siguiente componente facturable de Google Cloud:
- Cloud Storage
Consulta la sugerencia para supervisar tus cargos de almacenamiento si quieres obtener detalles sobre los cargos que se pueden aplicar cuando alojas un sitio web estático. Consulta la página de Precios a fin de obtener detalles sobre los costos de Cloud Storage.
Antes de comenzar
- Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
- Debes tener un dominio que poseas o administres. Si no tienes un dominio existente, existen muchos servicios a través de los cuales puedes registrar un nuevo dominio, como Cloud Domains.
En este instructivo, se usa el dominio
example.com
. - Verifica que posees o administras el dominio que usarás. Asegúrate de verificar el dominio de nivel superior, como
example.com
, y no un subdominio, comowww.example.com
.Nota: Si tienes la propiedad del dominio que asocias a un bucket, es posible que ya hayas realizado este paso. Si compraste tu dominio a través de Cloud Domains, la verificación es automática.
Conecta tu dominio a Cloud Storage
Para conectar un dominio a Cloud Storage, crea un registro CNAME
a través del servicio de registro del dominio. Un registro CNAME
es un tipo de registro DNS. Dirige el tráfico que solicita una URL del dominio a los recursos que quieres entregar, en este caso, objetos en los depósitos de Cloud Storage.
Para www.example.com
, el registro CNAME
puede contener la siguiente información:
NAME TYPE DATA www CNAME c.storage.googleapis.com.
Si quieres obtener más información sobre los redireccionamientos CNAME
, consulta URI para alias de CNAME
.
Para conectar un dominio a Cloud Storage, haz lo siguiente:
Crea un registro
CNAME
que apunte ac.storage.googleapis.com.
.El servicio de registro de tu dominio debe incluir una forma para que administres tu dominio, incluida la adición de un registro
CNAME
. Por ejemplo, si usas Cloud DNS, las instrucciones para agregar registros de recursos se pueden encontrar en la página Agrega, modifica y borra registros.
Crea un bucket
Crea un bucket con un nombre que coincida con el CNAME
que creaste para tu dominio.
Por ejemplo, si agregaste un registro CNAME
que apunta desde el subdominio www
de
example.com
a c.storage.googleapis.com.
, crea un bucket con el nombre
www.example.com
.
Sigue estos pasos para crear un bucket:
Console
- En la consola de Google Cloud, ve a la página Buckets de Cloud Storage.
Haz clic en add_box Crear para abrir el formulario de creación de buckets.
Ingresa la información de tu depósito y haz clic en Continuar para completar cada paso:
El nombre del bucket, que coincide con el nombre de host asociado con el registro
CNAME
.Selecciona el Tipo de ubicación y la Ubicación del bucket. Por ejemplo, Región y us-east1.
En Clase de almacenamiento, selecciona Standard Storage.
En Control de acceso, selecciona Uniforme.
Haz clic en Crear.
Si la operación se realiza sin problemas, verás la página del bucket y el mensaje “No hay objetos activos en este bucket ”.
Línea de comandos
Usa el comando buckets create:
gcloud storage buckets create gs://www.example.com
Si no hay errores, el comando mostrará lo siguiente:
Creating gs://www.example.com/...
Bibliotecas cliente
C++
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage C++.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
C#
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage C#.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Go
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Go.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Java
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Java.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Node.js
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Node.js.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
PHP
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage PHP.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Python
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Python.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Ruby
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Ruby.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
API de REST
API de JSON
Tener la gcloud CLI instalada e inicializadaa fin de generar un token de acceso para el encabezado
Authorization
.Como alternativa, puedes crear un token de acceso con OAuth 2.0 Playground y, luego, incluirlo en el encabezado
Authorization
.Crea un archivo JSON que asigne el nombre de tu sitio web a la propiedad
name
:{ "name": "www.example.com" }
Usa
cURL
para llamar a la API de JSON. Para www.example.com, usa lo siguiente:curl -X POST --data-binary @website-bucket-name.json \ -H "Authorization: Bearer $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b?project=my-static-website"
API de XML
Tener la gcloud CLI instalada e inicializadaa fin de generar un token de acceso para el encabezado
Authorization
.Como alternativa, puedes crear un token de acceso con OAuth 2.0 Playground y, luego, incluirlo en el encabezado
Authorization
.Usa
cURL
para llamar a la API de XML a fin de crear un bucket con el nombre de tu sitio web. Para www.example.com, usa lo siguiente:curl -X PUT \ -H "Authorization: Bearer $(gcloud auth print-access-token)" \ -H "x-goog-project-id: my-static-website" \ "https://storage.googleapis.com/www.example.com"
Sube los archivos de tu sitio
Para agregar a tu bucket los archivos que quieres que entregue tu sitio web, haz lo siguiente:
Console
- En la consola de Google Cloud, ve a la página Buckets de Cloud Storage.
En la lista de buckets, haz clic en el nombre del bucket que creaste.
Haz clic en el botón Subir archivos en la pestaña Objetos.
En el cuadro de diálogo de archivo, navega al archivo deseado y selecciónalo.
Una vez completada la carga, deberías ver el nombre y la información del archivo en el bucket.
Línea de comandos
Usa el comando gcloud storage cp
para copiar archivos a tu bucket.
Por ejemplo, para copiar el archivo index.html
desde su ubicación actual Desktop
, haz lo siguiente:
gcloud storage cp Desktop/index.html gs://www.example.com
Si se ejecuta de forma correcta, la respuesta se parece al siguiente ejemplo:
Completed files 1/1 | 164.3kiB/164.3kiB
Bibliotecas cliente
C++
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage C++.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
C#
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage C#.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Go
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Go.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Java
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Java.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
En el siguiente ejemplo, se sube un objeto individual:
En el siguiente ejemplo, se suben varios objetos de forma simultánea:
En el siguiente ejemplo, se suben todos los objetos con un prefijo común de forma simultánea:
Node.js
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Node.js.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
En el siguiente ejemplo, se sube un objeto individual:
En el siguiente ejemplo, se suben varios objetos de forma simultánea:
En el siguiente ejemplo, se suben todos los objetos con un prefijo común de forma simultánea:
PHP
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage PHP.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Python
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Python.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
En el siguiente ejemplo, se sube un objeto individual:
En el siguiente ejemplo, se suben varios objetos de forma simultánea:
En el siguiente ejemplo, se suben todos los objetos con un prefijo común de forma simultánea:
Ruby
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Ruby.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
API de REST
API de JSON
Tener la gcloud CLI instalada e inicializadaa fin de generar un token de acceso para el encabezado
Authorization
.Como alternativa, puedes crear un token de acceso con OAuth 2.0 Playground y, luego, incluirlo en el encabezado
Authorization
.Usa
cURL
para llamar a la API de JSON con una solicitud de objetoPOST
. Para la página de índice de www.example.com, haz lo siguiente:curl -X POST --data-binary @index.html \ -H "Content-Type: text/html" \ -H "Authorization: $(gcloud auth print-access-token)" \ "https://storage.googleapis.com/upload/storage/v1/b/www.example.com/o?uploadType=media&name=index.html"
API de XML
Tener la gcloud CLI instalada e inicializadaa fin de generar un token de acceso para el encabezado
Authorization
.Como alternativa, puedes crear un token de acceso con OAuth 2.0 Playground y, luego, incluirlo en el encabezado
Authorization
.Usa
cURL
para llamar a la API de XML con una solicitud de objetoPUT
. Para la página de índice de www.example.com, haz lo siguiente:curl -X PUT --data-binary @index.html \ -H "Authorization: $(gcloud auth print-access-token)" \ -H "Content-Type: text/html" \ "https://storage.googleapis.com/www.example.com/index.html"
Comparte tus archivos
A fin de que los objetos de un bucket sean legibles para todos en la Internet pública, sigue estos pasos:
Console
- En la consola de Google Cloud, ve a la página Buckets de Cloud Storage.
En la lista de buckets, haz clic en el nombre del bucket que deseas hacer público.
Selecciona la pestaña Permisos cerca de la parte superior de la página.
Si el panel Acceso público lee No público, haz clic en el botón Quitar prevención de acceso público y haz clic en Confirmar en el cuadro de diálogo que aparece.
Haz clic en el botón add_box Otorgar acceso.
Aparecerá el cuadro de diálogo Agregar principales.
En el campo Principales nuevas, escribe
allUsers
.En el menú desplegable Seleccionar un rol, elige el submenú Cloud Storage y haz clic en la opción Visualizador de objetos de almacenamiento.
Haz clic en Guardar.
Haz clic en Permitir acceso público.
Una vez que se comparte de forma pública, aparece un ícono de vínculo para cada objeto en la columna de acceso público. Puedes hacer clic en este ícono a fin de obtener la URL del objeto.
Línea de comandos
Usa el comando buckets add-iam-policy-binding
:
gcloud storage buckets add-iam-policy-binding gs://www.example.com --member=allUsers --role=roles/storage.objectViewer
Bibliotecas cliente
C++
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage C++.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
C#
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage C#.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Go
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Go.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Java
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Java.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Node.js
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Node.js.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
PHP
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage PHP.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Python
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Python.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Ruby
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Ruby.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
API de REST
API de JSON
Tener la gcloud CLI instalada e inicializadaa fin de generar un token de acceso para el encabezado
Authorization
.Como alternativa, puedes crear un token de acceso con OAuth 2.0 Playground y, luego, incluirlo en el encabezado
Authorization
.Crea un archivo JSON que contenga la siguiente información:
{ "bindings":[ { "role": "roles/storage.objectViewer", "members":["allUsers"] } ] }
Usa
cURL
para llamar a la API de JSON con una solicitud de bucketPUT
:curl -X PUT --data-binary @JSON_FILE_NAME \ -H "Authorization: Bearer $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME/iam"
Donde:
JSON_FILE_NAME
es la ruta de acceso del archivo JSON que creaste en el paso 2.BUCKET_NAME
es el nombre del bucket cuyos objetos quieres hacer públicos. Por ejemplo,my-bucket
.
API de XML
La API de XML no admite que todos los objetos de un bucket se hagan legibles de forma pública. En su lugar, usa la consola de Google Cloud o gcloud storage
.
Puedes hacer que los grupos de objetos en el bucket sean de acceso público, pero, en general, es más rápido y sencillo hacer que todos los archivos en el bucket sean de acceso público.
Los visitantes reciben un código de respuesta http 403
cuando solicitan la URL de un archivo que no es público o que no existe. Consulta la siguiente sección para obtener información sobre cómo agregar una página de error que use un código de respuesta http 404
.
Recomendado: asigna páginas especializadas
Puedes asignar un sufijo de página de índice, controlado por la propiedad MainPageSuffix
, y una página de error personalizada, controlada por la propiedad NotFoundPage
. La asignación es opcional, pero, sin una página de índice, no se entrega nada cuando los usuarios acceden a tu sitio de nivel superior, por ejemplo, http://www.example.com
. Para obtener más información, consulta los ejemplos de configuración de sitios web.
En el siguiente ejemplo, MainPageSuffix
se configura como index.html
y NotFoundPage
como 404.html
:
Console
- En la consola de Google Cloud, ve a la página Buckets de Cloud Storage.
En la lista de bucket s, encuentra el bucket que creaste.
Haz clic en el menú Ampliado del bucket (more_vert) asociado al bucket y selecciona Editar configuración del sitio web.
En el cuadro de diálogo de configuración del sitio web, especifica la página principal y la página de error.
Haz clic en Guardar.
Línea de comandos
Usa el comando buckets update
con las marcas --web-main-page-suffix
y --web-error-page
.
gcloud storage buckets update gs://www.example.com --web-main-page-suffix=index.html --web-error-page=404.html
Si no hay errores, el comando mostrará lo siguiente:
Updating gs://www.example.com/... Completed 1
Bibliotecas cliente
C++
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage C++.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
C#
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage C#.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Go
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Go.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Java
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Java.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Node.js
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Node.js.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
PHP
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage PHP.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Python
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Python.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
Ruby
Si deseas obtener más información, consulta la documentación de referencia de la API de Cloud Storage Ruby.
Para autenticarte en Cloud Storage, configura las credenciales predeterminadas de la aplicación. Si deseas obtener más información, consulta Configura la autenticación para un entorno de desarrollo local.
API de REST
API de JSON
Tener la gcloud CLI instalada e inicializadaa fin de generar un token de acceso para el encabezado
Authorization
.Como alternativa, puedes crear un token de acceso con OAuth 2.0 Playground y, luego, incluirlo en el encabezado
Authorization
.Crea un archivo JSON que establezca las propiedades
mainPageSuffix
ynotFoundPage
en un objetowebsite
en las páginas deseadas:{ "website":{ "mainPageSuffix": "index.html", "notFoundPage": "404.html" } }
Usa
cURL
para llamar a la API de JSON con una solicitud de bucketPATCH
. Para www.example.com, usa lo siguiente:curl -X PATCH --data-binary @web-config.json \ -H "Authorization: $(gcloud auth print-access-token)" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/www.example.com"
API de XML
Tener la gcloud CLI instalada e inicializadaa fin de generar un token de acceso para el encabezado
Authorization
.Como alternativa, puedes crear un token de acceso con OAuth 2.0 Playground y, luego, incluirlo en el encabezado
Authorization
.Crea un archivo XML que establezca los elementos
MainPageSuffix
yNotFoundPage
de un elementoWebsiteConfiguration
en las páginas deseadas:<WebsiteConfiguration> <MainPageSuffix>index.html</MainPageSuffix> <NotFoundPage>404.html</NotFoundPage> </WebsiteConfiguration>
Usa
cURL
para llamar a la API de XML con una solicitud de bucketPUT
y un parámetro de string de consultawebsiteConfig
. Para www.example.com, usa lo siguiente:curl -X PUT --data-binary @web-config.xml \ -H "Authorization: $(gcloud auth print-access-token)" \ https://storage.googleapis.com/www.example.com?websiteConfig
Prueba el sitio web
Verifica que el contenido se entregue desde el bucket mediante una solicitud del nombre de dominio en un navegador. Puedes hacer esto con una ruta a un objeto o solo con el nombre de dominio, si estableces la propiedad MainPageSuffix
.
Por ejemplo, si tienes un objeto llamado test.html
almacenado en un bucket llamado www.example.com
, comprueba que se pueda acceder a él desde www.example.com/test.html
en el navegador.
Realiza una limpieza
Una vez que completes el instructivo, puedes limpiar los recursos que creaste para que dejen de usar la cuota y generar cargos. En las siguientes secciones, se describe cómo borrar o desactivar estos recursos.
Borra el proyecto
La manera más fácil de eliminar la facturación es borrar el proyecto que creaste para el instructivo.
Para borrar el proyecto, haz lo siguiente:
- In the Google Cloud console, go to the Manage resources page.
- In the project list, select the project that you want to delete, and then click Delete.
- In the dialog, type the project ID, and then click Shut down to delete the project.
¿Qué sigue?
- Consulta ejemplos y sugerencias sobre cómo usar depósitos para alojar un sitio web estático.
- Visita la sección de solución de problemas para alojar un sitio web estático.
- Obtén información sobre el hosting de activos estáticos para un sitio web dinámico.
- Obtener información sobre todas las opciones de entrega web.
- Prueba otros instructivos de Google Cloud que usan Cloud Storage.