乐趣区

关于vue.js:vue项目部署到阿里云服务器windows-Nginx代理

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

部署形式:nginx 代理

一,首先要领有本人的服务器,阿里,腾讯都能够,我用的是阿里的

购买形式省略 …

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

倡议先进行运行,改明码后再重启,

重启后,按下 win+r,输出 mstsc,近程连贯你的服务器;

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

用户名 windows 零碎的是 Administrator

明码是你本人设置的明码,

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

关上浏览器,下载 nginx;

下载 NGINX for Windows

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

下载好了,间接全副解压,留神门路别带中文,不然启动 nginx 时会报错

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

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

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

发送形式能够具体百度一下,我这边目前应用的 MobaXterm 工具, 抉择 RDP 进行连贯

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

留神:坑来了:复制这个地址后,你失去的地址是这样的:C:\ngx\nginx-1.20.2\nginx-1.20.2\html\dist,

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

还有记得把 nginx.conf 里的

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

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

咱们能够在工作管理器查看有没有启动;

只有看到这个就阐明启动胜利了

接着,回到你的阿里云控制台,实例这里去配置平安组,也就是凋谢你的端口,让外网可能拜访。

点击手动增加,增加 8080 端口;,保留。

而后重启 nginx;

退出移动版