AI 助理
备案控制台
开发者社区 数据库 文章 正文

如何快速搭建一个属于自己的网站？

2025-02-07 14
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文将详细介绍如何使用低代码开发平台，以可视化的方式添加多种风格的门户组件，快速高效地构建移动端和PC端门户网站。

一、引言

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


1、需求分析与准备阶段

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


2、网站开发阶段

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


3、版本更新与迭代阶段

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


4. 网站运维阶段

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


随之而来的问题是：

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

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


二、建站教程

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


部署资源

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

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


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

image.png

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

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

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

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


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

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


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


image.png


3.创建云数据库RDS

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

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


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

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


image.png


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

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


image.png

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


（3）创建数据库账号：

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


（4）创建数据库：

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

image.png


（5）开通外网地址：

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

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

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

image.png

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

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


4.一键部署

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

image.png


基于应用模板创建应用

  1. 创建应用

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


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

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

image.png

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

image.png

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


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


2.编辑网站信息

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

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

image.png

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

image.png

在后台管理页面：

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

image.png

image.png

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

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

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

image.png

3.新组件添加（可选）

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

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


image.png

（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)
);
  1. 插入数据。示例命令：
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', '第四季度');
  1. 回到魔笔控制台[2]，进入应用界面。按图示顺序新建集成操作。

image.png

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

image.png

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

image.png

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


4.网站发布


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


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

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

image.png

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

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

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


发布上线（可选）

  1. 域名申请和备案

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

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

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

登录阿里云域名控制台。

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

image.png

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

展开查看填写说明。

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


（2）购买域名

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

image.png

  1. 加入域名清单。

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

image.png

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

image.png

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

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

  • 域名注册过程中的常见问题，请参见域名注册FAQ。
  • 如果域名注册失败，请参见域名注册失败原因进行排查处理。


（3）ICP备案前准备

  1. （可选）前置审批。


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


  1. 管局规则。

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


（4）提交ICP备案

  1. 填写信息进行校验。

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

  1. 阿里云初审。

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

image.png

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

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


2.网站发布

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

说明

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

image.png

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

配置项

说明

示例值

记录类型

选择域名指向的类型。此处选择TXT。

TXT

主机记录

填写弹窗中给出的主机记录。

mobidnscheck.top

记录值

填写弹窗中给出的记录值。

e0861****3694

TTL

域名的更新周期，保留默认值。

10分钟


  1. 添加CNAME记录。

配置项

说明

示例值

记录类型

选择域名指向的类型。此处选择CNAME。

CNAME

主机记录

填写弹窗中给出的主机记录。

@

记录值

填写弹窗中给出的记录值。

cn-beijing.mobiapp.cloud

TTL

域名的更新周期，保留默认值。

10分钟


  1. 解析记录添加完成，单击开始验证，成功后单击下一步。
  2. 选中生产环境后单击完成，完成网站的公网发布。
  3. 资源集成配置。
  1. 登录魔笔控制台。
  2. 在资源 > 集成下，选择当前应用使用的集成，单击编辑。


image.png

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

三、结语

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

image.png


阿里云的一站式建站解决方案不仅解决了传统建站流程中的痛点，还为开发者和企业提供了更高效、更灵活的技术支持。通过云数据库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/





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

