基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一

本文涉及的产品
云服务器 ECS,每月免费额度200元 3个月
云数据库 RDS MySQL Serverless,0.5-2RCU 50GB
云服务器ECS,u1 2核4GB 1个月
简介: 作为互联网行业从业者,头脑里总是会冒出各种各样的想法,当然可以用网络笔记、云盘甚至本地的方式等记录下自己的想法,然而如果想要落地尝试,则拥有一台自己的服务器就再好不过了。全栈开发已经讲了很久了,如果是前端,通过nodejs也可以搭建后端服务;如果是后端,通过flutter、uniapp等也可以搭建出各种端上的APP;如果非研发人员,通过低代码开发平台拖拽也可以。有了自己的产品之后,如果不满足于本地跑跑,那么就得面临选择应用的载体了,性价比最高的方式是选择云上ECS,下面拿我的几年使用经验来展开讲一下。

起源

ECS可供选择的云厂商比较多,我个人使用过linode、腾讯云、阿里云等几家的ECS产品,其中linode是接触最早的,大概用了两三年时间,每个月10个美元,当时出于接入点距离考虑选择了位于东京机房的服务器,但即便这样,打开博客经常性明显感觉到慢,有时甚至通过终端连接到服务器都超时。后来实在是忍受不了了,就切到了国内的云厂商,选择一个和自己同城的机房,毕竟做出的产品要先取悦自己嘛,结果证明是真香。国内的对比下来,阿里云整体是功能最完善丰富、技术最强大的了。选用一个标准的2C4G配置,使用到至今近三年时间。

image.png


我都拿ECS做了什么

我个人的刚需是博客记录、密码管理,再有就是日常脑海里浮现的想法的落地。当前实现了个人博客以及写作能力的搭建,密码管理的搭建,同学信息地图web应用的搭建,砍一刀、投票、抢票等助力APP的搭建等。


个人博客

image.png


密码管理

image.png

同学信息地图

蓝男橙女,点开可以展示对应同学资料信息,发到微信同学群里还挺受大家喜欢,短时间内就有几十名同学录入进来。

image.png

image.png

助力APP

这个比较复杂,从规划设计到开发落地,走了多处死胡同,作为个人开发者发布小程序或者应用太难了。

也提前了解过flutter,并基于flutter开了个简单的小样,但这里我最终还是选择使用了uniapp进行开发,主要是看到了社区里有较为丰富的插件,也支持我想要部署的小程序和端。

这块涉及端上的开发和后端开发,耗时3个月终于开发完毕,不过当前只支持Android系统。里面的细节这里先卖个关子,后面有机会再做展开。


举个栗子

服务器概览

image.png

根据控制台指引,安装CPU和内存使用率对应的插件,可以直接查看当前的系统负载情况。

image.png


有了服务器后,这里找一个大家都会用到的博客作为示例来展开讲一下吧。


博客技术组成拆解

这里我不使用saas化的博客产品,因为saas化的产品留给自己施展的空间有限,而是自己来搭建。那这里就涉及以下几个方面:

  • 编辑器                 ——markdown
  • 存储设计              ——MySQL
  • 定时任务渲染页面    ——crontab
  • web服务器            ——Nginx
  • 评论                    ——fastcgi


第一步 确定编辑器

选择博客的编辑器,自己实现成本会比较高,因为涉及到富文本编辑器的功能,这里我主要对比了两款,editor和markdown


https://github.com/kindsoft/kindeditor

image.png


https://github.com/pandao/editor.md

image.png


这里我两个都根据官方指引搭建了下,各有利弊,markdown整体体验下来好一些,用的多一些。


这里也需要借助web服务器才可以完整使用,到第四步一起说。


第二步 搭建MySQL

由于个人博客,大多数场景是自己记录查看使用,很少有爆火产生非常大流量的情况。因此这里也没必要单独采购MySQL做分离,完全可以都集成到同一台ECS上。


sudo yum install -y mysql mysql-server mysql-devel
# 修改端口啥的配置sudovim /etc/my.cnf
# 启动MySQLsudoservice mysqld startmysql -hlocalhost-uroot-p


这里注意下,最好设置成仅本机localhost可以登录,避免不必要的安全麻烦。


mysql> show tables;
+--------------------------+| Tables_in_Blog           |
+--------------------------+| t_blog                   |
| t_comments               |
| t_type_def               |
+--------------------------+3 rows inset (0.00 sec)

库表比较简单,共分为博客内容表、评论表、以及博客内容分类表。比较复杂的博客表建表语句如下:

| t_blog | CREATE TABLE `t_blog` (
`c_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`c_title` varchar(255) NOT NULL,
`c_tag` varchar(45) DEFAULT NULL,
`c_date` date NOT NULL,
`c_content` text NOT NULL,
`c_url` varchar(255) NOT NULL,
`c_type` tinyint(4) NOT NULL DEFAULT '1',
`c_keys` varchar(255) NOT NULL,
`c_bid` char(6) NOT NULL,
`c_mtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`c_state` tinyint(4) NOT NULL DEFAULT '0',
`c_nums` bigint(20) DEFAULT '1',
  PRIMARY KEY (`c_id`) USING BTREE,
  UNIQUE KEY `Index_uniq` (`c_bid`),
  KEY `Index_date` (`c_date`),
  KEY `Index_type` (`c_type`),
  KEY `Index_title` (`c_title`)
) ENGINE=InnoDB AUTO_INCREMENT=3682 DEFAULT CHARSET=utf8 |


第三步 定时任务渲染页面

