当前位置: 首页 > news >正文

【Nginx基础①】 | VS Code Remote SSH 环境下的静态资源与反向代理配置实践

0 序言

本手册基于 VS Code Remote SSH 搭建开发环境,通过图形化界面+集成终端简化操作,相较于直接在虚拟机终端上进行演示,本文在VsCode界面里会让Nginx配置更直观。所有命令和配置均配套 中文注释,降低学习门槛。

1 环境准备

1.1 VS Code 配置 Remote SSH

打开 VS Code → 左侧扩展栏(Ctrl+Shift+X)→ 搜索 Remote - SSH(微软官方)→ 安装。

在这里插入图片描述

  1. 虚拟机已启动(VirtualBox 中点击启动,进入 Ubuntu 系统)。
  2. 使用以下语句
systemctl status ssh  

检查一下状态,

在这里插入图片描述

这种情况需要安装SSH服务。

  1. 虚拟机已安装 SSH 服务(若未安装,在虚拟机终端执行):
   sudo apt update && sudo apt install openssh-server -y  # 安装  sudo systemctl start ssh  # 启动服务  sudo systemctl enable ssh  # 设置开机自启  

在这里插入图片描述

  1. 记录虚拟机 IP(在虚拟机终端执行 ip addr show,找 enp0s3ens33 网卡的 inet 地址,如 10.0.2.15)。

因为虚拟机用的是 NAT 网络模式,主机无法直接访问虚拟机的 10.0.2.15,需要通过 端口转发 实现 VSCode 的 SSH 连接,

紧接着,打开VirualBox,点击设置,打开网络配置端口转发

在这里插入图片描述

当看到出现active(running),则说明服务已经启动了。

在这里插入图片描述

VsCode里面选择你的SSH配置文件,这里推荐第一个,选第二个每次打开需要管理员权限,所以怕麻烦的话直接选择第一种。

在这里插入图片描述

下面这里选择Linux

在这里插入图片描述

输入你虚拟机里的登录密码。

在这里插入图片描述

等待远程连接,

在这里插入图片描述
连接成功,接下来。

成功通过 SSH 连接到 Ubuntu 虚拟机后,可按以下常见且实用的步骤开展工作:

打开终端,如下图所示。

在这里插入图片描述

1.2 安装必要工具

