如何优雅的在一台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 相关文章推荐
jQuery 阴影插件代码分享
Jan 09 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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文件下载类
2006/12/06 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
javascript常用的方法整理
2015/08/20 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
公务员培训自我鉴定
2013/09/19 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
停车位租赁协议书
2014/09/24 职场文书
超市食品安全承诺书
2015/04/29 职场文书
在校学生证明格式
2015/06/24 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL