一、引言

对于新手建站，网上的帖子纷繁复杂又良莠不齐，想要找到合适的建站指导流程实属不易。传统建站流程主要包括需求分析、页面设计、前后端开发以及上线后的更新与维护等阶段。

1、需求分析与准备阶段

• 根据网站功能需求，确定软硬件设备的种类和规格。
  
• 完成基础环境的配置及网络环境的搭建。

2、网站开发阶段

• 从零开始设计网站的页面布局。
  
• 编写并调试前后端代码，包括业务逻辑、数据库交互及API接口开发。

3、版本更新与迭代阶段

• 对功能需求的调整可能需要重新设计界面，甚至重构大量代码。

4. 网站运维阶段

• 正式上线后，持续的服务器维护、性能监控、安全防护及数据管理工作，会长期占用大量人力和技术资源。

随之而来的问题是：

1. 投入成本高：传统建站方式需要购买服务器硬件设备以及组建包含设计、开发、运维等，综合的技术团队。需要持续投入大量的人力和资金。
   
2. 开发周期长：从零开始设计网站，编写和调试后端代码，包括业务逻辑、数据库操作和API。当进行版本更新时，需要重新设计页面，重构代码，导致迭代成本增加。
   
3. 复杂度高：从底层开始搭建和配置服务器环境，包括操作系统、数据库、基础应用的选择与部署，网络环境的搭建等一系列复杂的步骤。
   
4. 维护成本高：运维人员需持续进行网站状态监控、数据备份、系统恢复、故障排除等一系列维护工作，以确保网站服务能够稳定运行。
   

本文将详细介绍如何使用低代码开发平台，以可视化的方式添加多种风格的门户组件，快速高效地构建移动端和PC端门户网站。一站式以最优成本快速构建性能卓越的网站，实现快速上线。

二、建站教程

利用低代码开发平台建站主要包括三个主要流程，分别是部署资源、基于应用模板创建应用和最终发布上线。

部署资源

本方案的技术架构包括以下基础设施和云服务：

• 域名：一个已经完成备案的域名。
• 云解析 DNS：一组按照要求添加的DNS解析记录。
• 专有网络 VPC：一个专有网络，构建云上私有网络。
• 云数据库 RDS：一个云数据库 RDS MySQL 实例，为门户网站提供数据服务。
• 多端低代码开发平台魔笔：魔笔平台，提供一站式的应用创建和全生命周期管理。

当用户访问网站时，请求通过DNS解析至魔笔平台，借助魔笔平台提供的SSL证书，建立客户端与魔笔之间的加密连接。同时，对网站数据的修改会同步更新至后端数据库，从而简化前后端数据交互的流程。

1. 低代码开发平台“魔笔”
   

魔笔是一款功能强大的低代码开发工具，能够通过可视化操作快速搭建网站：

• 提供丰富的门户组件库，包括图表、导航栏、轮播图等多种风格。
  
• 无需编写复杂代码，拖拽式设计快速生成网站页面。
  
• 支持移动端和PC端的同步适配，确保跨端用户体验一致性。
  

首次使用魔笔平台，请先单击开通魔笔空间[1]，进入页面后，无需任何操作即可完成试用版魔笔空间的开通。

2. 创建专有网络VPC和交换机
   

在搭建网站时，特别是当涉及到云服务或更复杂的架构时，创建专有网络（VPC，Virtual Private Cloud） 和 交换机（Subnet，子网） 是确保安全、性能和灵活性的重要步骤。在创建专有网络页面，配置1个专有网络和1台交换机。配置交换机时，请确保交换机所属的可用区的ECS处于可用状态，从而为RDS数据库实例构建云上的私有网络。

具体配置信息可参见下表：

3.创建云数据库RDS

阿里云RDS是一款即开即用的高性能数据库服务，无需复杂的部署和运维工作：

• 支持MySQL、PostgreSQL等主流数据库引擎，兼容性强。
  
• 提供自动备份、性能优化和高可用架构，确保数据的安全性和稳定性。
  
• 操作界面友好，减少对专业数据库管理经验的依赖。

创建 RDS MySQL 实例、数据库、数据库账号时注意需要记录创建的 RDS MySQL 数据库的名称、账号、密码用于之后的门户网站搭建配置。

（1）在实例列表页面，按照以下配置完成数据库实例创建。

（2）在实例基本信息页面：

1. 在左侧导航栏，选择实例列表。
   

2. 在实例列表页面，单击目标实例，进入实例管理页面。

（3）创建数据库账号：

在左侧导航栏，选择账号管理。然后在用户账号页签下，单击创建账号。在创建账号面板，设置数据库账号名称，选择账号类型为普通账号，设置密码。

（4）创建数据库：

在创建数据库面板，设置数据库名称，填写要求参见下表。选择授权账号为上一步创建的账号，然后单击创建。

（5）开通外网地址：

在左侧导航栏，选择数据库连接。在数据库连接区域下，单击开通外网地址。在弹出的对话框中选择否，单击确定。

（6）设置外网地址白名单：

