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

原创于 2025-12-26 17:52:31 发布 · 580 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#阿里云 #服务器 #html #axure #原型

Java 同时被 3 个专栏收录

40 篇文章

订阅专栏

【沉浸式解决问题】

31 篇文章

订阅专栏

【保姆级喂饭教程】

20 篇文章

订阅专栏

2025博客之星年度评选已开启 10w+人浏览 2.2k人参与

前言

使用Axure做了很多产品原型，最开始都是发布成html文件，打个压缩包给前后端，再给大家都安装上Axure的浏览器插件，看起来效果也很好，有时候给领导或者甲方看就用视频会议或者投屏。
后来觉得把原型像前端一样发布到服务器，用一个稳定的域名或者端口查看不是很方便。只是有个问题，平常做原型喜欢设置页面宽度为1920，但是个人的电脑一般都会选择放大桌面，导致不通过插件查看的话总是会大，还需要手动缩小，尝试了两次后就没再用了。
最近一个项目甲方又想提前浏览，想了下还是先发布到服务器上，自适应问题后续再解决。

一、选择服务器

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

使用终端软件登陆云服务器，我用的是WindTerm，有空写一篇该软件的推荐。
主要查看服务器的cpu、内存、硬盘情况，选择核心数、剩余内存占用、剩余硬盘空间大的。

1. cpu

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

在这里插入图片描述
/proc/cpuinfo展示的是原始内核数据，每个逻辑CPU重复相同信息

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

# 查看cpu逻辑核心数
nproc
grep -c "^processor" /proc/cpuinfo

在这里插入图片描述

2. 内存

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

总共15GiB，已使用8.5GiB，还空闲5.1GiB，比较空闲
在这里插入图片描述

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

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

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

3. 硬盘

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

第一个命令查看硬盘情况，是否有没有挂载使用的硬盘
第三个命令查看每个硬盘的使用情况，下图为总计40g，使用30g，剩余7.8g
在这里插入图片描述

小拓展：nvme为固态硬盘，更常见的vda是kvm虚拟硬盘
更多见：磁盘管理和文件系统

二、发布原型

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

点击发布-生成HTML文件即可
在这里插入图片描述
继续点击发布到本地

三、部署原型

1. 上传服务器

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

/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文件夹
原子化创建一个软链接，以后有了新版本更新软链接就可以

ln -sfn /opt/company/project/prototype/v1.1.0 /opt/company/project/prototype/current

在这里插入图片描述
刷新一下可以看到

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

2. 查找nginx配置文件

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

首先查看下nginx版本

nginx -v

没有该命令有两种情况，一种是没安装，一种是通过编译安装，没有添加到系统PATH中。
该服务器已经部署了一些项目了，只能是后者
在这里插入图片描述
再查看进程试试

ps aux | grep nginx

可以看到nginx默认的主进程和工作进程，还可以看到nginx的安装位置
在这里插入图片描述
再看看nginx已经监听的端口，可以看到已经运行的项目占用端口情况

netstat -tlnp | grep nginx

在这里插入图片描述
Nginx配置文件的位置主要取决于安装方式，‌包管理器安装（如apt、yum）通常位于/etc/nginx/nginx.conf，而源码编译安装则常见于/usr/local/nginx/conf/nginx.conf‌。
也可以通过命令查找一下

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

在这里插入图片描述

3. 配置nginx文件

# 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

在这里插入图片描述

# 4. 创建并编辑原型配置文件
sudo vi /usr/local/nginx/conf/vhosts/project-prototype.conf

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

# 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。

# 5. 编辑主配置文件，在http块内添加include行
sudo vi /usr/local/nginx/conf/nginx.conf
# 找到 http { 块，在最前面或者最后面添加，按i进入编辑模式：
#    include /usr/local/nginx/conf/vhosts/*.conf;
# 按ESC，输入 :wq 保存退出

在这里插入图片描述

# 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段）。

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

sudo vi /usr/local/nginx/conf/nginx.conf

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

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 配置。
目录设计：

/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，重新创建统一入口文件

sudo vi /usr/local/nginx/conf/vhosts/prototype-gateway.conf

复制如下内容

# 原型统一访问入口
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配置

sudo mkdir -p /usr/local/nginx/conf/prototypes
sudo vi /usr/local/nginx/conf/prototypes/xinyangtea.conf

# 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：

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 目录（之前已经添加过）：

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

4. 测试并执行

# 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中添加以下配置会导致原型页面加载不出来样式

    # 设置正确的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~

/*
                   _ooOoo_
                  o8888888o
                  88" . "88
                  (| -_- |)
                  O\  =  /O
               ____/`---'\____
             .'  \\|     |//  `.
            /  \\|||  :  |||//  \
           /  _||||| -:- |||||-  \
           |   | \\\  -  /// |   |
           | \_|  ''\---/''  |   |
           \  .-\__  `-`  ___/-. /
         ___`. .'  /--.--\  `. . __
      ."" '<  `.___\_<|>_/___.'  >'"".
     | | :  `- \`.;`\ _ /`;.`/ - ` : | |
     \  \ `-.   \_ __\ /__ _/   .-` /  /
======`-.____`-.___\_____/___.-`____.-'======
                   `=---='
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            佛祖保佑       永无BUG
*/