个人签名

281篇博客

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好

网易汪源：统一负载与多云环境的“开放姿态”，才是云原生

网易数帆如何用 Kubernetes“原语”搞定云原生中间件

快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案

探索智慧校园新模式，网易有数在教育行业的实践分享

金融行业大数据治理之路——数据模型篇

一篇非技术的技术贴：文件共享 + Nginx 实现在线设计稿

猪小花1号2018-08-31 09:12

作者：李田莉

摘要：交互设计稿是交互设计师把设计方案传达给大家的文档展示，在需求确认、方案传达、开发实现、测试验证等产品研发有着非常重要的作用。我们组在探索，设计稿的多人协作、增量更新、在线浏览这些问题上做了一些探索，主要体现在文件共享、Axure 的 Teamwork、Nginx 服务访问设计稿等几个关键点。

这是一篇面向设计师的文章，方法比较简单，但是可以解决我们一些日常工作的问题：

场景一

视觉设计师小样，现在做完了一模块的视觉稿，需要发给前端同学开发，用 POPO 发 PSD 文件好慢呀，发邮件也要上传半天。后来终于用邮件发视觉稿发给了前端同学，忽然收到产品变更的需求，有花了大半天做完，还要重新发送一份给前端同学。

痛点：视觉稿文档较大，发送较慢；视觉反复修改，需要多次发送

场景二

新出了一个产品叫聊吧，因为这个产品涉及到很多部门的开发和测试同学，而且后期的迭代采用敏捷开发模式，大家需要及时看到线上设计稿的更新，而且每次上线的时候测试通许都要回归所有模块的主线流程，小宁决定组内使用同一份 Axure 文件进行协作，以便做到设计稿的全量发布。这个时候大家就在想思考进行同稿协作，那如果要做到即使更新，就得需要一个能够随时接受其他同学访问的服务。

痛点：多人协作；增量更新；即时服务访问

我们先看小样的问题，是一个设计师和多设计稿使用者之间的即时文件共享问题，如下图：

下面看一下小宁的问题，因为他是要多人同稿协作，这意味这个稿子应该是在一个大家都可以随时访问的地方。同时设计稿发布的地方可以接受多方同时访问，且可以随时访问，基本的需求如下图所示：

那上面两张图里面的共享和访问问题怎么解决呢？我们总结为有几个点：

文件共享
Teamwork
服务访问

文件共享

实现文件共享，我们直接使用电脑本身的文件共享功能。

设置共享文件映射驱动器（可以理解为作为 Server）

核心：设置 Windows 电脑中的共享文件夹，将电脑中的某个文件夹设为共享的文件映射驱动器（因为公司大部分配置的都是 Windows 电脑，所以使用 Mac OS 电脑同学就百度一下去啦~~）

在电脑中建一个文件夹，命名成你想共享的内容；
选择想要共享的文件夹，右键，选择共享-特定用户；
在弹出的对话框中输入局域网内想要共享的 IP，公司里面就是输入想要共享的人的 corp 邮箱前缀，点击添加，就会出现在共享列表中，点击共享，即可将本文件夹共享给这个小伙伴了；同时，这里可以设置访问者的使用权限，读写/只读/只写，根据需要设置；
查看自己的电脑的 IP 地址，win 键+R，输入 cmd 并点回车，在出现的命令行框中输入 ipconfig 命令并回车，查看自己的 IPv4 地址；

将 IPv4 地址与共享的文件夹名称组合便是映射驱动器的地址了，如 \\10.241.22.78\tanlyshare 。

其他电脑连接映射驱动器（可以理解为作为 Client）

核心：使用添加映射驱动器的方式连接，而不是添加网络位置，因为映射驱动器可以连接一次就一直都在了

Windows电脑连接映射驱动器步骤

打开电脑-计算机，在顶部点击映射网络驱动器；
在弹出的对话框中输入你想要连接的服务器地址，然后点击完成按钮，然后就可以在我的电脑中找到刚刚的映射驱动器啦。如 hcuxc 的地址为：\\10.241.22.78\tanlyshare，注意哦，输入的是反斜杠”\“，而不是斜杠”/“；

Mac电脑连接服务器步骤

在桌面顶部功能条点击前往-连接服务器；
在弹出的对话框中输入你想要连接的服务器地址，点击连接，进入正在连接状态，等待片刻。如 hcuxc 的地址为 smb://10.241.22.78/hcuxc，注意哦，输入的是斜杠”/“，而不是反斜杠”\“；
在正在连接状态结束后，会看到输入名称和密码的界面，连接身份选择注册用户，名称为 corp 邮箱前缀，密码为公司里登录 Windows 电脑的密码；

等待连接，然后就完成了磁盘映射，在 Finder 的左侧边就能看到啦~（但是 Mac 连接有一个缺点，就是老断线，就要重连）。

这个时候，就解决了小样的问题，他就可以把东西共享给你的前端同学啦~不管稿子改多少遍，只需要要保存文件到这个文件夹，最好跟前端同学说一声，他们立刻就能看到而且直接就可以用啦~

当然这个共享文件的方法，还可以适用于很多情景，比如个人多台电脑设备之间的文件传输、文档更新、小组内的公共资料共享、文件的公共备份等，方法比较简单，但是简单的方法可以灵活地解决很多问题。