在左侧导航栏，选择数据库连接。在数据库连接区域下，单击设置白名单，进入白名单设置页面后单击修改。

在弹出的对话框中输入魔笔的IP地址：101.200.211.106，单击确定完成添加。

说明：您需要记录创建的 RDS MySQL 数据库的名称、外网地址、账号、密码用于之后的网站搭建配置。

4.一键部署

还可以通过基于阿里云资源编排服务ROS（Resource Orchestration Service）实现一键部署，通过ROS模板可自动化地完成云资源的创建和配置，跳过上述流程，提高资源的创建和部署效率。相关配置信息可参考下图：

基于应用模板创建应用

1. 创建应用

魔笔提供企业门户网站模板，可以帮您快速完成网站搭建，无需从零开始设计页面布局，提升网站搭建效率。

（1）登录魔笔控制台[2]。

（2）选择模板市场 > 企业官网模板进入详情页。在模板详情页面，您可以查看模板的详细布局、基本信息和适用的终端。

（3）单击选用此模板，输入名称后单击下一步。

（4）在数据库集成资源窗口中，根据您创建的RDS实例进行填写：

• Host：填写您数据库的公网地址。您可以在云数据库RDS[3] > 实例列表，单击目标实例，进入实例管理页面，选择数据库链接，查看外网地址。
  
• 数据库名称：填写您在上一步创建的数据库的名称，您可以在云数据库RDS > 实例列表，单击目标实例，进入实例管理页面，选择数据库管理，查看数据库名称。
  
• 用户名：填写您在上一步创建的数据库账号。您可以在云数据库RDS > 实例列表，单击目标实例，进入实例管理页面，选择账号管理，查看数据库的登录账号。
  
• 密码：填写您对应数据库账号的密码。

2.编辑网站信息

在应用创建完成后，您可以查看和编辑当前应用下的全部模块。本文以新闻数据为例，详细介绍如何执行编辑操作。

（1）选择左侧代码，单击init_data文件，将触发方式变更为手动触发。

（2）单击界面左上方首页。在下拉列表中，选择后台数据_新闻数据，进入后台管理页面。

在后台管理页面：

• 您可以单击删除，清除模板提供的新闻数据，以便添加您想要展示的新闻数据。
  
• 您也可以单击新增按钮，直接为网站添加数据。填写说明请参见下表。
  

（3）完成后，单击提交，即可完成新增数据。

（4）变更完成后，单击界面左上方后台管理_新闻数据 > 首页返回网站首页，查看新增数据在网页上的展示情况。

说明 ：也可以单击H5首页，查看当前页面在移动端的展示情况。

3.新组件添加（可选）

可以通过可视化拖拉拽的方式对魔笔各个组件进行添加和移动。本文以新建数据图表为例，介绍新组件的添加方式。

（1）单击左侧添加组件按钮，向下滑动找到折线图组件，拖动至工作区。

（2）创建新的数据表。若只是想进行简单体验，可以在右侧内容 > 数据源中，直接对数据进行修改。

1. 登录云数据库RDS控制台[4]。
   
2. 在左侧导航栏，选择实例列表。单击目标实例，进入实例管理页面。
   
3. 在实例管理页面的左侧导航栏，选择数据库管理。
   
4. 单击登录数据库，使用之前创建的账号和密码登录DMS系统。
   
5. 在DMS中，选择相应的数据库，执行SQL命令创建表。示例创建表命令：
   

CREATE TABLE home_ent (
    id INT AUTO_INCREMENT PRIMARY KEY,
    e_time VARCHAR(255),
    e_value VARCHAR(255),
    e_group VARCHAR(255)
);

6. 插入数据。示例命令：
   

INSERT INTO home_ent (e_time, e_value, e_group) VALUES 
('2023', '1500000', '第一季度'),
('2023', '1650000', '第二季度'),
('2023', '1450000', '第三季度'),
('2023', '1550000', '第四季度'),
('2024', '1650000', '第一季度'),
('2024', '1500000', '第二季度'),
('2024', '1700000', '第三季度'),
('2024', '1600000', '第四季度');

7. 回到魔笔控制台[2]，进入应用界面。按图示顺序新建集成操作。
   

8. 选中折线图组件，清空右侧内容 > 数据源中的原始数据。按照下图所示进行填写。
   

9. 选中新创建的集成操作，单击集成资源，选中集成的数据库。在下方SQL语句中填写代码，遍历新创建的数据表。
   

SELECT * FROM home_ent;

10. 单击运行，将数据加载至界面。

4.网站发布

在网站发布之前，需要先对网站应用进行配置，确保使用阿里云账号进行登录后，再进行网站发布操作。

（1）在页面左下角选择设置 > 登录配置，确认默认身份源是阿里云账号登录，关闭允许匿名访问。

说明：如果需要将网站发布至开发环境，请关闭允许匿名访问。直接使用阿里云账号进行登录。如果需要将网站发布至生产环境，则无需进行此设置，直接进入发布上线流程即可。

