Nodejs server deployment tutorial 1, segmentfault.com/a/11… This article is mainly about how to run vuejs projects on the server side. If you successfully exported Hello World in the last tutorial, this article will be easier. First, you need to have a vuejs-based project that can run locally. Can use my project to learn, github.com/wmui/vue-el… This deployment uses the oldest and most effortless method, FTP, to upload projects

Project package

After the NPM run build, there will be a dist directory, which is the project we will deploy online

Write a small script

If you know how to use nodejs, the script is easy to understand. Here is the contents of the app.js startup script



const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();
// Analog data, API services
var appData = require('./data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
/ / API interface
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(The '*'.function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})
app.listen(8082);Copy the code

A brief explanation of the above code, because the project needs some data, my simulation data are in the data.json file, all simple write three routes, corresponding to obtain the simulation data. The dist directory is statically removed, and the dist directory is read in index.html (because it is a single-page application, there is only one HTML file), listening on port 8082

Let’s get everything ready to upload locally: our script uses the Express framework, so we can generate a package.json to add dependencies to



{
  "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"}}Copy the code

With that done, the file project we want to upload will look something like this

Create a new folder such as ELM and upload the entire project to the root directory WWW folder via FTP

Start the service

Log in to your server, CD to the elm folder, execute NPM install to install dependencies, and pm2 start app.js to start the service successfully

IP and port access works, but nginx mapping is required if you want to access by domain name

Nginx port mapping configuration

First, you need to resolve a secondary domain name to your host IP address. For example, the secondary domain name configuration file ELM.86886. Wang is basically the same as the previous one



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; }}Copy the code

Conf file to /etc/nginx/conf.d/, execute sudo nginx -s reload to restart the nginx server. After 10 minutes, it should be accessible