Despliegue
Puedes entregar su Sistema de Páginas de Estado creado con Statusfy de dos maneras diferentes: Generación Estática o Renderizado por Servidor.
RECUERDA
Debes configurar un valor válido de baseUrl
en config.js
para que las URL Alternativas sean completamente válidas.
Enumeramos algunos servicios diferentes que puedes utilizar para alojar su Sistema de Páginas de Estado. Ten en cuenta la entrega/implementación del sitio compatible con cada servicio:
Servicio | Generación Estática | Renderizado por Servidor |
---|---|---|
GitHub Pages | ✔︎ | ✘ |
GitLab Pages | ✔︎ | ✘ |
Netlify | ✔︎ | ✘ |
Firebase | ✔︎ | ✔︎ |
Surge | ✔︎ | ✘ |
Heroku | ✔︎ | ✔︎ |
Now v1 | ✔︎ | ✔︎ |
Now v2 | ✔︎ | ✔︎ |
Las siguientes guías se basan en algunas suposiciones compartidas:
- Estás utilizando la ubicación de destino de compilación predeterminada (./dist).
- Statusfy se instala como una dependencia local en su proyecto, y has configurado los siguientes scripts npm:
{
"scripts": {
"dev": "statusfy dev",
"generate": "statusfy generate",
"build": "statusfy build",
"start": "statusfy start"
}
}
GitHub Pages
- Establece el dominio personalizado en
baseUrl
de tuconfig.js
ADVERTENCIA
Desde la versión v0.3.0
, los despliegues bajo una sub-ruta (p.e. https://<username>.github.io/<repo>/
) ya no son soportados. Necesitas establecer un dominio personalizado.
- Agrega un script de implementación a
package.json
:
{
"scripts": {
"deploy": "gh-pages -d dist"
}
}
- Y ejecuta:
#!/usr/bin/env sh
# instala gh-pages
npm install gh-pages --save-dev # o yarn add gh-pages --dev
# genera
npm run generate # o yarn run generate
# despliega
npm run deploy # o yarn run deploy
Visita las Páginas de GitHub para obtener información sobre cómo configurar dominios personalizados y obtener información sobre configuraciones avanzadas.
Referencias
- Gatsby: How Gatsby Works with GitHub Pages
- Nuxt: How to deploy on GitHub Pages?
- VuePress: Deploying to GitHub Pages
GitLab Pages y GitLab CI
- Establece el dominio personalizado en
baseUrl
de tuconfig.js
ADVERTENCIA
Desde la versión v0.3.0
, los despliegues bajo una sub-ruta (p.e. https://<username o group>.gitlab.io/<repo>/
) ya no son soportados. Necesitas establecer un dominio personalizado.
- Crea un archivo llamado
.gitlab-ci.yml
en la raíz de tu proyecto con el contenido a continuación. Esto construirá e implementará tu sitio cada vez que realices cambios en su contenido.
image: node:latest
# Esta carpeta se almacena en caché entre las compilaciones
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
paths:
- node_modules/
pages:
script:
- npm install # o yarn install
- npm run generate -- -d public # o yarn run generate -d public
artifacts:
paths:
- public
only:
- master
Visita las GitLab Pages para aprender cómo configurar dominios personalizados y conocer las configuraciones avanzadas.
Referencias
Netlify
- En Netlify, configura un nuevo proyecto con la siguiente configuración:
- Comando de Compilación:
npm run generate
oyarn generate
- Directorio de Publicación:
dist
Netlify desplegará automáticamente el sitio y lo publicará cada vez que envíes tu repositorio Git.
Referencias
Firebase
Primero, asegúrese de tener firebase-tools instalado.
Generación Estática
- Create el archivo
firebase.json
en la raíz de tu proyecto con el siguiente contenido:
{
"hosting": {
"public": "./dist",
"ignore": []
}
}
- Crea el archivo
.firebaserc
en la raíz de tu proyecto con el siguiente contenido:
{
"projects": {
"default": "<YOUR_FIREBASE_ID>"
}
}
- Y ejecuta:
#!/usr/bin/env sh
# genera
npm run generate # o yarn run generate
# depliega
firebase deploy
Referencias
Renderizado por Servidor
TODO
Surge
Asegúrete de tener surge instalado.
Ejecuta:
#!/usr/bin/env sh
# genera
npm run generate # o yarn run generate
# depliega
surge dist
Visite la Ayuda de Surge para obtener información sobre cómo configurar un dominio personalizado y obtener información sobre las configuraciones avanzadas.
Referencias
Heroku
Primero, instala y configura el Heroku CLI.
Generación Estática
Puede usar el Heroku Buildpack Static para manejar los archivos estáticos de tu sitio.
- Cree un archivo llamado
static.json
en la raíz de tu proyecto con el contenido a continuación:
{
"root": "./dist"
}
- Añade al script
heroku-postbuild
en tu archivopackage.json
:
{
// ...
"scripts": {
// ...
"heroku-postbuild": "npm run generate"
// ...
}
// ...
}
- Configura el control remoto Heroku git:
#!/usr/bin/env sh
# registrar los cambios
git init
git add .
git commit -m "Mi sistema de página de estado está listo para su despliegue."
# crea una nueva aplicación vacía en Heroku
heroku create
# configurar buildpack para sitios estáticos
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
- Despliega la aplicación:
#!/usr/bin/env sh
# publicar el sitio
git push heroku master
Referencias
Renderizado por Servidor
Primero, debe leer la documentación de Heroku para Node.js.
Necesitamos decirle a Heroku que instale las
devDependencies
del proyecto:
heroku config:set NPM_CONFIG_PRODUCTION=false
- Establece el host que la aplicación debería escuchar:
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production
- Add a
heroku-postbuild
script in yourpackage.json
:
{
// ...
"scripts": {
// ...
"heroku-postbuild": "npm run build"
// ...
}
// ...
}
- Cree un archivo llamado
Procfile
en la raíz de su proyecto con el contenido a continuación:
web: npm run start
- Despliega la aplicación:
#!/usr/bin/env sh
# publicar el sitio
git push heroku master
Referencias
v1
Now (legacy)IMPORTANTE
La versión v1 de Now está en desuso. Lea el anuncio aquí.
Primero, debes instalar la CLI de Now globalmente:
npm install -g now
Generación Estática
- Agrega un archivo
now.json
a la raíz del proyecto:
{
"version": 1,
"name": "my-cool-statusfy",
"alias": "my-cool-statusfy",
"type": "static",
"files": [
"dist"
],
"static": {
"public": "dist"
}
}
- Agrega un script de despliegue a
package.json
:
{
"scripts": {
"deploy": "npm run generate && now && now alias"
}
}
- Y ejecuta:
# despliegue
npm run deploy # o yarn run deploy
Visita la Documentación de Now para aprender cómo personalizar el comportamiento del servicio estático.
Referencias
Renderizado por Servidor
- Agrega un archivo
now.json
a la raíz del proyecto:
{
"version": 1,
"name": "my-cool-statusfy",
"alias": "my-cool-statusfy",
"env": {
"NODE_ENV": "production",
"NPM_CONFIG_PRODUCTION": "false"
},
"engines": {
"node": "8"
}
}
- Agrega un script de despliegue a
package.json
:
{
"scripts": {
"deploy": "now && now alias"
}
}
- Y ejecuta:
# despliegue
npm run deploy # o yarn run deploy
Visita la Documentación de Now para obtener más información sobre los despliegues de Node.js.
v2
NowPrimero, debes instalar la CLI de Now globalmente:
npm install -g now
Generación Estática
- Agrega un archivo
now.json
a la raíz del proyecto:
{
"version": 2,
"name": "my-cool-statusfy",
"alias": "my-cool-statusfy",
"builds": [
{ "src": "package.json", "use": "@now/static-build" }
]
}
- Crea un archivo llamado
.nowignore
en la raíz de tu proyecto con el contenido a continuación:
node_modules
- Agrega un script de despliegue a
package.json
:
{
"scripts": {
"now-build": "npm run generate"
}
}
Referencias
Renderizado por Servidor
En este momento, No se puede implementar una aplicación Statusfy Renderizado por Servidor con Now v2. Por favor, utiliza Now v1.
← Comandos