如何优雅的在一台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 UI皮肤定制
Jul 27 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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实现Socket服务器的代码
2008/04/03 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
python基础教程之循环介绍
2014/08/29 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
推广普通话演讲稿
2014/05/23 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
科技活动总结范文
2015/05/11 职场文书
走进毛泽东观后感
2015/06/04 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
background-position百分比原理详解
2021/05/08 HTML / CSS