【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
(微软官方)→ 安装。
- 虚拟机已启动(VirtualBox 中点击
启动
,进入 Ubuntu 系统)。 - 使用以下语句
systemctl status ssh
检查一下状态,
这种情况需要安装SSH服务。
- 虚拟机已安装 SSH 服务(若未安装,在虚拟机终端执行):
sudo apt update && sudo apt install openssh-server -y # 安装 sudo systemctl start ssh # 启动服务 sudo systemctl enable ssh # 设置开机自启
- 记录虚拟机 IP(在虚拟机终端执行
ip addr show
,找enp0s3
或ens33
网卡的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 配置目录
- 连接成功后,点击左侧 资源管理器(文件夹图标) → 点击
打开文件夹
。 - 输入 Nginx 配置目录:
/etc/nginx
→ 点击确定
。 - 授权验证:
- 弹出
需要管理员权限
提示时,选择 “以用户身份打开” → 输入虚拟机用户密码 → 点击确定
。 - 稍等片刻,左侧会显示
/etc/nginx
目录下的文件(如sites-available
、nginx.conf
等),双击sites-available/default
即可编辑。
- 弹出
2 静态资源配置(root
/ alias
)
学习 Nginx 静态资源配置(root
/alias
),是为解决网页开发与部署中静态文件(HTML、CSS 等)高效对外访问的核心需求。
开发调试时,能让本地写的文件经 Nginx 快速供浏览器访问、实时看效果;生产部署中,可保障线上静态资源稳定加载、优化访问体验。
在学习本小节前,我们需要从想让他人访问自己网页
的需求切入,先实操创建静态文件目录、生成测试文件,再配置 Nginx 规则并测试访问,对比 root
和 alias
路径匹配逻辑,就能理解静态资源从服务器到浏览器的传递过程,掌握排查解决资源加载问题的基础技能。
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 块里就行了。
以下是具体的步骤参考:
- 打开文件:
sites-available/default
(双击文件,VS Code 自动高亮Nginx语法)。 - 添加配置(这里写了两种方法,二选一):
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 } }
- 保存:
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 验证静态资源(带缓存)
-
创建测试文件(VS Code操作):
- 在VS Code左侧「资源管理器」中,点击「打开文件夹」→ 选择
/var/www/html
(需要输入密码授权)。 - 右键
html
文件夹 → 新建文件夹 → 命名为static
。 - 右键
static
文件夹 → 新建文件 → 命名为test.css
,内容写:/* 静态缓存测试 */
。
- 在VS Code左侧「资源管理器」中,点击「打开文件夹」→ 选择
-
浏览器验证:
- 访问
http://localhost/static/test.css
(本地访问,一定能打开)。 - 打开开发者工具 → 「网络」标签 → 刷新页面 → 点击
test.css
: - 响应头中找到
Cache-Control: public, max-age=2592000
(30天=2592000秒)→ 缓存生效。
- 访问
同理,还可以创建一个html文件,用同样的步骤也能得到类似结果。
4.2.2 验证动态接口(代理转发)
- 启动后端服务(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
- 浏览器验证:
- 访问
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服务)及动静分离配置(静态缓存与动态代理)的具体操作和验证方法,整体以实操为主,配有图形化界面指导和命令说明。