【保姆级喂饭教程】【沉浸式解决问题】阿里云服务器部署原型HTML文件

荔枝吻2025-12-27 9:02

目录

前言

使用Axure做了很多产品原型，最开始都是发布成html文件，打个压缩包给前后端，再给大家都安装上Axure的浏览器插件，看起来效果也很好，有时候给领导或者甲方看就用视频会议或者投屏。

后来觉得把原型像前端一样发布到服务器，用一个稳定的域名或者端口查看不是很方便。只是有个问题，平常做原型喜欢设置页面宽度为1920，但是个人的电脑一般都会选择放大桌面，导致不通过插件查看的话总是会大，还需要手动缩小，尝试了两次后就没再用了。

最近一个项目甲方又想提前浏览，想了下还是先发布到服务器上，自适应问题后续再解决。

一、选择服务器

由于历史项目比较多，平常10多台服务器混着用，为了找一台长期稳定的服务器，就需要先了解下目前的使用情况。

使用终端软件登陆云服务器，我用的是WindTerm，有空写一篇该软件的推荐。

主要查看服务器的cpu、内存、硬盘情况，选择核心数、剩余内存占用、剩余硬盘空间大的。

1. cpu

bash 复制代码 
# 查看cpu信息，lscpu 读取 /proc/cpuinfo 和其他系统文件，然后进行整理和显示。
lscpu
cat /proc/cpuinfo


/proc/cpuinfo展示的是原始内核数据，每个逻辑CPU重复相同信息

从上图可以看出有两个逻辑核心，这个信息更重要一些，我们可以单独查询

bash 复制代码 
# 查看cpu逻辑核心数
nproc
grep -c "^processor" /proc/cpuinfo

2. 内存

bash 复制代码 
# 查看内存使用情况，以人类可读的形式展示
free -h

总共15GiB，已使用8.5GiB，还空闲5.1GiB，比较空闲

小拓展，free默认按1024进制计算，也可以按1000进制计算

bash 复制代码 
# 明确使用1024进制
free --kibi        # 以KiB为单位
free --mebi        # 以MiB为单位
free --gibi        # 以GiB为单位

# 明确使用1000进制
free --kilo        # 以KB为单位
free --mega        # 以MB为单位
free --giga        # 以GB为单位

3. 硬盘

bash 复制代码 
# 查看物理硬盘设备情况
lsblk
# 查看文件系统挂载使用情况
df -h
# 查看根文件挂载使用情况
df -h | grep '/$'

第一个命令查看硬盘情况，是否有没有挂载使用的硬盘

第三个命令查看每个硬盘的使用情况，下图为总计40g，使用30g，剩余7.8g

小拓展：nvme为固态硬盘，更常见的vda是kvm虚拟硬盘

更多见：磁盘管理和文件系统

二、发布原型

推荐一下最新的Axure11的安装教程
【保姆级喂饭教程】Axure RP 11 下载、安装、汉化图文详细教程

点击发布-生成HTML文件即可

继续点击发布到本地

三、部署原型

1. 上传服务器

先设计一个目录规范，可以根据需要再添加config、log等文件夹

bash 复制代码 
/opt/company/
├── project-a/
│   ├── backend/ # 后端文件，如jar包
│   │   ├── current -> v2.0.1
│   │   ├── v2.0.0/
│   │   └── v2.0.1/
│   ├── frontend/ # 前端文件，如dict
│   │   ├── current -> v1.2.1
│   │   ├── v1.2.0/
│   │   └── v1.2.1/
│   ├── prototype/ # 原型文件
│   │   ├── current -> v1.0.1
│   │   ├── v1.0.0/
│   │   └── v1.0.1/
│   └── script/ # 部署和维护脚本
│       ├── deploy.sh
│       ├── rollback.sh
│       └── healthcheck.sh
├── project-b/
├── project-c/

创建文件夹示例

创建v1.1.0文件夹

原子化创建一个软链接，以后有了新版本更新软链接就可以

bash 复制代码 
ln -sfn /opt/company/project/prototype/v1.1.0 /opt/company/project/prototype/current

