node deployment tutorial two

Turn: https://www.cnblogs.com/yesyes/p/7168449.html

This article describes how to run vuejs in the service end of the project, if the previous tutorial you succeed output hello world, that this one is more simple
First of all you have been able to run a locally based project vuejs, I before writing to imitation hungry yet to deploy the project as an example, if you have not already written project, I can use this program to learn, https://github.com/wmui/vue-elm
this deployment to use the oldest and most hassle free method, ftp program to upload

Project Package

npm run buildAfter there will be a dist directory, this folder is what we want to deploy the project on-line

Write a little script

If you can point nodejs, the script is well understood, the following content is app.js startup script

const fs = require('fs');
const path = require('path'); const express = require('express'); const app = express(); // 模拟数据，api服务 var appData = require('./data.json'); var seller = appData.seller; var goods = appData.goods; var ratings = appData.ratings; // api接口 var apiRoutes = express.Router(); apiRoutes.get('/seller', function(req, res) { res.json({ erron: 0, data: seller }) }); apiRoutes.get('/goods', function(req, res) { res.json({ erron: 0, data: goods }) }); apiRoutes.get('/ratings', function(req, res) { res.json({ erron: 0, data: ratings }) }); app.use('/api', apiRoutes); app.use(express.static(path.resolve(__dirname, './dist'))) app.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8') res.send(html) }) app.listen(8082);

Briefly explain the above code, because the project needs some data, my simulation data are data.json this file, simply write all three routes correspond to the analog data acquisition. Then dist directory still out, reading index.html (because it is a one-page application, which is only a html file) under the dist directory, listening 8082 port

Let the local file to be uploaded are ready:
We use the express script framework, we can generate a package.json, add into dependency

{
  "name": "vue-elm-dist",
  "version": "1.0.0",
  "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.15.3" } }

Done, we want to upload files project probably a long way
to create a new folder, such as elm, the entire project uploaded to the root directory of the www folder via ftp

Start Service

Log in to your server, cd to elm folder, perform npm install install dependencies, then pm2 start app.js successfully start the service
now by adding ip port access normal form, but if you want to access by domain name you need to configure nginx mapping

nginx port mapping configuration

First you need to resolve a secondary domain name to your host ip, for example, I use elm.86886.wang this second-level domain
configuration file and basically the same before

upstream elm {
    server 127.0.0.1:8082;
}

server {
    listen 80; server_name elm.86886.wang; location / { proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Nginx-proxy true; proxy_pass http://elm; proxy_redirect off; } }

I named it the elm-8082.conf
then uploaded via ftp /etc/nginx/conf.d/directory
execute sudo nginx -s reload restart nginx server, over a ten minutes should be working visit  Click to visit