打开 VS Code 内置终端(`Ctrl + `` 或点击左侧活动栏“终端” - “新建终端” ),在终端中执行命令更新软件包列表并安装常用工具:

sudo apt update  # 更新软件源信息
sudo apt install -y build-essential git curl  # 安装编译工具、Git、curl
  • build-essential:包含 gcc、g++ 等编译依赖,编译代码时常用
  • git:版本控制工具,用于克隆代码仓库、管理项目版本。
  • curl:网络请求工具,可用于下载资源测试接口等。

在这里插入图片描述
输入后会自动更新软件园信息。

在这里插入图片描述
安装好编译工具。

1.3 安装编程语言环境(选)

若要进行 Python 开发,还需要安装 Python 及相关工具:

sudo apt install -y python3 python3-pip  # 安装 Python3 和 pip 包管理器
pip3 install --upgrade pip  # 更新 pip

之后可通过 pip3 install 包名(如 pip3 install flask )安装项目所需的 Python 库。

如果是想用 JavaScript/Node.js 开发,执行:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

安装 Node.js 环境,再用 npm install 包名 管理项目依赖。

根据个人情况下载,若用不到也可不下载!

1.4 克隆或创建项目(选)

1.4.1 克隆远程代码仓库

如果有 GitHub、GitLab 等平台的代码仓库,用 git clone 命令克隆到虚拟机中:

git clone 仓库地址  # 如 git clone https://github.com/your-username/your-project.git
cd your-project  # 进入项目目录

1.4.2 新建项目

通过 VS Code 操作:点击左侧资源管理器 - 打开文件夹,选择虚拟机中要作为项目根目录的文件夹(如在 Ubuntu 中创建的 ~/projects/my-app ),然后在该目录下新建文件就开始编写程序。

1.5 安装扩展增强功能(选)

点击 VS Code 左侧活动栏的扩展图标可以搜索并安装适用于开发语言和场景的扩展:

  • Python:安装Python扩展可实现代码补全、语法检查、调试等功能。
  • JavaScript/TypeScript:安装ESLint 、 Prettier等扩展,用于代码检查和格式化。
  • 通用GitLens可增强 Git 功能,方便查看代码提交历史。

1.6 打开 Nginx 配置目录

  1. 连接成功后,点击左侧 资源管理器(文件夹图标) → 点击 打开文件夹
  2. 输入 Nginx 配置目录:/etc/nginx → 点击确定
  3. 授权验证:
    • 弹出需要管理员权限提示时,选择 “以用户身份打开” → 输入虚拟机用户密码 → 点击确定
    • 稍等片刻,左侧会显示 /etc/nginx 目录下的文件(如 sites-availablenginx.conf 等),双击 sites-available/default 即可编辑。

2 静态资源配置(root / alias

学习 Nginx 静态资源配置(root/alias),是为解决网页开发与部署中静态文件(HTML、CSS 等)高效对外访问的核心需求。

开发调试时,能让本地写的文件经 Nginx 快速供浏览器访问、实时看效果;生产部署中,可保障线上静态资源稳定加载、优化访问体验。

在学习本小节前,我们需要从想让他人访问自己网页的需求切入,先实操创建静态文件目录生成测试文件,再配置 Nginx 规则并测试访问对比 rootalias 路径匹配逻辑,就能理解静态资源从服务器到浏览器的传递过程,掌握排查解决资源加载问题的基础技能。

2.1 准备测试文件

# 1. 创建静态文件目录(/var/www/html/static)  
sudo mkdir -p /var/www/html/static  
# 解释:-p 递归创建,避免父目录不存在报错  # 2. 生成测试文件(内容:Hello Nginx Static)  
echo "Hello Nginx Static" | sudo tee /var/www/html/static/index.html  
# 解释:tee 同时输出到终端和文件,sudo 提权确保写入系统目录  

其中,/var/www/html 是 Linux 系统中 专门用于存放网站静态资源(如 HTML 文件、CSS、图片等 )的默认目录,常作为 Nginx、Apache 等 Web 服务器的网站根目录

当配置服务器访问规则时,通过 root 等指令关联此路径,Web 服务器就能依据请求,从该目录下精准定位并返回对应的静态文件。

比如访问http://域名/static/index.html,服务器可从/var/www/html/static找到文件并响应。

具体可见下图,通过 echo "Hello Nginx Static" 生成一段文本,再用 sudo tee 将这段文本写入 /var/www/html/static/index.html 文件(tee 确保在需要管理员权限的目录下能成功创建文件)。

这样一来,当 Nginx 配置了 location /static { root /var/www/html; } 时,访问 http://127.0.0.1:8080/static/index.html 就能直接看到 “Hello Nginx Static” 内容,本质是在 Nginx 配置对应的静态资源目录下,生成可被服务器找到并返回的测试文件,用于验证路径映射和服务是否正常工作。

在这里插入图片描述

下面这个内容在你自己的VsCode里面可以自行打开任意目录。

在这里插入图片描述

2.2 编辑 Nginx 配置(VS Code 图形化操作)

在这里插入图片描述
Nginx 的 server 配置是块状结构,所有 location、root、server_name 等指令都要写在 server { … } 大括号内部。

你当前的 default 文件里,server 块已有基础配置(root、index、server_name、location / 等),新增静态资源规则要写在 server { … } 内部、和现有指令平级的位置,比如放在下图中 root 下方、location / 上方,或者其他合适位置,只要在 server 块里就行了。

在这里插入图片描述

以下是具体的步骤参考:

  1. 打开文件:sites-available/default(双击文件,VS Code 自动高亮Nginx语法)。
  2. 添加配置(这里写了两种方法,二选一):
    server {  listen 80;  server_name localhost;  # ===== 静态资源规则 =====  location /static {  # root 示例:实际路径 = root路径 + location路径  # root /var/www/html;  # 最终路径:/var/www/html/static  # alias 示例:实际路径 = alias路径(精准匹配)  # alias /var/www/html/static/;  # 最终路径:/var/www/html/static  }  
    }  
    
  3. 保存Ctrl+S(自动同步到虚拟机,无需手动上传)。

在这里插入图片描述
这个时候有两种方法,一种是赋予权限,另一种则是用nano去修改。

在这里插入图片描述
按键盘上的 Ctrl + O,此时底部会出现提示File Name to Write: /etc/nginx/sites-available/default,确认文件名无误后,直接按Enter键,就能把修改后的内容保存到文件里。
保存完成后,再按 Ctrl + X 退出 nano 编辑器。

2.3 验证配置(VS Code 集成终端)

# 1. 检查配置语法(必做!避免写错)  
sudo nginx -t  
# 预期输出:syntax is ok / test is successful  # 2. 重启Nginx,让配置生效  
sudo systemctl restart nginx  # 3. 浏览器验证(或VS Code终端用curl)  
curl http://10.0.2.15/static  
# 预期输出:Hello Nginx Static  

3 HTTP 反向代理(代理本地 8080 服务)

3.1 编辑 Nginx 配置(default 文件)

location /proxy {  proxy_pass http://127.0.0.1:8080;  # 转发到本地8080端口  # 传递客户端真实IP(后端日志会记录真实访问者IP)  proxy_set_header X-Real-IP $remote_addr;  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
}  

3.2 启动后端测试服务(Python 临时服务)

# 前台启动(终端保持运行,关闭则服务停止)  
python3 -m http.server 8080  
# 解释:Python 内置HTTP服务器,监听8080端口,展示当前目录文件  # 或后台启动(退出终端不影响)  
nohup python3 -m http.server 8080 &  

3.3 验证代理(浏览器或 curl)

curl http://10.0.2.15/proxy  
# 预期:显示Python服务的目录列表(如 .bash_logout、Desktop 等)  

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

4 动静分离(静态缓存 + 动态代理)

4.1 VS Code中编辑配置(在default-temp中添加)

server {listen 80 default_server;listen [::]:80 default_server;root /var/www/html;index index.html index.htm;server_name _;# 静态资源(图片/CSS,30天缓存)location /static {root /var/www/html;  # 静态文件放在 /var/www/html/static 目录expires 30d;  # 浏览器缓存30天add_header Cache-Control "public, max-age=2592000";  # 直观显示缓存时间}# 动态接口(转发到3000端口的后端服务)location /api {proxy_pass http://127.0.0.1:3000;  # 转发到本地3000端口proxy_set_header Host $host;  # 传递主机名,避免后端识别错误}# 默认路径(可选,用于测试)location / {return 200 "Nginx is running! 静态资源访问:/static;动态接口:/api";}
}

4.2 详细验证步骤(全可视化)

4.2.1 验证静态资源(带缓存)

  1. 创建测试文件(VS Code操作)

    • 在VS Code左侧「资源管理器」中,点击「打开文件夹」→ 选择 /var/www/html(需要输入密码授权)。
    • 右键 html 文件夹 → 新建文件夹 → 命名为 static
    • 右键 static 文件夹 → 新建文件 → 命名为 test.css,内容写:/* 静态缓存测试 */
  2. 浏览器验证

    • 访问 http://localhost/static/test.css(本地访问,一定能打开)。
    • 打开开发者工具 → 「网络」标签 → 刷新页面 → 点击 test.css
    • 响应头中找到 Cache-Control: public, max-age=2592000(30天=2592000秒)→ 缓存生效。

在这里插入图片描述

同理,还可以创建一个html文件,用同样的步骤也能得到类似结果。

在这里插入图片描述

4.2.2 验证动态接口(代理转发)

  1. 启动后端服务(VS Code终端)
    • 在VS Code中新建终端(菜单 → 终端 → 新建终端)。
    • 复制以下命令启动一个简单的动态服务(Python):
# 创建一个返回JSON的后端脚本
echo "from http.server import BaseHTTPRequestHandler, HTTPServer
import json
class Handler(BaseHTTPRequestHandler):def do_GET(self):self.send_response(200)self.send_header('Content-Type', 'application/json')self.end_headers()self.wfile.write(json.dumps({'status': 'ok', 'data': '动态内容'}).encode())
server = HTTPServer(('127.0.0.1', 3000), Handler)
print('动态服务运行在 http://127.0.0.1:3000')
server.serve_forever()" > api_server.py# 启动服务(终端会显示"动态服务运行在...")
python3 api_server.py
  1. 浏览器验证
    • 访问 http://localhost/api → 看到 {"status": "ok", "data": "动态内容"} → 这就说明代理成功。

跟前小结类似,最后通过浏览器来直观验证。

4.3 注意事项

在使用端口转发时,网页访问链接需遵循 “宿主机 IP + 宿主机转发端口” 规则:例如 VirtualBox 将宿主机 8080 端口转发到虚拟机 80 端口(Nginx 监听端口),则访问链接为 http://宿主机IP:8080/静态资源路径(如 http://127.0.0.1:8080/static/index.html

在这里插入图片描述

这里的关键是用 宿主机的转发端口(8080) 替代 Nginx 实际监听的虚拟机端口(80),同时 IP 需使用宿主机可被访问的地址(本地测试用 127.0.0.1,局域网其他设备用宿主机局域网 IP),确保请求通过转发规则正确到达虚拟机的 Nginx 服务。

5 小结

该文档围绕Nginx基础配置展开,先介绍通过VS Code Remote SSH搭建开发环境的步骤,包括安装SSH服务配置端口转发连接虚拟机及安装必要工具和编程语言环境。接着详细讲解了Nginx静态资源配置中root和alias的使用,涉及测试文件准备、配置编辑与验证。还阐述了HTTP反向代理配置(代理本地8080服务)及动静分离配置(静态缓存与动态代理)的具体操作和验证方法,整体以实操为主,配有图形化界面指导和命令说明。

http://www.dtcms.com/a/322025.html

相关文章:

  • 明厨亮灶场景下误检率↓76%:陌讯多模态融合算法实战解析
  • 蓝桥杯----大模板
  • 【NFTurbo】基于DockerCompose一键部署
  • Redis中String数据结构为什么以长度44为embstr和raw实现的分界线?
  • 【大模型实战篇】部署GPT-OSS-120B踩得坑(vllm / ollama等推理框架)
  • 数据库索引创建的核心原则与最佳实践
  • JAVA 分布式锁的5种实现方式
  • 【C++高阶五】mapset对红黑树的封装
  • 【昇腾】Atlas 500 A2 智能小站制卡从M.2 SATA盘启动Ubuntu22.04系统,重新上电卡死没进系统问题处理_20250808
  • 图片识别表格工具v3.0绿色版,PNG/JPG秒变可编辑Excel
  • Redis初步介绍和分布式系统介绍
  • 项目一系列-第4章 在线接口文档 代码模板改造
  • 临床医学 RANDOM SURVIVAL FORESTS(randomSurvivalForest)-2 python 例子
  • shell脚本使用
  • 软件销售跟进思路
  • 期货和期权对冲后能盈利吗?
  • 大力水手4——AI驱动的多帧生成与神经网络渲染
  • MySQL NULL 值处理详细说明
  • 《天天酷跑》:用Pygame打造经典跑酷游戏的开发与玩法全解析
  • 库函数NTC采样温度的方法(STC8)
  • react的form.resetFields()
  • cuda编程之内核执行配置参数
  • 智慧交通场景下 mAP↑28%:陌讯多模态融合算法实战解析
  • Linux入门到精通,第二周自我总结
  • 书生浦语第五期-L1G3-LMDeploy 课程
  • 配电线路故障定位在线监测装置的技术解析与应用价值
  • C语言编译流程讲解
  • 第七篇:动画基础:requestAnimationFrame循环
  • 解决多线程安全性问题的方法
  • 可编辑51页PPT | 某鞋服品牌集团数字化转型项目建议书