目录
- 前言
- 一、选择服务器
-
- [1. cpu](#1. cpu)
- [2. 内存](#2. 内存)
- [3. 硬盘](#3. 硬盘)
- 二、发布原型
- 三、部署原型
-
- [1. 上传服务器](#1. 上传服务器)
- [2. 查找nginx配置文件](#2. 查找nginx配置文件)
- [3. 配置nginx文件](#3. 配置nginx文件)
- 四、开放端口
- 五、统一端口
-
- [1. 创建统一入口文件](#1. 创建统一入口文件)
- [2. 创建独立的Location配置](#2. 创建独立的Location配置)
- [3. 修改主配置文件](#3. 修改主配置文件)
- [4. 测试并执行](#4. 测试并执行)
- 后记
- 参考文献
前言
使用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
*/