由于是单机,这里利用Linux自带的crontab服务即可。

*/1 * * * * cd /**/**/**/blog;./markdownToHtml.sh >> /**/**/blog_markdownToHtml.log 2>&1

这里是每隔1分钟将编辑器里新增构建保存到数据库里初始状态的内容,转换为自己喜欢的博客html格式,并加上页头和页尾。


第四步 搭建web服务器

这里我选择使用比较常用的Nginx服务器,并使用fastcgi的能力,集成CGI接口提供评论的能力。另外,第二步当中使用到的编辑器里关于图片上传等相关的能力使用了PHP,这里要使得Nginx支持PHP。


  • 安装运行Nginx
sudo yum install nginx
# 切换到root 启动Nginxsystemctl start nginx
# 查看Nginx的运行状态systemctl status nginx
● nginx.service - SYSV: Nginx is a high-performance web and proxy server.
   Loaded: loaded (/etc/rc.d/init.d/nginx; bad; vendor preset: disabled)
   Active: active (running) since 五 2021-04-1622:10:39 CST; 1 years 0 months ago
     Docs: man:systemd-sysv-generator(8)
 Main PID: 21312 (nginx)
   CGroup: /system.slice/nginx.service
           ├─25914 nginx: master process /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
           └─25915 nginx: worker process
  • 配置Nginx 支持fastcgi
location ~ /blog.cgi
  {
    root    /**/**/**/cgi-bin/;
    fastcgi_pass 127.0.0.1:9911;
    fastcgi_index index.cgi;
    fastcgi_param SCRIPT_FILENAME fcgi$fastcgi_script_name;
    include        fastcgi_params;
  }
  • 配置Nginx 支持PHP

1. php包下载

https://secure.php.net/downloads.php

https://secure.php.net/get/php-7.1.7.tar.gz/from/a/mirror

2. 解压安装包后执行

./configure
--prefix=/data/php  --enable-fpm--enable-mbstring--disable-pdo--with-curl--disable-debug--disable-rpath--enable-inline-optimization--with-bz2--with-zlib--enable-sockets--enable-sysvsem--enable-sysvshm--enable-pcntl--enable-mbregex--with-mhash--enable-zip--with-pcre-regex--with-jpeg-dir# 若碰到如下报错:configure: error: xml2-config
not found. Please check your libxml2 installation.
# 意味着缺少xml2相关库,执行下述命令解决sudo yum install libxml2-devel -ychecking for cURL in default path... not found
configure: error: Please reinstall the libcurl
distribution
# 缺少curl相关库sudo yum -y install curl-devel


  1. 安装和启动
make & make test & sudomake install
# 启动php-fpm/data/php/sbin/php-fpm
提示
PHP error:ERROR: No pool
defined. at least one pool section must be specified in config file
配置文件目录中没有.conf结尾的文件
cd /data/php/etc/php-fpm.d/; cp www.conf.default www.conf


  1. 调整Nginx配置并重启


第五步 写fastcgi接口

这里选择c语言的clearsilver包来写fastcgi,纯属是带有个人纪念意义色彩的举动。

不过不管怎样,提供的http接口能力是一致的,即:

  1. 接收评论相关的入参:文章id、评论内容、提交者信息;
  2. 进行入参合法性校验;
  3. 维护到DB里
  4. 在文章加载时提供根据文章ID分页查询评论的能力。


逻辑相对简单,这里就不展开了。


总结

以上只是列举了使用ECS落地个人想法的一个案例,还有像其他的跑一下Python脚本处理个文件数据、写个爬虫程序获取自己感兴趣的内容、验证个技术想法等等还是很方便的,作为技术人员尤其是后端,非常建议入手一台,搭建自己的练兵场。

相关实践学习
一小时快速掌握 SQL 语法
本实验带您学习SQL的基础语法,快速入门SQL。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
18天前
|
Java Android开发
Rockchip系列之CAN APP测试应用实现(4)
Rockchip系列之CAN APP测试应用实现(4)
24 1
|
2月前
|
监控 安全 数据可视化
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
|
3月前
|
机器学习/深度学习 算法 数据可视化
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
107 0
|
14天前
|
搜索推荐 前端开发 JavaScript
【专栏】从网页轻松转换为应用越来越便捷
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。
|
2天前
|
XML 开发框架 .NET
C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
|
10天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
11天前
|
前端开发 Android开发 开发者
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
【4月更文挑战第30天】本文探讨了使用Flutter开发混合应用的方法。混合应用结合Web技术和原生容器,提供快速开发和低成本维护。Flutter,一款现代前端框架,以其插件系统和高性能渲染引擎支持混合应用开发。通过创建Flutter项目、添加平台代码、使用WebView、处理平台间通信以及发布应用,开发者可构建跨平台混合应用。虽然混合应用有性能和用户体验的局限,但Flutter的跨平台兼容性和丰富的插件生态降低了开发成本。开发者应根据项目需求权衡选择。
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
|
24天前
tauri-app生成应用的图标
tauri-app生成应用的图标
9 0
|
27天前
|
搜索推荐 开发工具 Android开发
安卓即时应用(Instant Apps)开发指南
【4月更文挑战第14天】Android Instant Apps让用户体验部分应用功能而无需完整下载。开发者需将应用拆分成模块,基于已上线的基础应用构建。使用Android Studio的Instant Apps Feature Library定义模块特性,优化代码与资源以减小模块大小,同步管理即时应用和基础应用的版本。经过测试,可发布至Google Play Console,提升用户便利性,创造新获客机会。
|
2月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
32 2