Vamos a ver cómo desplegar un sitio web estático en Vue.js en GitHub

Obviamente hay muchas alternativas: desplegarlo en #AWS #S3 como un sitio web estático, con en #GitHub pages y quede versionado, o en plataformas como #Heroku que ofrecen capa gratuita, o en servicios de #AWS como #AWS Amplify o #앱 러너

Veamos algunas de estas alternativas, comenzando por las más básicas: el sitio web estático en S3, y las GitHub Pages

El Sitio 웹(로컬)

El sitio web que tomaremos de ejemplo, es un sitio de cinco pantallas con imágenes de Dinosaurios: es el "Jurassic Site", un sitio estático muy sencillo armado con HTML, Javascript, CSS y Vue.js para enseñar de forma didáctica los fundamentos de la programación y el desarrollo web... Es un sitio armado con fines didácticos, no van a encontrar información muy científica ni palentológicamente correcta sobre los dinosaurios :)



Además de ser un sitio con fines educativos, las imágenes fueron tomadas de www.flaticon.com y de los 링크 de distribución de imágenes señaladas en el archivo CREDITS.md del repositorio Github

엘 레포 및 GitHub

사용 가능:
https://github.com/Fundamentos-de-Informatica-Python/jurassic-site

플라스크에는 프론트와 백엔드가 있고 여전히 반복 중입니다 ...

옵션 I: GitHub 페이지

Veamos como sería con GitHub Pages: Ya tenemos el repo en GitHub, entonces... settings **> **pages:



Y después de unos segundos, nos indica que está disponible



Con la URL:
https://fundamentos-de-informatica-python.github.io/jurassic-site/



Lo que tiene de bueno esta variante, es que un push a master actualiza el 사이트. Además, es es gratuita y eventualmente se le podría configurar un dominio custom

옵션 II: AWS S3

Para desplegar un sitio en un bucket de S3, es simplemente subir los archivos al bucket, manteniendo la estructura, convirtiendo al sitio en un bucket de S# y agregando una politica publcia:

Para subir al bucket desde la CLI podemos ejecutar:

aws configure

aws s3 cp jurassic-front s3://jurassic-site/ --recursive  --exclude ".vscode"

y el bucket queda poblado:



사이트오 웹:


Que nos retorna:

http://jurassic-site.s3-website-us-west-2.amazonaws.com/jurasssic-site-01-trex.html

Nos queda habilitar a la Política públcia:
{
"Version": "2012-10-17",
"Id": "PolicyMixJurassic",
"Statement": [
{
"Sid": "PolicyMixJurassicPolicy",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::jurassic-site/*"
}
]
}


Y obtenemos al sitio estático:

http://jurassic-site.s3-website-us-west-2.amazonaws.com/jurasssic-site-01-trex.html

S3에서 del Sitio 웹 업데이트:

El inconveniente, es que no lo tenemos integrado al GitHub, y para subir los cambios por CLI, en principio subiría todo el site completo... obviamente muy ineficiente

결론:

En principio, por ahora solo exploramos dos formas de publicar un sitio estático: GitHub pages, y con S3, en un siguiente post seguiremos incorporando variantes que harán la integración continua del sitio mucho más llevadera y alineada con las buenas prácticas de desarrollo.

Nos vemos en la próxima!
파블로


자원

Pexels 및 flaticon의 이미지