Práctica de Heroku: Cómo implementar con éxito el contenido front-end de Vue.js en Heroku

Andamiaje de Vue.js

• Primero, use el andamiaje de Vue para crear un proyecto vue, que uso en la práctica Vue2, así que siga los pasos a continuación para crear
• Vue CLI puede crear nuevos proyectos de Vue 2 o Vue 3. Puede elegir la versión de Vue que desee al crear un nuevo proyecto.
• Estos son los pasos para crear un proyecto Vue 2 usando Vue CLI:

Instale Vue CLI (si aún no lo ha hecho):

	npm install -g @vue/cli

• Esto instalará globalmente la última versión de Vue CLI.

crear nuevo proyecto

vue create my-project

• Reemplace my-projectcon el nombre de su proyecto deseado.

• Elija Vue 2un ajuste preestablecido: después de ejecutar vue createel comando, Vue CLI le permitirá elegir un ajuste preestablecido. Puede elegir el ajuste preestablecido "Predeterminado (Vue 2)" para crear un proyecto de Vue 2. Si necesita una configuración más compleja, como incluir Vuex o Vue Router, puede seleccionar "Seleccionar funciones manualmente" y seleccionar manualmente Vue 2 y otras opciones que necesite.

• Entonces es hora de desarrollar tu proyecto.

Heroku implementa Vue2

• Este artículo es aplicable a la situación: usted usa para Vueconstruir el front-end y otro marco (Django) para construir el back-end, y desea implementar el front-end y el back-end en dos proyectos diferentes de Heroku (porque el despliegue de Heroku del proyecto basado en Django es muy problemático, así que lo implementaré por separado), luego debe implementarlo por Vueseparado
• Vue2Lo que se crea es solo un contenido de front-end. Para implementar correctamente, necesitamos agregar Vueun archivo a este proyecto server.js. Puede pensar en él como Herokuuna entidad implementada en. Esto server.jspermitirá que las personas que visiten esta aplicación obtengan la página estática de front-end cuando se esté ejecutando.
• El siguiente es un server.jsejemplo de

directorio de proyectos

.
├── Procfile
├── README.md
├── babel.config.js
├── index.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── server.js
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── http.js
│   ├── main.js
│   ├── router
│   ├── test.html
│   ├── test.js
│   └── views
└── vue.config.js

• Excepto que server.jsotro es mi directorio de archivos original
• server.jsCree un nuevo archivo directamente en el directorio raíz

servidor.js

• Hacer este paso en realidad crea un servidor estático, puede usar Node.jsla expressbiblioteca para crear un servidor simple para su aplicación Vue
• Instalar expreso:

  npm install express --save
  

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();

app.use('/', serveStatic(path.join(__dirname, '/dist')));

const port = process.env.PORT || 8080;
app.listen(port);

console.log('Listening on port: ' + port);

• Porque Vuelos recursos estáticos del proyecto creado por scaffolding se colocan /disten el directorio, aunque puedes verlo desde mi directorio de archivos, publicpero no creas que aquí es donde se almacenan los recursos estáticos, y no escribas app.use('/', serveStatic(path.join(__dirname, '/dist')));comoapp.use('/', serveStatic(path.join(__dirname, 'public')));

paquete.json

• Este archivo generalmente define algunos script(scripts), es decir, inicia su servidor u otros comportamientos con algunos comandos cortos

"scripts": {
    
    
    "start": "node server.js",
    "build": "vue-cli-service build"
}

Crear perfil

• Procfilees un archivo de texto sin extensión en el que define el tipo de proceso de su aplicación y el comando para ejecutar. De esta manera, Heroku sabe cómo ejecutar su aplicación. ProcfileCree y agregue lo siguiente en el directorio raíz del proyecto :

web: npm run start

Siga la guía de heroku para inicializar git y enviar el código

• Crear una nueva aplicación heroku
  
• Envíe el código siguiendo Deployla guía en
  
  

Posibles problemas

• Si la implementación de Heroku se realiza correctamente sin mostrar ninguna página y no hay mensajes de error, podría deberse a varios motivos. Aquí hay algunos problemas posibles y las soluciones correspondientes:

• Verifique su secuencia de comandos de compilación: asegúrese de package.jsontener el comando de compilación correcto definido en el archivo, generalmente build: "vue-cli-service build". Cuando presione a Heroku, Heroku ejecutará automáticamente este comando de compilación para crear su aplicación Vue.js.

• Confirme la configuración de server.js: verifique que server.jsla ruta de su archivo esté configurada correctamente para archivos estáticos. Si creó el proyecto utilizando Vue CLI, los archivos estáticos generados se ubicarán disten el directorio. Debe asegurarse de que el middleware express.static apunte a este directorio. Por ejemplo:

• Asegúrese de que Procfile esté configurado correctamente: Procfileel archivo que le dice a Heroku cómo iniciar su aplicación. Asegúrese de que el contenido de Procfile sea correcto y que el tipo de proceso web apunte al comando de inicio correcto. Por ejemplo, si usa server.jsun archivo para iniciar el servidor, Procfiledebe contener lo siguiente:

  web: node server.js
  

• Verifique los registros de Heroku: incluso si Heroku no muestra errores directamente en la página de la aplicación, puede haber más información en sus registros. Ejecute heroku logs --tailel comando para ver la información de registro más reciente y los registros recién generados.