web-dev-qa-db-fra.com

comment déployer l'api nodejs et l'application vuejs sur un serveur

J'ai développé des applications web pour l'api de repos de nœud et les vuesj, j'essaie de déployer les deux projets sur un serveur aws qui exécute ubuntu. Les deux applications ont un port différent, domaine j'essaie de configurer api.example.com pour api et example.com pour vue app. Je peux exécuter les deux applications une fois après avoir exécuté la commande en SSH, mais je besoin d'eux pour le faire fonctionner à jamais. Ce que j'ai fait,

  1. Déployer sur des applications séparément
  2. Les applications peuvent accéder avec des ports

J'ai besoin de leur accès

  1. api.example.com
  2. exemple.com

quelles sont les étapes à suivre, toute modification du fichier hôte.

5

C'est ainsi que nous exécutons notre interface utilisateur VueJS et ExpressJS REST API à partir du même serveur.

Nous gérons nos services avec PM2 .

VueJS (environnement de développement, vous pouvez ajouter les mêmes paramètres à la production)

Dans package.json, Ajoutez "start": "Host='0.0.0.0' PORT=80 npm run dev",, Où 80 est le port que VueJS écoute, au tableau "scripts": {..}. Ensuite, après avoir installé PM2, (pour les développeurs), nous pouvons démarrer VueJS avec cd /location/of/vue/root; Sudo pm2 start npm run dev --name Vue -- start. (Assurez-vous qu'Apache n'est pas en cours d'exécution).

Veuillez noter que la définition de l'hôte sur 0.0.0.0 est importante. Ne le définissez pas sur LocalHost ou sur l'adresse IP de vos serveurs ou vous pourriez rencontrer des problèmes.

ExpressJS

Dans le /location/of/express/app.js Ajoutez ceci similaire au bas du fichier: app.listen(process.env.PORT || 8081), où 8081 est le port sur lequel votre REST API doit écouter. Je peux puis lancez-le avec Sudo pm2 start /location/of/express/app.js --name Express

À ce stade, VueJS devrait être disponible sur www.example.com (port 80 implicite) et l'API REST serait disponible sur www.example.com:8081.

Si vous souhaitez que api.example.com/ pointe vers l'API, vous devez vous assurer que votre DNS pointe le sous-domaine "api" vers le port souhaité, ou vous devrez peut-être ajouter le port dans l'URL comme ci-dessus.

De plus, vous pouvez également facilement suivre les journaux via PM2 avec pm2 logs APPNAME --lines 100.

J'ai trouvé une autre façon de déployer vue app et express/nodejs sur un serveur sans utiliser PM. C'est ce que j'ai fait

  1. Créez votre code vue en utilisant la commande npm run build. Cela créera un dossier dist qui devrait avoir le fichier index.html Et static dossier.
  2. Copiez le dossier dist dans votre référentiel de code serveur. Dans mon cas, j'ai créé un dossier public et déplacé le dossier dist dans public.
  3. Dans le fichier app.js Juste avant la ligne module.exports=app, Copiez les lignes de code suivantes

    //These 2 lines make sure that vue and express app are coming from the same server. app.use('/static', express.static(path.join(__dirname,"../public/dist/static/"))); app.get('/', function(req,res) { res.sendFile('index.html', { root: path.join(__dirname, '../public/dist/') }); });

Première ligne assurez-vous que le dossier /static Est accessible et la deuxième ligne servira le fichier index.html Lorsque vous exécutez le serveur de noeud. Le routage entre les composants sera pris en charge par vue.

4
gilango