如何使用Nginx对网站进行代理,简单的操作带你入门

上一篇文章中,我们讲述了如何使用docker启动mysql服务并通过node连接与操作数据库,但我们如果需要做一个完整的项目,不仅仅需要对数据库进行读写,同时我们需要配合文件服务器,这样才能将项目中图文进行存储,本篇我们就一起来搭建一个文件服务器。

Nginx环境搭建

本文采用Nginx作为代理工具,我们先在本地配置Nginx环境,我这里使用的是mac,因此使用brew对环境进行安装,windows的话可以使用node进行安装,环境下载略有小异,不过后续操作没有太大区别,如下:

sh 复制代码
brew install nginx

安装完成之后,我们可以通过brew info nginx查看nginx安装路径,来源等信息,如下图:

启动与停止nginx

sh 复制代码
brew services start nginx #启动
brew services restart nginx #重启
brew services stop nginx #停止
sudo nginx -s reload #重新加载配置文件

我们修改默认启动页面代码如下(文件位置见本文第一张图):

在进入端口配置文件(文件位置见本文第一张图),修改启动端口号及页面位置如下:

sh 复制代码
server {
    listen       8090;
    server_name  localhost;
    location / {
        root   /opt/homebrew/Cellar/nginx/1.25.3/html/; #html文件夹的绝对路径
        index  index.html index.htm;
    }
}

页面代码修改完成之后,我们启动nginx并查看是否成功

sh 复制代码
ps -ef|grep nginx

启动项目之后,我们在浏览器输入http://localhost:8090/(默认是80,因为我们在上面修改成了8090),即可看到我们上面修改的启动页面了!(如果没有生效,执行sudo nginx -s reload重新加载一下配置)。

在这里,我们已经可以将页面展示出来了,如果是vue项目,也只需要打包后将文件放置在一个指定位置,然后在nginx.conf中指定启动页面即可。

nginx作为文件服务器

在上面我们已经成功配置了nginx,如果要将其作为文件服务器,就需要修改nginx.conf配置文件,如下:

js 复制代码
server {
    listen       8090;
    server_name  localhost;
    root    /Users/wangtianxiang/Desktop/fileServe;
    location / {
        autoindex on;
        autoindex_exact_size off;
        autoindex_localtime on;
    }
}

执行sudo nginx -s reload重新加载配置文件,然后刷新页面,如下图:

如果你需要同时支持文件的访问与页面的访问,可以在配置中配置多个端口号,如下:

sh 复制代码
server {
    listen       8090;
    server_name  localhost;
    location / {
        root   /opt/homebrew/Cellar/nginx/1.25.3/html/;
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /opt/homebrew/Cellar/nginx/1.25.3/html/50x.html;
}
server {
    listen       8091;
    server_name  localhost;
    root    /Users/wangtianxiang/Desktop/fileServe;
    location /{
        autoindex on;
        autoindex_exact_size off;
        autoindex_localtime on;
    }
}

这时候,我们已经可以对指定文件夹进行查看与下载了,后续需要管理的文件可以直接放在这个目录下,但是现在这个文件管理器目前仅支持文件的查看与下载,不支持文件上传与删除,如果要上传与删除,就要采用其他模块,来对这个文件夹进行操作,我们将在后续来讲解,如何建立一个文件服务器并能够实现增删改查。

相关推荐
SoaringHeart36 分钟前
Flutter组件封装:验证码倒计时按钮 TimerButton
前端·flutter
San30.43 分钟前
深入理解 JavaScript OOP:从一个「就地编辑组件」看清封装、状态与原型链
开发语言·前端·javascript·ecmascript
AAA阿giao1 小时前
JavaScript 原型与原型链:从零到精通的深度解析
前端·javascript·原型·原型模式·prototype·原型链
烛阴1 小时前
C#异常概念与try-catch入门
前端·c#
钮钴禄·爱因斯晨1 小时前
# 企业级前端智能化架构:DevUI与MateChat融合实践深度剖析
前端·架构
摆烂工程师2 小时前
2025年12月最新的 Google AI One Pro 1年会员教育认证通关指南
前端·后端·ai编程
Gavin在路上2 小时前
DDD之用事件风暴重构“电商订单履约”(11)
java·前端·重构
我命由我123452 小时前
VSCode - VSCode 颜色值快速转换
前端·ide·vscode·前端框架·编辑器·html·js
前端涂涂2 小时前
怎么设计一个加密货币 谁有权利发行数字货币 怎么防止double spending attack 怎么验证交易合法性 铸币交易..
前端
JuneTT2 小时前
【JS】使用内连配置强制引入图片为base64
前端·javascript