项目构成:

前端:vue+vant-ui,

数据库:mysql,

后端:node.js

部署方式:nginx代理;

一,首先要拥有自己的服务器,阿里,腾讯都可以,我用的是阿里的;

如果只是做个人项目的话,建议最便宜的就行,当然,如果你是土豪,当我没说;

直接点击购买,会弹出如下框:

操作系统的话我推荐小白选windows吧,毕竟比较简单;

购买完成后,会跳到实例界面,也就是你的服务器实例,

然后建议先停止运行,改密码后再重启,

重启后,按下win+r,输入mstsc, 远程连接你的服务器;

地址就是你的服务器的公网地址,

用户名windows系统的是Administrator

密码是你自己设置的密码,

点击确定后,就进入服务器端了

打开浏览器,下载nginx;

下载NGINX for Windows

下载地址:http://nginx.org/en/download.html

下载好了,直接全部解压,注意路径别带中文,不然启动nginx时会报错。

接着,先不用管服务器,去打包项目,npm run build;

跑完后,会在你的项目里生成一个dist文件夹。

然后把dist文件夹发送到你的服务器上,放在html这个文件夹内

怎么发送,具体自行百度,(CV)好像也可以,我记得,不行的话就百度吧。

接着回来修改conf文件夹下的nginx.conf文件,也就是配置nginx;

注意:坑来了:复制这个地址后,你得到的地址是这样的:C:\ngx\nginx-1.20.2\nginx-1.20.2\html\dist,

所有‘\’一律要改为‘\\’因为‘\’会转义,改为如上图所示;

还有记得把 nginx.conf里的

完成了以上工作后,回到这个假面

点击ndinx.exe,打开,你会发现只是一闪而过,别在意,nginx启动就是这样的

我们可以在任务管理器查看有没有启动;

只要看到这个就说明启动成功了,嘿嘿

接着,回到你的阿里云控制台,实例这里去配置安全组,也就是开放你的端口,让外网能够访问。

点击手动添加,添加8080端口;,保存。

然后重启nginx;

然后再浏览器输入:http://114.55.225.****:8080/  (你的服务器地址) ,就i可以看到你的前端页面了,哈哈,冲冲冲,就快成功了

这时只能看到前端页面,因为后端和数据库都还启动呢

为了方便,我是用的xmapp

启动mysql,导入你的数据库,mysql -uroot< 数据库文件名

接着,修改你的后端服务的地址

启动后端服务,直接,node ./app.js

启动成功!

服务器端口:

数据库端口:

然后,去刚刚安全组的哪里继续配置添加安全组,把这俩端口都添加进去;

浏览器输入:http://114.55.225.****:8080/   服务器地址,会发现报跨域的错,这时候做nginx跨域处理了

在nginx.confserver里加入:

nginx跨域处理:

# #设置跨域配置 Start
set $cors_origin "";
if ($http_origin ~* "^http://api.xx.com$"){
set $cors_origin $http_origin;
}

add_header Access-Control-Allow-Origin $cors_origin always;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
add_header Access-Control-Allow-Credentials true always;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
add_header Access-Control-Max-Age 1728000 always;

# 预检请求处理
if ($request_method = OPTIONS) {
return 204;
}

保存,重新启动nginx.exe

返回浏览器,刷新页面:

当当当,大功告成!

注意哈:前端axios的地址一定要是你后端监听的地址端口,不然会报错拿不到数据。