（2）配置完成后，单击页面右上角发布按钮。

（3）选择开发环境，添加描述后，单击确定按钮。

（4）等待弹窗提示成功发布。

发布上线（可选）

1. 域名申请和备案

如果您想将网站发布至公网。需要完成以下操作：

• 需要使用独立域名，且域名必须经过 ICP 备案。
  
• 域名按照要求添加解析记录。
  

（1）创建域名信息模板并实名认证。

登录阿里云域名控制台。

在左侧导航栏单击信息模板，在信息模板页面单击创建新信息模板。

根据界面提示，完成域名持有者信息填写，单击提交。

展开查看填写说明。

在阿里云域名控制台的左侧导航栏的信息模板中找到待查看的信息模板，查看实名认证状态。

（2）购买域名

1. 查询域名。
   

1. 登录阿里云域名注册。
   
2. 在阿里云域名注册页面的搜索框中，搜索您想要注册的域名以及域名后缀，单击查询域名。

2. 加入域名清单。
   

对于查询结果为未注册的域名，单击加入清单。在域名清单中确认已添加的域名，单击立即购买。

确认订单信息。在确认订单页面，选择域名的购买年限和域名所有者类型。选择已完成实名认证的域名持有者信息模板。

说明 :若您注册的是“.gov.cn”后缀域名，域名持有者类型只能为企业。

d.完成支付后，域名注册订单会短暂的显示为处理中状态，待订单状态变为成功，域名即注册成功。

• 域名注册过程中的常见问题，请参见域名注册FAQ。
  

• 如果域名注册失败，请参见域名注册失败原因进行排查处理。

（3）ICP备案前准备

1. （可选）前置审批。

新闻类、出版类、药品和医疗器械类、文化类、广播电影电视节目类、教育类、医疗保健类、网络预约车、电子公告类等行业的互联网信息服务，需联系当地机关办理对应的前置审批手续。各类行业对应的办理机关及手续类型请参见前置审批。

2. 管局规则。
   

了解ICP备案所在地域的管局规则，根据管局要求准备ICP备案的材料。详细信息请在各地区管局备案规则中单击对应省份查看。

（4）提交ICP备案

1. 填写信息进行校验。
   

在阿里云ICP代备案管理系统，根据界面提示，按要求填写主办单位信息和网站/App信息等，系统将根据您所填信息，自动校验是否可以进行ICP备案。

2. 阿里云初审。
   

提交ICP备案初审订单后，订单状态为阿里云审核中，阿里云将会在1个工作日左右进行审核，具体以实际审核时间为准。

然后会进入邮寄资料（可选）、工信部短信核验、管局审核等流程。

当订单为待提交管局状态，阿里云审核专员将会在1个工作日左右将您的订单提交至管局审核，具体以实际提交时间为准，各省管局审核时间不同，实际审核时长会根据ICP备案场景有所不同，一般为1~20个工作日，具体以实际审核时间为准。管局审核通过后表示您的ICP备案即已完成，审核结果会发送至您的手机和邮箱。

2.网站发布

1. 单击页面右上角发布按钮。
   
2. 选中生产环境，单击下一步。
   
3. 单击前往域名设置。
   
4. 单击添加域名，在弹出的对话框中填写您已完成实名认证并且备案的域名后，单击下一步。
   
5. 防火墙类型选择系统内置，根据界面提示，为域名添加相应的解析记录。
   

说明

请在新页面进入云解析DNS控制台，并且不要关闭本页面。

1. 登录云解析DNS控制台。
   
2. 在左侧菜单栏点击公网DNS解析>权威域名解析，在权威域名解析页面的域名列表中找到目标域名，在右侧操作列中点击解析设置。
   
3. 在域名解析设置页签中点击添加记录，填写域名解析信息，然后单击确认。
   

1. 添加TXT记录。
   

2. 添加CNAME记录。

6. 解析记录添加完成，单击开始验证，成功后单击下一步。
7. 选中生产环境后单击完成，完成网站的公网发布。
   
8. 资源集成配置。
   

1. 登录魔笔控制台。
   
2. 在资源 > 集成下，选择当前应用使用的集成，单击编辑。
   

3. 进入编辑页面后，选择生产环境页签，按照实际使用的数据库完成配置后，单击确定即可。
   

三、结语

以下是网站模板页面效果：

阿里云的一站式建站解决方案不仅解决了传统建站流程中的痛点，还为开发者和企业提供了更高效、更灵活的技术支持。通过云数据库RDS和魔笔，可以快速构建一个高性能的网站，从而专注于核心业务的创新与发展。

点击阅读原文，体验低代码高效构建企业门户网站，赢取智能台灯，先到先得～ 评选的优秀设计作品，还有额外奖品CHERRY 无线键盘叠加哦～

参考链接：

[1]https://mobinext.console.aliyun.com/

[2]https://mobinext.console.aliyun.com/173017070584941/

[3]https://rdsnext.console.aliyun.com/

[4]https://rdsnext.console.aliyun.com/

来源  |  阿里云开发者公众号