刷新一下可以看到

把所有原型文件都上传到版本文件夹中

2. 查找nginx配置文件

因为选的是之前没用过的服务器，我们部署完原型以后需要配置nginx才能对外访问，为了更加沉浸，带着大家找一下nginx的配置文件

首先查看下nginx版本

bash 复制代码 
nginx -v

没有该命令有两种情况，一种是没安装，一种是通过编译安装，没有添加到系统PATH中。

该服务器已经部署了一些项目了，只能是后者

再查看进程试试

bash 复制代码 
ps aux | grep nginx

可以看到nginx默认的主进程和工作进程，还可以看到nginx的安装位置

再看看nginx已经监听的端口，可以看到已经运行的项目占用端口情况

bash 复制代码 
netstat -tlnp | grep nginx

Nginx配置文件的位置主要取决于安装方式，‌包管理器安装（如apt、yum）通常位于/etc/nginx/nginx.conf，而源码编译安装则常见于/usr/local/nginx/conf/nginx.conf‌。

也可以通过命令查找一下

bash 复制代码 
# 从 / 根目录下查找文件名为 nginx.conf 的文件
find / -name nginx.conf

3. 配置nginx文件

bash 复制代码 
# 1. 备份原始配置
sudo cp /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.$(date +%Y%m%d).backup
# 2. 查看当前配置结构
sudo grep -n "http {" /usr/local/nginx/conf/nginx.conf
sudo grep -n "include" /usr/local/nginx/conf/nginx.conf
# 3. 创建独立的配置文件（推荐）
sudo mkdir -p /usr/local/nginx/conf/vhosts
bash 复制代码 
# 4. 创建并编辑原型配置文件
sudo vi /usr/local/nginx/conf/vhosts/project-prototype.conf

将以下关键配置粘贴进去（根据你的实际路径调整 root 和 listen 端口、日志路径）：

nginx 复制代码 
# Axure原型配置
server {
    # 监听端口，如果9000未开放，可使用已开放的8085、8086等
    listen 9000;
    server_name _; # 使用IP访问，可改为域名如 prototype.yourdomain.com

    # 字符编码，防止中文乱码
    charset utf-8;

    # 核心：指向你的Axure原型目录（使用 'current' 软链接便于未来更新）
    root /opt/compant/project/prototype/current;
    index 首页.html index.html; # Axure首页通常是"首页.html"

    location / {
        # 尝试寻找请求的文件，最后回退到首页
        # 关键：如果Axure生成的是"首页.html"，这里要写对
        try_files $uri $uri/ /首页.html /index.html;
    }

    # 静态资源缓存（Axure生成的js、css、图片等）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off; # 可选：不记录静态资源访问日志以减少负载
    }

    # 防止访问隐藏文件（如 .git、.htaccess）
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }

    # 自定义日志路径（可选，便于排查问题）
    access_log /usr/local/nginx/logs/project-access.log;
    error_log /usr/local/nginx/logs/project-error.log warn;
}

按 ESC 后输入 :wq 保存并退出vim。

bash 复制代码 
# 5. 编辑主配置文件，在http块内添加include行
sudo vi /usr/local/nginx/conf/nginx.conf
# 找到 http { 块，在最前面或者最后面添加，按i进入编辑模式：
#    include /usr/local/nginx/conf/vhosts/*.conf;
# 按ESC，输入 :wq 保存退出
bash 复制代码 
# 6. 测试配置文件语法（绝对关键的一步！）
sudo /usr/local/nginx/sbin/nginx -t
# 7. 如果测试成功，重新加载配置（平滑重启，不会中断服务）
sudo /usr/local/nginx/sbin/nginx -s reload
# 8. 检查端口是否成功监听，应能看到nginx进程在监听0.0.0.0:9000
sudo netstat -tlnp | grep :9000
# 9. 在服务器内部进行快速访问测试，期望返回 HTTP/1.1 200 OK，确认服务内部运行正常
curl -I http://127.0.0.1:9000/

至此就完成部署啦

四、开放端口

