如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目


Posted in Javascript onJanuary 20, 2019

项目: vue + express + mongodb

项目前后分离部署在一台服务器上面

  • express端口:3000
  • mongodb端口:27017
  • vue端口:本地是8080 服务端是:80

本地开发配置

本地开发基于vue cli 端口是 8080如果请求api的时候在前缀加上localhost:3000会提示跨域问题,我们可以使用下面方式来解决这个问题

在vue项目路径找到这个文件 /vue-item/config/index.js 找到这行代码:

proxyTable: {}

添加如下配置

demo:

proxyTable: {
    '/v1/**':{
    target: 'http://localhost:3000/',
    pathRewrite: {
     '^/v1': '/'
    }
   }
  }

v1 是我给api自动添加的前缀

这个前缀可以使用 axios 配置添加

在main.js 主入口文件添加

如下

import apiConfig from '../config/api.config'
// import axios
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
// Axios.defaults.baseURL = apiConfig.baseUrl;
Axios.defaults.baseURL = 'v1/' 这样也ok的

api.config

判断是开发模式还是本地模式,其实不需要这么麻烦 直接

const isProdMode = Object.is(process.env.NODE_ENV, 'production')

module.exports = {
 baseUrl: isProdMode ? 'api.shudong.wang/v1/' : 'v1/'
}

如果把axios 配置了自动前缀

每次访问的时候

data(){
  return {
   articleList:Object
  }
 },
 mounted: function(){
  this.getArticleList()
 },
 methods:{
  getArticleList(){
   console.log(111111111)
     this.$http.get("/article/list") // this.$http axios使用的一种方式
     .then((response)=>{
       console.log(response.data)
       let res = response.data;
       this.articleList = res.data;

     })
     .catch((error) =>{
      console.log(error)
     })
  }
 },

上面请求的例子中相当于访问: localhost:8080/v1/article/list

这样就可以解决跨域问题

其实最终访问的是 localhost:3000/article/list express的api

这个v1只是api版本的标识,如果想带着,并且api是可以v1版本方式访问的,把代理的路径重新规则去掉就可以

操作如下:

proxyTable: {
    '/v1/**':{
    target: 'http://localhost:3000/',
    //pathRewrite: { //这个规则去掉
    // '^/v1': '/'
    //}
   },
   '/goods/*':{
    target:'http://localhost:3000'
   },
   '/users/**':{
    target:'http://localhost:3000'
   }
  }

服务端部署

本地可以使用proxyTable 解决跨域问题,那么服务端怎么解决跨域问题呢?

answer:使用nginx反向代理

nginx配置: 仔细分析一下看看是否适合自己的业务场景

server
  {
    listen 80;
    #listen [::]:80;
    server_name zhenfan.shudong.wang ; # 你的域名不需要加http 
    index index.html index.htm index.php default.html default.htm default.php;
    root /home/wwwroot/zhenfan/dist;

    include none.conf;
    #error_page  404  /404.html;

    # Deny access to PHP files in specific directory
    #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

    include enable-php.conf;

    location /v1 {
      proxy_pass http://127.0.0.1:3000/; # 当访问v1的时候默认转发到 3000端口
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
      expires   30d;
    }

    location ~ .*\.(js|css)?$
    {
      expires   12h;
    }

    location ~ /.well-known {
      allow all;
    }

    location ~ /\.
    {
      deny all;
    }

    access_log off;
  }

关于express链接mongodb可以直接填写端口号,不存在跨域问题,直接 127.0.0.1:27017就ok,

怎么在服务器上面搭建可以参考上篇 mongodb篇

关于有什么问题,可以在下面留言,希望你是来讨论技术的。

上次写完一篇,一个小朋友,来到这里咬文嚼字,针对 部署这个词,说用的不当,还口口声声说是来讨论技术,把注意力放在这个上面上真没意义。

希望本篇文章能帮到你,解决你的问题。 也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
Javascript玩转继承(一)
May 08 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
js序列化和反序列化的使用讲解
Jan 19 #Javascript
vue-router传参用法详解
Jan 19 #Javascript
vue-router实现嵌套路由的讲解
Jan 19 #Javascript
vue-router实现编程式导航的代码实例
Jan 19 #Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 #Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 #Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 #Javascript
You might like
PHP生成plist数据的方法
2015/06/16 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
php中数组最简单的使用方法
2020/12/27 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
Python写的服务监控程序实例
2015/01/31 Python
Python中的with...as用法介绍
2015/05/28 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python常见工厂函数用法示例
2018/03/21 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
Java中compareTo和compare的区别
2016/04/12 面试题
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
酒店总经理工作职责
2013/12/13 职场文书
房屋公证委托书
2014/04/03 职场文书
学校师德承诺书
2014/05/23 职场文书
罚款通知怎么写
2015/04/22 职场文书
农村党员干部承诺书
2015/05/04 职场文书
党内外群众意见范文
2015/06/02 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS