vue项目部署到阿里云服务器(windows - Nginx代理)

项目构成:前端:vue+vant-ui,数据库:mysql,后端:node.js

部署方式:nginx代理

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

购买方式省略...

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

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

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

image.png

image.png

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

image.png

用户名windows系统的是Administrator

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

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

1679896266103.png

打开浏览器,下载nginx;

下载NGINX for Windows

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

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

image.png

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

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

1679896424388.png

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

image.png

image.png

发送方式可以具体百度一下,我这边目前使用的MobaXterm工具,选择RDP进行连接

image.png

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

image.png

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

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

image.png

还有记得把 nginx.conf里的

image.png

完成了以上工作后,回到这个界面
注:如果在nginx中有转发配置,可以参考这篇文章:nginx各种代理配置

image.png

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

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

image.png

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

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

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

然后重启nginx;

1.6k 声望
2.1k 粉丝
0 条评论
推荐阅读
js常用方法整理
1、实现全屏 {代码...} 2、退出全屏 {代码...} 3、页面打印 {代码...} 4、打印内容样式更改 {代码...} 5、阻止关闭事件 {代码...} 6、屏幕录制 {代码...} 7、判断横竖屏 {代码...} 8、横竖屏样式变更 {代码...} 9...

墨城8阅读 508

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.9k评论 9

用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.5k评论 2

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...

wuwhs12阅读 2.5k

封面图
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.2k

封面图
把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...

卡颂7阅读 7.5k评论 3

封面图
1.6k 声望
2.1k 粉丝
宣传栏