文章标签：
数据库
关系型数据库
RDS
网络安全
数据安全/隐私保护
阿里云开发者
目录
相关文章
云安全专家
|
1月前
|
供应链 监控 安全
对话｜企业如何构建更完善的容器供应链安全防护体系
阿里云与企业共筑容器供应链安全
云安全专家
171369 16
蚝油菜花
|
2天前
|
人工智能 搜索推荐 Docker
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型，创建个性化 AI 助手
DeepSeek R1 + LobeChat + Ollama：快速本地部署模型，创建个性化 AI 助手
蚝油菜花
1594 95
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型，创建个性化 AI 助手
弹性计算-百晓生
|
1月前
|
供应链 监控 安全
对话｜企业如何构建更完善的容器供应链安全防护体系
随着云计算和DevOps的兴起，容器技术和自动化在软件开发中扮演着愈发重要的角色，但也带来了新的安全挑战。阿里云针对这些挑战，组织了一场关于云上安全的深度访谈，邀请了内部专家穆寰、匡大虎和黄竹刚，深入探讨了容器安全与软件供应链安全的关系，分析了当前的安全隐患及应对策略，并介绍了阿里云提供的安全解决方案，包括容器镜像服务ACR、容器服务ACK、网格服务ASM等，旨在帮助企业构建涵盖整个软件开发生命周期的安全防护体系。通过加强基础设施安全性、技术创新以及倡导协同安全理念，阿里云致力于与客户共同建设更加安全可靠的软件供应链环境。
弹性计算-百晓生
150306 32
coder一枚
|
9天前
|
Linux iOS开发 MacOS
deepseek部署的详细步骤和方法，基于Ollama获取顶级推理能力！
DeepSeek基于Ollama部署教程，助你免费获取顶级推理能力。首先访问ollama.com下载并安装适用于macOS、Linux或Windows的Ollama版本。运行Ollama后，在官网搜索“deepseek”，选择适合你电脑配置的模型大小（如1.5b、7b等）。通过终端命令（如ollama run deepseek-r1:1.5b）启动模型，等待下载完成即可开始使用。退出模型时输入/bye。详细步骤如下图所示，轻松打造你的最强大脑。
coder一枚
7578 85
阿里云大数据Al技术
|
2天前
|
机器学习/深度学习 人工智能 自然语言处理
PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型
DeepSeek 系列模型以其卓越性能在全球范围内备受瞩目，多次评测中表现优异，性能接近甚至超越国际顶尖闭源模型（如OpenAI的GPT-4、Claude-3.5-Sonnet等）。企业用户和开发者可使用 PAI 平台一键部署 DeepSeek 系列模型，实现 DeepSeek 系列模型与现有业务的高效融合。
阿里云大数据Al技术
1339 28
云上的喵酱
|
10天前
|
人工智能 自然语言处理 Java
Spring AI，搭建个人AI助手
本期主要是实操性内容，聊聊AI大模型，并使用Spring AI搭建属于自己的AI助手、知识库。本期所需的演示源码笔者托管在Gitee上（https://gitee.com/catoncloud/spring-ai-demo），读者朋友可自行查阅。
云上的喵酱
925 41
Spring AI，搭建个人AI助手
弹性计算-百晓生
|
2月前
|
弹性计算 人工智能 安全
对话 | ECS如何构筑企业上云的第一道安全防线
随着中小企业加速上云，数据泄露、网络攻击等安全威胁日益严重。阿里云推出深度访谈栏目，汇聚产品技术专家，探讨云上安全问题及应对策略。首期节目聚焦ECS安全性，提出三道防线：数据安全、网络安全和身份认证与权限管理，确保用户在云端的数据主权和业务稳定。此外，阿里云还推出了“ECS 99套餐”，以高性价比提供全面的安全保障，帮助中小企业安全上云。
弹性计算-百晓生
201990 15
对话 | ECS如何构筑企业上云的第一道安全防线
AIweker
|
2天前
|
机器学习/深度学习 人工智能 并行计算
一文了解火爆的DeepSeek R1 | AIGC
DeepSeek R1是由DeepSeek公司推出的一款基于强化学习的开源推理模型，无需依赖监督微调或人工标注数据。它在数学、代码和自然语言推理任务上表现出色，具备低成本、高效率和多语言支持等优势，广泛应用于教育辅导、金融分析等领域。DeepSeek R1通过长链推理、多语言支持和高效部署等功能，显著提升了复杂任务的推理准确性，并且其创新的群体相对策略优化（GRPO）算法进一步提高了训练效率和稳定性。此外，DeepSeek R1的成本低至OpenAI同类产品的3%左右，为用户提供了更高的性价比。
AIweker
707 10
唠唠低代码
|
12天前
|
人工智能 JavaScript 前端开发
白嫖 DeepSeek ，低代码竟然会一键作诗？
宜搭低代码平台接入 DeepSeek AI 大模型能力竟然这么方便！本教程将揭秘宜搭如何快速接入 DeepSeek API，3 步打造专属作诗机器人，也许你还能开发出更多有意思的智能玩法，让创意在代码间自由生长。
唠唠低代码
1551 13
云服务器小助手
|
10天前
|
Linux iOS开发 MacOS
DeepSeek爆火，如何免费部署到你的电脑上？获取顶级推理能力教程来了
如何在本地电脑上免费部署DeepSeek，获取顶级推理能力？只需三步：1. 访问Ollama官网下载并安装对应操作系统的版本（支持macOS、Linux和Windows）。2. 打开Ollama并确保其正常运行。3. 在Ollama官网搜索并选择DeepSeek模型（如deepseek-r1），根据电脑配置选择合适的模型大小（1.5B至671B）。通过终端命令（如ollama run deepseek-r1:1.5b）运行模型，即可开始使用DeepSeek进行推理。退出模型时，在终端输入/bye。更多详情请参考Ollama官方文档。
云服务器小助手
3637 33