vue项目部署到阿里云服务器(windows),Nginx代理!
项目构成:
前端: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代理!的更多相关文章
- javaWeb项目部署到阿里云服务器步骤
记录web项目部署到阿里云服务器步骤 (使用 web项目.阿里云服务器.Xftp.Xshell),敬请参考和指正 1.将要部署的项目打包成WAR文件格式,可以在MyEclipse.Eclipse都可以 ...
- javaWeb项目部署到阿里云服务器步骤 完整版
记录web项目部署到阿里云服务器步骤 (使用 web项目.阿里云服务器.Xftp.Xshell),敬请参考和指正 1.将要部署的项目打包成WAR文件格式,可以在MyEclipse.Eclipse都可以 ...
- Java Web项目部署到阿里云服务器(ECS)
本篇随笔只是记录博主第一次将自己的Java项目部署到阿里云服务器的大致过程,具体细节还请参考别的博文. 一.项目介绍 我做的项目是利用maven项目构建工具进行搭建基于SSM框架的代码共享管理系统,主 ...
- 如何把php项目部署到阿里云服务器window server2012__含公网ip访问时jquery/ajax失效解决办法
记一次蛋疼的折腾. 弄了一晚上最后发觉是360浏览器的问题,换个浏览器就好了.垃圾360用什么IE7文档模式.导致界面和功能失效. 建议大家测试的时候用firefox或者chrome. 项目部署到服务 ...
- 2018.11.7 关于将Web项目部署到阿里云服务器-5个步骤搞定
将Eclipse导出的War包部署到阿里云服务器上,提供给移动端实时的访问 1. 先登录阿里云网站注册账号,选择服务器类型(我用的是 云服务器ECS), 如果你还是在读大学生可享受优惠价,最低好像是9 ...
- 将web项目部署到阿里云服务器上
一.用eclipse将写好的项目打成war包 1.右键点击项目,选择Export 选择打包之后的路径,点击Finsh. 2.购买阿里云服务器 按下图选择 3.设置云服务器防火墙 4.远程连接云服务器 ...
- 记录web项目部署到阿里云服务器步骤
(使用 web项目.阿里云服务器.Xftp.Xshell),敬请参考和指正 1.将要部署的项目打包成WAR文件格式,可以在MyEclipse.Eclipse都可以完成打包,如下图: 2.安装Xshel ...
- 将javaweb项目部署到阿里云服务器
主要步骤:1. 购买阿里云服务器2. 远程连接3. 在云服务器上配javaweb环境:jdk,tomcat,MySQL4. 将项目的war文件放到Tomcat下关于云服务器ECS:如果还想在买服务器之 ...
- Django项目部署到阿里云服务器无法发送邮件,发送邮件超时问题解决
前言 今天, 博主将写了好久的一个Django小项目尝试在阿里云部署上线,由于项目中需要发送邮件,博主调用了163邮箱接口,在本地测试邮件功能正常,可是上线后,邮件功能一直超时崩溃.在百度一番查资料后 ...
随机推荐
- java多线程编程(二)
1. wait 和 sleep 区别? 1.wait可以指定时间也可以不指定,sleep必须指定时间. 2.在同步中时,对cpu的执行权和锁的处理不同. wait:释放执行权,释放锁. sleep ...
- 【Gym100837F】Controlled Tournament(状压Dp 搜索剪枝)
题目链接 大意 现有\(N\)个人要打比赛,知道任意两个人间打比赛的胜负关系. 要求在 深度最小 的情况下,根为\(M\)的 竞赛树 的个数. 满足\(1\le M\le N\le 16\) 思路 虑 ...
- iOS模拟弱网
iOS平台: 首先需要苹果手机开启开发者选项,方法是手机连接到MacOS上启动Xcode. 通过自带的开发者选项 >Network Link Conditioner, 即可简单的模拟各种速度的网 ...
- 一款免费在线转pdf的工具 和 window免费镜像
PDF爱好者的在线工具 完全免费的PDF文件在线管理工具,其功能包括:合并PDF文件.拆分PDF文件.压缩PDF文件.Office文件转换为PDF文件.PDF文件转换为JPG图片.JPG图片转换为PD ...
- Solution Set - Stirling 数相关杂题
<好多题的题解> 「洛谷 P5408」第一类斯特林数·行 根据结论 \[x^{\overline{n}}=\sum_i{n\brack i}x^i, \] 我们只需要求出 \( ...
- Involuting Bunny! (2021.8)
CF1555F & Submission. Tags:「A.生成树」「B.Tricks」 分类处理询问的 trick:连接两个连通块的边显然合法,先用这些边构建生成森林.发现每条边 ...
- Solution -「AT 3913」XOR Tree
\(\mathcal{Description}\) Link. 给定一棵树,边 \((u,v)\) 有边权 \(w(u,v)\).每次操作可以使一条简单路径上的边权异或任意非负整数.求最少的操 ...
- Dubbo源码剖析五之服务本地缓存
Dubbo调用者需要通过注册中心(例如:ZK)注册信息,获取提供者.但是如果频繁从ZK获取信息肯定会存在单点故障问题,所以Dubbo提供了将提供者信息缓存在本地的方法. Dubbo在订阅注册中心的回调 ...
- node / npm安装、启动报错
1. 系统禁止运行脚本 a. 在系统中找到Windos PowerShell[可以按win健,然后搜powershell]--以管理员身份打开 b. 在打开的窗口输入set-ExecutionPoli ...
- [数分笔记]问题1.1 T1
题目:非负整数a,b使得为整数,求证这个整数必是某一整数的平方.(1988年第29届国际数学奥林匹克竞赛试题) 证明:设k=,k为非负整数 1°a=b k=2a²/(1+a²)=2-2/(1+a²) ...