虽然已经完成了部署，但是此时通过ip:端口的形式访问会返回403，还需在阿里云控制台的安全组中进行设置：在ECS实例的安全组->入方向规则中，手动添加一条规则，允许TCP协议访问9000端口，授权对象为 0.0.0.0/0（或你的IP段）。

而该服务器的阿里云账号在技术总监那里，当时没有及时回复我，或者说，如果不通过新的端口该怎么办呢，我们可以借用已经开通的端口，在已有端口下配置子路径访问

再次打开主配置文件

bash 复制代码 
sudo vi /usr/local/nginx/conf/nginx.conf

找一个不重要的端口所在的server块，在其中添加一个 location 子块，结构为：

nginx 复制代码 
server {
    listen       8085;
    server_name  _; # 或其他已有域名

    # 其他已有配置...

    # 添加以下location块，为Axure原型分配一个子路径
    location /project/ {
        # 关键：使用 alias 指令，并确保路径以 / 结尾
        alias   /opt/company/project/prototype/current/;
        index   首页.html index.html;
        # 核心：尝试查找文件，最终指向首页
        try_files $uri $uri/ /project/首页.html;
    }

    # 其他已有配置...
}

通过访问公网ip:8085/project/即可

五、统一端口

我们不能一直借用其他项目端口，等到我申请的9000通过后，就可以使用专门的端口了，如果我们只负责原型部分，总不能每个新的项目都去申请一个新的端口，我们可以把9000设置为原型端口，通过不同的子路径访问不同的原型。

端口开放后记得删除掉临时的子路径。

实现思路：只有一个主 server 块监听端口（如9000），然后在这个 server 块内，通过 include 指令动态加载各个原型的 location 配置。

目录设计：

txt 复制代码 
/usr/local/nginx/conf/
├── nginx.conf                      # 主配置文件
└── prototypes/                     # 【新增】原型location配置目录
│  ├── project-a.conf            # 项目A原型配置
│  ├── project-b.conf            # 项目B原型配置
│  └── project-c.conf            # 项目C原型配置
├── vhosts/                          # 虚拟主机目录
    └── prototype-gateway.conf       # 【新增】原型统一入口文件

1. 创建统一入口文件

删除之前创建的project-a-prototype.conf，重新创建统一入口文件

bash 复制代码 
sudo vi /usr/local/nginx/conf/vhosts/prototype-gateway.conf

复制如下内容

