如何优雅的在一台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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 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手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python抽取指定url页面的title方法
2018/05/11 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
python集合是否可变总结
2019/06/20 Python
python 并发下载器实现方法示例
2019/11/22 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
七一党日活动总结
2014/07/08 职场文书
承租经营合作者协议书
2014/10/01 职场文书
前台接待岗位职责
2015/02/03 职场文书
三行辞职书范文
2015/02/26 职场文书
2015个人半年总结范文
2015/03/09 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android