Axure TeamWork + 文件共享实现多人协作

小样的问题是，变成了多个设计师，而且访问不是拿到这个文件，而是直接访问文档即可。

Axure 本身有提供 Teamwork 功能，这就使得我们在实现多人协作这件事情简单很多，就结合 Teamwork 的功能和共同服务器就可以了。

通过<共享文件>中的方法，找一台主机作为服务器，将所有协作设计师加入到共享人员中，权限均选择可读写；
通过 Axure 的 Teamwork 相关的内容，创建协作项目，且项目的 Team Directory 选择 Server 上的文件目录，本地地址可以根据需要自己选择，其实这个协作有点像 GitHub 或 ftp 的形式。协作项目创建过程如下：

项目中的所有交互设计师，通过<共享文件>中的方法，连接 Server，然后再 Axure 中 Get 项目即可，不过注意选择项目的 Server 地址时一定选择包含了conf、dav、db、hooks 等文件的上级目录，过程如下图：

项目中的所有交互设计师，在项目的 Generate 发布路径中需要选择 Server 中的文件目录，过程如下图：

到这里，设计师之间的同稿协作问题基本就解决了，Axure 的 Team Work 支持每个设计师获取多个页面同时编辑，但是不支持单个页面的同时编辑，所以每个设计师做完一个页面的需求需要把页面 Check in，其他日常工作中的发布流程、合作沟通方法等内部协商即可。

服务访问

之前有考虑用 Node.js 来实现搭服务的，因为有看到别人用 Node.js 实现基于文件夹内容的访问，但是考虑到每次大家访问的时候都要一级级目录查找就比较麻烦，好像有点像 FTP 一样，再有就是如果用 Node.js 还要自己写很多代码，就放弃了，因为我真的不怎么会写代码，哈哈哈~

于是找了 Nginx 来搭，因为是第一次尝试，过程有点曲折，但是最终要做的事情还是比较简单的~

Nginx 服务配置

Nginx 官网上下载一个适用于系统的 Nginx 软件，装在作为 Server 的 Windows 主机上（工作的电脑是 Windows 系统）；
解压后，在 conf 文件夹中找到 nginx.conf 文件，开始配置访问端口，例如下面是网易云计算基础服务的 ICP 备案系统和域名系统的设计稿的端口配置，listen 根据自己的需要填写，80 端口为地址的默认访问端口；root 中直接填写服务器上的交互稿 Generate 交互稿的路径。

#ICP
        server {
  	 listen       8080;
   	 server_name  localhost;

         location / {
   	 root  E:/product_share/icp/icp/icp_export;
  	 index  index.html index.htm;}
   	}

#Domain
        server {
  	 listen       8082;
   	 server_name  localhost;

         location / {
   	 root  E:/product_share/domain/domain/domian_export;
  	 index  index.html index.htm;}
   	}

配置好 nginx.conf 文件后，运行 nignx.exe，可以双击这个文件，也可以通过命令行运行。

这个时候别人就可以通过服务器的 IP 和端口访问交互稿的了。

以上过程，可以保证设计师协作、交互稿发布、交互稿服务访问都是打通的，比如，小宁在交互稿上更新一个交互内容，他只需要 Regenerate 这个页面，立刻他对接的同事就能访问到更新的内容了。借用一下云计算的概念，有点像不停服更新、持续集成~~哈哈哈，整个过程还是非常方便快捷的。

访问权限配置

从上面 Nginx 的配置来看，其实这个是没有访问限制的，任何人拿到 IP 和端口，只要是网络（比如内网环境）允许都可以访问，可以说没有任何限制，这是有点不安全的。

这个时候就需要考虑给访问加一些限制了，大概有几种方式：

1. 通过 IP 白名单的形式限制访问；

2. 接入 OpenID，定期清理非目标用户的访问或者接入组织管理；

3. 使用通用的账号密码访问，定期更新账号密码；

有了三个方案，就要权衡一下了：

方案一：通过和交互稿的访问者沟通，他们访问交互稿的地方并不固定，我不能通过加一段云计算项目的人员的地址段来限制访问；

方案二：首先接入 OpenID 这个过程貌似还挺麻烦，其次云计算项目的人员有很多，访问人员维护起来还挺麻烦；

方案三：当时只知道 Node.js 可以通过 auth_basic 来实现(还是问的宫克，哈哈)，不知道 Nginx 怎么实现。

但是看来还是第三个方案比较好，实现方式这个问题查查问问应该是能解决的~~

哈哈哈，果然半天就解决了~还是基于 HTTP 的 auth_basic 来实现，下面简单说一下过程：

在 nginx/conf 文件夹中添加一个 htpasswd 文件，并在这个文件中填写账号密码；

# 账号:密码，例如下面
test:passwd

在 nginx.conf 文件中 location 中将访问设置为 Restricted 并引用刚刚添加的 htpasswd 文件，比如给刚刚的 ICP 备案系统添加这个配置如下：

#ICP
        server {
  	 listen       8080;
   	 server_name  localhost;

         location / {
   	  root  E:/product_share/icp/icp/icp_export;
  	  index  index.html index.htm;
          auth_basic  "Restricted";
          auth_basic_user_file  htpasswd;}
   	}