vue项目部署到阿里云服务器(windows),Nginx代理!的更多相关文章

  1. javaWeb项目部署到阿里云服务器步骤

    记录web项目部署到阿里云服务器步骤 (使用 web项目.阿里云服务器.Xftp.Xshell),敬请参考和指正 1.将要部署的项目打包成WAR文件格式,可以在MyEclipse.Eclipse都可以 ...

  2. javaWeb项目部署到阿里云服务器步骤 完整版

    记录web项目部署到阿里云服务器步骤 (使用 web项目.阿里云服务器.Xftp.Xshell),敬请参考和指正 1.将要部署的项目打包成WAR文件格式,可以在MyEclipse.Eclipse都可以 ...

  3. Java Web项目部署到阿里云服务器(ECS)

    本篇随笔只是记录博主第一次将自己的Java项目部署到阿里云服务器的大致过程,具体细节还请参考别的博文. 一.项目介绍 我做的项目是利用maven项目构建工具进行搭建基于SSM框架的代码共享管理系统,主 ...

  4. 如何把php项目部署到阿里云服务器window server2012__含公网ip访问时jquery/ajax失效解决办法

    记一次蛋疼的折腾. 弄了一晚上最后发觉是360浏览器的问题,换个浏览器就好了.垃圾360用什么IE7文档模式.导致界面和功能失效. 建议大家测试的时候用firefox或者chrome. 项目部署到服务 ...

  5. 2018.11.7 关于将Web项目部署到阿里云服务器-5个步骤搞定

    将Eclipse导出的War包部署到阿里云服务器上,提供给移动端实时的访问 1. 先登录阿里云网站注册账号,选择服务器类型(我用的是 云服务器ECS), 如果你还是在读大学生可享受优惠价,最低好像是9 ...

  6. 将web项目部署到阿里云服务器上

    一.用eclipse将写好的项目打成war包 1.右键点击项目,选择Export 选择打包之后的路径,点击Finsh. 2.购买阿里云服务器 按下图选择 3.设置云服务器防火墙 4.远程连接云服务器 ...

  7. 记录web项目部署到阿里云服务器步骤

    (使用 web项目.阿里云服务器.Xftp.Xshell),敬请参考和指正 1.将要部署的项目打包成WAR文件格式,可以在MyEclipse.Eclipse都可以完成打包,如下图: 2.安装Xshel ...

  8. 将javaweb项目部署到阿里云服务器

    主要步骤:1. 购买阿里云服务器2. 远程连接3. 在云服务器上配javaweb环境:jdk,tomcat,MySQL4. 将项目的war文件放到Tomcat下关于云服务器ECS:如果还想在买服务器之 ...

  9. Django项目部署到阿里云服务器无法发送邮件,发送邮件超时问题解决

    前言 今天, 博主将写了好久的一个Django小项目尝试在阿里云部署上线,由于项目中需要发送邮件,博主调用了163邮箱接口,在本地测试邮件功能正常,可是上线后,邮件功能一直超时崩溃.在百度一番查资料后 ...

随机推荐

  1. 自定义的类实现copy操作

    1.自定义类实现copy操作 让类遵守NSCopying协议 实现 copyWithZone:方法,在该方法中返回一个对象的副本即可. 在copyWithZone方法中,创建一个新的对象,并设置该对象 ...

  2. 初探Matrix Android ApkChecker

    背景 因为我所在的项目是做投放包,对安卓包的大小很敏感,经常会优化包的大小,所以想引入工具静态检测包大小,看能不能找到其中可以优化的地方,防患于未然.Matrix是微信终端自研和正在使用的一套APM( ...

  3. 《PHP程序员面试笔试宝典》——如何回答快速估算类问题?

    如何巧妙地回答面试官的问题? 本文摘自<PHP程序员面试笔试宝典> 有些大企业的面试官,总喜欢出一些快速估算类问题,对他们而言,这些问题只是手段,不是目的,能够得到一个满意的结果固然是他们 ...

  4. LAMP环境下部署项目管理软件--禅道

    禅道与Jira的对比 禅道最大的特色是创造性的将产品.项目.测试这三者的概念明确分开,互相配合,又互相制约.通过需求.任务.bug来进行交相互动,最终通过项目拿到合格的产品. Jira设计以项目为主线 ...

  5. CentOS7利用yum缓存搭建本地源

    CentOS7利用yum缓存搭建本地源 环境说明 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 ( ...

  6. 基于myscript.js的web手写板(支持中文识别)

    网上的手写板模板不少,但是支持中文识别的却不多,而且基本上都收费的,毕竟别人的中文库凭什么免费提供给你(说好的开源呢?说好的开源呢? ←_←) 好了,进入主题,myscript.js,在官网其实我并没 ...

  7. 【摸鱼神器】UCode Cms管理系统 内置超好用的代码生成器 解决多表连接痛点

    一.序言 UCode Cms管理系统是面向企业级应用软件开发的脚手架.当前版本1.3.4.快速体验: git clone https://gitee.com/decsa/demo-cms.git (一 ...

  8. Centos安装Sublime text

    Sublime text官方给出方法如下: 1.终端执行以下命令: 安装 GPG 密匙 sudo rpm -v --import https://download.sublimetext.com/su ...

  9. [旧][Android] 代理模式

    备注 原发表于2016.05.21,资料已过时,仅作备份,谨慎参考 代理模式是什么 如上图所示,代理代表着另一终端中的某个真实服务对象,Client 调用代理(Client helper)的方法,然后 ...

  10. DBCHM -最简单、最实用的数据库文档生成工具

    项目介绍 DBCHM 是一款数据库文档生成工具! 该工具从最初支持chm文档格式开始,通过开源,集思广益,不断改进,又陆续支持word.excel.pdf.html.xml.markdown等文档格式 ...