nodejs服务器部署教程二,把vue项目部署到线上

42

nodejs服务端部署教程一,https://segmentfault.com/a/11...
这篇文章主要介绍如何在服务端跑vuejs的项目,如果上一篇教程你成功输出了hello world,那这一篇更简单
首先你要有一个已经能在本地跑的基于vuejs的项目,我就以之前写的仿饿了么的项目为例来部署,如果你还没有已经写好的项目,可以用我的这个项目来学习,https://github.com/wmui/vue-elm
这次部署就用最古老最省心的方法,ftp来上传项目

项目打包

npm run build后会有一个dist目录,这个文件夹就是我们要部署上线的项目

写一个小脚本

如果你会点nodejs,脚本就很好理解了,下面是app.js启动脚本的内容

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);

简单解释一下上面的代码,由于项目需要些数据,我的模拟数据都在data.json这个文件里,所有简单的写了三个路由,对应获取到模拟数据。然后把dist目录静态出来,读取dist目录下的index.html(因为是单页应用,只有这一个html文件),监听8082端口

我们先在本地把要上传的文件都准备好:
我们的这个脚本使用了express框架,所以我们可以生成一个package.json,把依赖项添加进去

{
  "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"
  }
}

完成以上操作,我们要上传的文件项目大概长这样
新建一个文件夹如elm,把整个项目通过ftp上传到根目录www文件夹下

启动服务

登陆到你的服务端,cd到elm文件夹,执行npm install 安装依赖,然后pm2 start app.js就成功启动服务了
现在通过ip加端口形式能正常访问,但是如果想通过域名访问就需要配置nginx映射

nginx 端口映射配置

首先你需要把一个二级域名解析到你的主机ip,比如我使用的elm.86886.wang这个二级域名
配置文件和之前的基本一致

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;
    }
}

我把它命名为elm-8082.conf
然后通过ftp上传到/etc/nginx/conf.d/目录下
执行sudo nginx -s reload重启nginx服务器,过个十分钟就应该能正常访问了 点击访问

你可能感兴趣的

19 条评论
蚂蚁日记 · 2017年07月21日

为什么要用node 做静态资源代理 不直接用nginx?

+2 回复

草莓小奶球 · 2017年08月14日

请问,如果我的服务器是虚拟云主机,不能操作命令行那该如何部署上去呢?

+2 回复

0

那只能让服务商帮你配置,国内支持的node的虚拟主机我是没找到合适的,国外或许有

wmui 作者 · 2017年08月14日
0

噗,那估计做不到。有没有办法在本地直接配置好,在本地也能打开dist目录里的index.html呢?这样扔到服务器上面就应该可以直接访问了啊

草莓小奶球 · 2017年08月14日
1

@草莓小奶球 虚拟主机有很多支持php的,你把打包后的文件直接丢到apache,效果也是一样的,本地用phpstudy可跑测试效果

wmui 作者 · 2017年09月03日
海浪 · 2017年07月21日

可以写个怎么部署到php里面么。。

回复

0

如果是虚拟主机的话可以(环境已经配置好),如果是vps需要自己配环境的话,这个真的没弄过

wmui 作者 · 2017年07月21日
nanyang24 · 2017年12月11日

为什么按照这样设置二级域名还是没有用呢???

回复

0

应该是哪里配置错误了吧,之前写的比较乱,我最近整理了一下,https://github.com/wmui/web-d...

wmui 作者 · 2017年12月11日
0

@wmui 多谢~可是还是不行,想将饿了么的Vue项目上线到服务器。用ip+port可以打开,缺怎么也转不了网址的形式,可能是本来服务器用了Ghost建站的原因?真心求助你

nanyang24 · 2017年12月11日
1

@wmui 搞定了^^,加了条A记录才成功的,有点懵逼

nanyang24 · 2017年12月11日
ritsu · 2017年12月15日

单独跑了一个nodejs文件, 用ip+端口打开访问不了 怀疑是nginx拦截了?

回复

李子森 · 2017年12月17日

@wmui 你好,我按上面的配置,部署到服务器后出现一个问题:能访问到页面的html,页面也能正常跳转,但是.data.json 中的内容都没有加载;请问有什么解决方法呢

回复

0

同求,我部署在了万网的虚拟主机上,也不能显示数据

longzhou · 2018年01月02日
0

虚拟主机要设置MIME才可以识别json

王彦峰 · 2018年03月20日
我是包子脸 · 2018年02月22日

为什么这么配置登陆网页是500错误。。。

回复

cn_jiangyi · 2018年10月31日

pm2 list 中有2个实例 一个是app 一个是hello 请问如何访问到hello

回复

yuanxin778 · 4月25日

按照教程执行了,但没有跑起来啊~~~

回复

载入中...