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

  1. Establece el dominio personalizado en baseUrl de tu config.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.

  1. Agrega un script de implementación a package.json:
{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}
  1. 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

GitLab Pages y GitLab CI

  1. Establece el dominio personalizado en baseUrl de tu config.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.

  1. 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

  1. En Netlify, configura un nuevo proyecto con la siguiente configuración:
  • Comando de Compilación: npm run generate o yarn 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

  1. Create el archivo firebase.json en la raíz de tu proyecto con el siguiente contenido:
{
 "hosting": {
   "public": "./dist",
   "ignore": []
 }
}
  1. Crea el archivo .firebaserc en la raíz de tu proyecto con el siguiente contenido:
{
 "projects": {
   "default": "<YOUR_FIREBASE_ID>"
 }
}
  1. Y ejecuta:
#!/usr/bin/env sh

# genera
npm run generate # o yarn run generate

# depliega
firebase deploy

Referencias

Renderizado por Servidor

TODO

Surge

  1. Asegúrete de tener surge instalado.

  2. 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.

  1. Cree un archivo llamado static.json en la raíz de tu proyecto con el contenido a continuación:
{
  "root": "./dist"
}
  1. Añade al script heroku-postbuild en tu archivo package.json:
{
  // ...
  "scripts": {
    // ...
    "heroku-postbuild": "npm run generate"
    // ...
  }
  // ...
}
  1. 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
  1. Despliega la aplicación:
#!/usr/bin/env sh

# publicar el sitio
git push heroku master

Referencias

Renderizado por Servidor

  1. Primero, debe leer la documentación de Heroku para Node.js.

  2. Necesitamos decirle a Heroku que instale las devDependencies del proyecto:

heroku config:set NPM_CONFIG_PRODUCTION=false
  1. Establece el host que la aplicación debería escuchar:
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production
  1. Add a heroku-postbuild script in your package.json:
{
  // ...
  "scripts": {
    // ...
    "heroku-postbuild": "npm run build"
    // ...
  }
  // ...
}
  1. Cree un archivo llamado Procfile en la raíz de su proyecto con el contenido a continuación:
web: npm run start
  1. Despliega la aplicación:
#!/usr/bin/env sh

# publicar el sitio
git push heroku master

Referencias

Now (legacy) v1

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

  1. 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"
  }
}
  1. Agrega un script de despliegue a package.json:
{
  "scripts": {
    "deploy": "npm run generate && now && now alias"
  }
}
  1. 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

  1. 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"
  }
}
  1. Agrega un script de despliegue a package.json:
{
  "scripts": {
    "deploy": "now && now alias"
  }
}
  1. 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.

Now v2

Primero, debes instalar la CLI de Now globalmente:

npm install -g now

Generación Estática

  1. 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" }
  ]
}
  1. Crea un archivo llamado .nowignore en la raíz de tu proyecto con el contenido a continuación:
node_modules
  1. 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.