如何优雅的在一台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为textarea添加maxlength属性的代码
Apr 07 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
Protoss兵种介绍
2020/03/14 星际争霸
PHP 字符串分割和比较
2009/10/06 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
python爬取个性签名的方法
2018/06/17 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
控制工程专业个人求职信
2013/09/25 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
最感人的道歉情书
2015/05/12 职场文书
开学第一周值周总结
2015/07/16 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Pandas数据结构之Series的使用
2022/03/31 Python