阅读 267

阿里云Windows Serve Nginx部署前端项目遇到的问题总结

你可能会遇到的问题:

  • nginx启动不起来
  • 前端包放在哪里
  • nginx服务器启动好了本地能访问外网访问不了

在我自己配置自己的项目的时候遇到了问题,在网上找了好久,发现说的都不全,我就把我遇到的问题整理总结一下

下载启动nginx

nginx的下载官网 nginx.org/en/download… 建议直接下载稳定版:

image.png

下载好以后是一个安装包,在服务器找一个地方解压一下就可以直接用,不需要安装
安装好以后在nginx的根目录下按住shift点击右键唤起命令窗口输入命令

start nginx
复制代码

你会看到有个框扑棱一下闪现然后消失,这是没问题的
这个时候不出意外你在服务器的蹩脚浏览器里访问http://localhost/这个链接就会出现Welcome to Nginx的字样说明nginx启动成功

配置nginx

配置文件在nginx\conf\nginx.conf nginx.conf就是nginx的配置文件
找到 server下面的这行代码:

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html; 
        index  index.html index.htm;
    }
}
复制代码

前面带#号的就相当于js里的//后面的内容不执行
location / 下面的root就是目录文件,现在这个默认就是定位到根目录的html文件夹
index就是入口文件 默认的意思是入口文件是index.htmlindex.htm
可以不需要改他的配置,把我们前端打包好的文件也放在html文件夹下,当然也可以新建文件夹
把前端打包好的dist文件里的内容放到html文件夹下:

image.png 修改配置需要重启nginx
修改配置需要重启nginx 重要的事说两遍

nginx -s reload
复制代码

再访问本地的http://localhost/应该就可以看到你放的项目了PS:由于浏览器太烂可能只加载出来个标题


配置Windows Serve服务器

现在你会发现服务器内能访问了,但是在外面访问公网ip就是访问不到
这也是最烦我的地方,解决了好长时间
首先你需要在服务器内关闭防火墙 在控制面板 => 系统和安全 => windows防火墙 => 启用和关闭windows防火墙 => 全设为关闭点击确定 再去高级设置里

image.png 这样关闭
这时候你的可能已经可以在外网访问了,但是我还是不能访问,我的是阿里云服务器,这就需要来设置一下服务器了

阿里云服务器公网ip无法访问解决办法

  • 首先找到你的实例点击安全组然后点击加入安全组

image.png

  • 加入好了以后就会出现一个安全组,点击这个安全组的配置规则
  • 之后点击快速添加,正常来说只勾选http的就可以的,但是以免我们以后有其他方式,我建议直接梭哈🤪选中全部点击确认

image.png 保存完以后你就可以大大方方的访问你的网站了,芜湖起飞

但是如果你是vue项目还需要再nginx.conf里配置一下加上try_files $uri $uri/ /index.html;

location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}
复制代码

总结

这就是我总结出来的Windows Serve Nginx部署可能遇到的问题
作为自己的笔记如果能帮助到别人那更好了,最后

如果有用的话请评论一个[🤪],谢谢

文章分类
前端
文章标签