nginx 复制代码 
# 原型统一访问入口
server {
    listen 9000;                  # 唯一需要开放的端口
    server_name _;                # 用IP访问，或改成域名

    charset utf-8;

    # 记录日志，方便排查（可选）
    access_log logs/prototype-access.log main;
    error_log logs/prototype-error.log warn;

    # 核心：引入所有原型的location配置
    include /usr/local/nginx/conf/prototypes/*.conf;

    # 可设置一个默认页或错误提示，当访问不存在的路径时显示
    location / {
        return 404 "原型路径未配置。已知路径: /project-a/, /project-b/, ...";
    }
}

按 ESC 后输入 :wq 保存并退出vim。

2. 创建独立的Location配置

为每个原型创建独立的Location配置

bash 复制代码 
sudo mkdir -p /usr/local/nginx/conf/prototypes
sudo vi /usr/local/nginx/conf/prototypes/xinyangtea.conf
nginx 复制代码 
# project-a原型 - 访问路径：/project-a/
location /project-a/ {
    # 关键：使用 alias 指令，且目录结尾必须加 /
    alias /opt/company/project-a/prototype/current/;
    index  首页.html index.html;
    # 核心：尝试寻找文件，如果没找到则返回首页
    try_files $uri $uri/ /project-a/首页.html;
}

为其他项目（如 project-b）创建配置文件 /usr/local/nginx/conf/prototypes/project-b.conf：

nginx 复制代码 
location /project-b/ {
    alias /opt/company/project-b/prototype/current/;
    index  index.html;
    try_files $uri $uri/ /project-b/index.html;
}

3. 修改主配置文件

确保你的 /usr/local/nginx/conf/nginx.conf 中的 http 块包含了 vhosts 目录（之前已经添加过）：

bash 复制代码 
http {
    include /usr/local/nginx/conf/vhosts/*.conf; # 这行已存在
    # ... 其他配置
}

4. 测试并执行

bash 复制代码 
# 1. 测试语法
sudo /usr/local/nginx/sbin/nginx -t
# 2. 重载配置
sudo /usr/local/nginx/sbin/nginx -s reload

报了一个错，找不到main配置，但是主配置文件中是有log_format main的，只是我写的include放在了最前面，稍微往后挪一点，最好是直接放在最后面

之后通过访问公网ip:9000/project/正常

后记

记录一个bug：

在location中添加以下配置会导致原型页面加载不出来样式

nginx 复制代码 
    # 设置正确的MIME类型，防止中文HTML乱码
    types {
        text/html html htm;
    }

它实际上重新定义并覆盖了当前 location 上下文下的 MIME 类型映射。它只告诉 Nginx 将 .html 和 .htm 文件识别为 text/html，而完全删除了 Nginx 默认包含的几十种其他 MIME 类型映射（如 text/css、application/javascript、image/png 等）。

导致的结果是：

当浏览器请求 xxx.css 文件时，Nginx 找不到对应的 MIME 类型，通常会以默认的 application/octet-stream（二进制流）或 text/plain（纯文本） 类型返回。浏览器无法正确识别这是样式表，因此不会应用其中的任何样式，导致页面布局完全错乱，所有元素"一行行排列"。

参考文献

磁盘管理和文件系统

喜欢的点个关注吧><！祝你永无bug~

txt 复制代码 
/*
                   _ooOoo_
                  o8888888o
                  88" . "88
                  (| -_- |)
                  O\  =  /O
               ____/`---'\____
             .'  \\|     |//  `.
            /  \\|||  :  |||//  \
           /  _||||| -:- |||||-  \
           |   | \\\  -  /// |   |
           | \_|  ''\---/''  |   |
           \  .-\__  `-`  ___/-. /
         ___`. .'  /--.--\  `. . __
      ."" '<  `.___\_<|>_/___.'  >'"".
     | | :  `- \`.;`\ _ /`;.`/ - ` : | |
     \  \ `-.   \_ __\ /__ _/   .-` /  /
======`-.____`-.___\_____/___.-`____.-'======
                   `=---='
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            佛祖保佑       永无BUG
*/
相关推荐
天诰1 小时前
SA-K-11 检索会消失吗与四个未解问题
java·服务器·人工智能·python·机器学习·ai编程
陈希1233 小时前
Linux 防火墙配置实战：firewalld、iptables 与云安全组
linux·运维·服务器
女神下凡3 小时前
芯参谋(95):嵌入式文件系统_开发指南
linux·服务器·arm开发·驱动开发·设计规范
@兽血沸腾4 小时前
Windows系统安装Jenkins部署应用至远程Windows服务器操作指南
运维·服务器·jenkins
讯捷蓝达9 小时前
戴尔R720xd服务器卡死在 “Configuring Memory...Done“，换了内存还是卡？问题根本不在内存
运维·服务器
数字新视界11 小时前
动环监控信创适配在智能机房管理中的应用价值与未来展望
大数据·服务器·数据库·动环监控系统·动力与环境监控系统
爱和冰阔落12 小时前
【Linux网络】TCP 服务器如何并发处理多个客户端？从 fork、僵尸进程到双重 fork
linux·运维·服务器·网络
lisanmengmeng12 小时前
alertmanger 标签 rules 打上分组标签
linux·运维·服务器
Android系统攻城狮13 小时前
Linux FFmpeg深度解析之av_write_frame调用流程与实战(三十三)
linux·运维·服务器·ffmpeg·音视频进阶·ffmpeg音视频
上火的金鱼妹13 小时前
k8s生产实际问题排查（网关，数据库读写等）
运维·服务器
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05几个好用的ip纯净度检测网站06苹果iPA游戏软件资源下载网站07蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新09昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战10Dify：一站式AI应用开发平台全解析与Windows部署指南